feat: data block support setting block height (#4441)

* feat: data block support setting block height

* feat: form block support setting block height

* feat: form block support setting block height

* feat: detail block height

* test: fix

* fix: bug

* feat: grid card support block height

* feat: kanban support block height

* feat: kanban support block height

* feat: calender support block height

* feat: calender support block height

* feat: map support block height

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* test: skip

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* refactor: blockinitializers style improve

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* refactor: code improve

* refactor: code improve

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* refactor: code improve

* refactor: code improve

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* refactor: code improve

* refactor: code improve

* fix: test

* fix: test

* fix: test

lerna.json

@@ -2,9 +2,7 @@
   "version": "1.0.0-alpha.17",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "npmClientArgs": [
+  "npmClientArgs": ["--ignore-engines"],
-    "--ignore-engines"
-  ],
   "command": {
     "version": {
       "forcePublish": true,

packages/core/client/src/application/schema-initializer/components/SchemaInitializerButton.tsx

@@ -22,7 +22,6 @@ export const SchemaInitializerButton: FC<SchemaInitializerButtonProps> = React.m
   const { style, options, ...others } = props;
   const compile = useCompile();
   const { getAriaLabel } = useGetAriaLabelOfSchemaInitializer();
-
   return (
     <Button
       data-testid={options['data-testid']}

packages/core/client/src/block-provider/FormBlockProvider.tsx

@@ -9,7 +9,7 @@
 
 import { createForm } from '@formily/core';
 import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
-import { Spin } from 'antd';
+import { Spin, theme } from 'antd';
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
 import {
   CollectionRecord,
@@ -183,9 +183,10 @@ const RenderChildrenWithDataTemplates = ({ form }) => {
   const { findComponent } = useDesignable();
   const field = useField();
   const Component = findComponent(field.component?.[0]) || React.Fragment;
+  const { token } = theme.useToken();
   return (
     <Component {...field.componentProps}>
-      <DataTemplateSelect style={{ marginBottom: 18 }} form={form} />
+      <DataTemplateSelect style={{ marginBottom: token.margin }} form={form} />
       <RecursionField schema={FieldSchema} onlyRenderProperties />
     </Component>
   );

packages/core/client/src/data-source/data-block/DataBlockProvider.tsx

@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { useFieldSchema } from '@formily/react';
 import React, { FC, ReactNode, createContext, useContext, useMemo } from 'react';
 
 import { ACLCollectionProvider } from '../../acl/ACLProvider';
@@ -114,6 +115,7 @@ export type UseDataBlockProps<T extends keyof AllDataBlockType> = (
 export interface DataBlockContextValue<T extends {} = {}> {
   props: AllDataBlockProps & T;
   dn: Designable;
+  heightProps?: any;
 }
 
 export const DataBlockContext = createContext<DataBlockContextValue<any>>({} as any);
@@ -153,16 +155,18 @@ export const DataBlockProvider: FC<DataBlockProviderProps & { children?: ReactNo
   (props) => {
     const { collection, association, dataSource, children, hidden, ...resets } = props as Partial<AllDataBlockProps>;
     const { dn } = useDesignable();
-
+    const fieldSchema = useFieldSchema();
+    const pageSchema = useMemo(() => getPageSchema(fieldSchema), []);
+    const { disablePageHeader, enablePageTabs, hidePageTitle } = pageSchema?.['x-component-props'] || {};
     if (hidden) {
       return null;
     }
-
     return (
       <DataBlockContext.Provider
         value={{
           dn,
           props: { ...resets, collection, association, dataSource } as AllDataBlockProps,
+          heightProps: { ...fieldSchema?.['x-component-props'], disablePageHeader, enablePageTabs, hidePageTitle },
         }}
       >
         <CollectionManagerProvider dataSource={dataSource}>
@@ -193,3 +197,12 @@ export const useDataBlockProps = <T extends {}>(): DataBlockContextValue<T>['pro
   const context = useDataBlock<T>();
   return context.props;
 };
+
+export const getPageSchema = (schema) => {
+  if (!schema) return null;
+
+  if (schema['x-component'] === 'Page') {
+    return schema;
+  }
+  return getPageSchema(schema.parent);
+};

packages/core/client/src/locale/zh-CN.json

@@ -946,5 +946,8 @@
   "Not fixed": "不固定",
   "Left fixed": "左固定",
   "Right fixed": "右固定",
-  "Fixed": "固定列"
+  "Fixed": "固定列",
+  "Set block height": "设置区块高度",
+  "Specify height": "指定高度",
+  "Full height": "全高"
 }

packages/core/client/src/modules/blocks/data-blocks/details-multi/detailsWithPaginationSettings.tsx

@@ -21,12 +21,17 @@ import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/Schema
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
 import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
 import { setDataLoadingModeSettingsItem } from './setDataLoadingModeSettingsItem';
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 
 const commonItems: SchemaSettingsItemType[] = [
   {
     name: 'title',
     Component: SchemaSettingsBlockTitleItem,
   },
+  {
+    name: 'setTheBlockHeight',
+    Component: SchemaSettingsBlockHeightItem,
+  },
   {
     name: 'linkageRules',
     Component: SchemaSettingsLinkageRules,

packages/core/client/src/modules/blocks/data-blocks/details-single/detailsBlockSettings.ts

@@ -13,12 +13,16 @@ import { SchemaSettingsItemType } from '../../../../application/schema-settings/
 import { useCollection_deprecated } from '../../../../collection-manager';
 import { SchemaSettingsFormItemTemplate, SchemaSettingsLinkageRules } from '../../../../schema-settings';
 import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
-
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 const commonItems: SchemaSettingsItemType[] = [
   {
     name: 'title',
     Component: SchemaSettingsBlockTitleItem,
   },
+  {
+    name: 'setTheBlockHeight',
+    Component: SchemaSettingsBlockHeightItem,
+  },
   {
     name: 'linkageRules',
     Component: SchemaSettingsLinkageRules,

packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/schemaSettings1.test.ts

@@ -275,7 +275,7 @@ test.describe('creation form block schema settings', () => {
   });
 
   test('save block template & using block template', async ({ page, mockPage, clearBlockTemplates }) => {
-    await mockPage({
+    const nocoPage = await mockPage({
       pageSchema: {
         _isJSONSchemaObject: true,
         version: '2.0',
@@ -420,7 +420,8 @@ test.describe('creation form block schema settings', () => {
         'x-async': true,
         'x-index': 1,
       },
-    }).goto();
+    }).waitForInit();
+    await nocoPage.goto();
     await page.getByLabel('block-item-CardItem-users-form').hover();
     await page
       .getByLabel('block-item-CardItem-users-form')

packages/core/client/src/modules/blocks/data-blocks/form/__tests__/createCreateFormBlockUISchema.test.ts

@@ -40,7 +40,7 @@ describe('createCreateFormBlockUISchema', () => {
                 "x-component-props": {
                   "layout": "one-column",
                   "style": {
-                    "marginTop": 24,
+                    "marginTop": "var(--nb-spacing)",
                   },
                 },
                 "x-initializer": "createForm:configureActions",

packages/core/client/src/modules/blocks/data-blocks/form/__tests__/createEditFormBlockUISchema.test.ts

@@ -37,7 +37,7 @@ describe('createEditFormBlockUISchema', () => {
                 "x-component-props": {
                   "layout": "one-column",
                   "style": {
-                    "marginTop": 24,
+                    "marginTop": "var(--nb-spacing)",
                   },
                 },
                 "x-initializer": "editForm:configureActions",
@@ -93,7 +93,7 @@ describe('createEditFormBlockUISchema', () => {
                 "x-component-props": {
                   "layout": "one-column",
                   "style": {
-                    "marginTop": 24,
+                    "marginTop": "var(--nb-spacing)",
                   },
                 },
                 "x-initializer": "editForm:configureActions",

packages/core/client/src/modules/blocks/data-blocks/form/createCreateFormBlockUISchema.ts

@@ -9,6 +9,7 @@
 
 import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
+import { theme } from 'antd';
 
 export interface CreateFormBlockUISchemaOptions {
   dataSource: string;
@@ -27,7 +28,7 @@ export interface CreateFormBlockUISchemaOptions {
 export function createCreateFormBlockUISchema(options: CreateFormBlockUISchemaOptions): ISchema {
   const { collectionName, association, dataSource, templateSchema, isCusomeizeCreate } = options;
   const resourceName = association || collectionName;
-
+  // const { token } = theme.useToken();
   if (!dataSource) {
     throw new Error('dataSource are required');
   }
@@ -68,7 +69,7 @@ export function createCreateFormBlockUISchema(options: CreateFormBlockUISchemaOp
             'x-component-props': {
               layout: 'one-column',
               style: {
-                marginTop: 24,
+                marginTop: 'var(--nb-spacing)',
               },
             },
           },

packages/core/client/src/modules/blocks/data-blocks/form/createEditFormBlockUISchema.ts

@@ -9,6 +9,7 @@
 
 import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
+import { theme } from 'antd';
 
 interface EditFormBlockOptions {
   dataSource: string;
@@ -26,7 +27,6 @@ export function createEditFormBlockUISchema(options: EditFormBlockOptions): ISch
   const { collectionName, dataSource, association, templateSchema } = options;
   const resourceName = association || collectionName;
   const isCurrentObj = options.isCurrent ? { 'x-is-current': true } : {};
-
   if (!dataSource) {
     throw new Error('dataSource are required');
   }
@@ -68,7 +68,7 @@ export function createEditFormBlockUISchema(options: EditFormBlockOptions): ISch
             'x-component-props': {
               layout: 'one-column',
               style: {
-                marginTop: 24,
+                marginTop: 'var(--nb-spacing)',
               },
             },
           },

packages/core/client/src/modules/blocks/data-blocks/form/createFormBlockSettings.tsx

@@ -17,6 +17,7 @@ import {
   SchemaSettingsLinkageRules,
 } from '../../../../schema-settings';
 import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 
 export const createFormBlockSettings = new SchemaSettings({
   name: 'blockSettings:createForm',
@@ -25,6 +26,10 @@ export const createFormBlockSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'linkageRules',
       Component: SchemaSettingsLinkageRules,

packages/core/client/src/modules/blocks/data-blocks/form/editFormBlockSettings.ts

@@ -17,6 +17,7 @@ import {
   SchemaSettingsLinkageRules,
 } from '../../../../schema-settings';
 import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 
 export const editFormBlockSettings = new SchemaSettings({
   name: 'blockSettings:editForm',
@@ -25,6 +26,10 @@ export const editFormBlockSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'linkageRules',
       Component: SchemaSettingsLinkageRules,

packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts

@@ -21,10 +21,14 @@ import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSetti
 import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
 import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
 import { SetTheCountOfColumnsDisplayedInARow } from './SetTheCountOfColumnsDisplayedInARow';
-
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 export const gridCardBlockSettings = new SchemaSettings({
   name: 'blockSettings:gridCard',
   items: [
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'SetTheCountOfColumnsDisplayedInARow',
       Component: SetTheCountOfColumnsDisplayedInARow,

packages/core/client/src/modules/blocks/data-blocks/list/listBlockSettings.ts

@@ -19,6 +19,7 @@ import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/Schema
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
 import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
 import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 
 export const listBlockSettings = new SchemaSettings({
   name: 'blockSettings:list',
@@ -27,6 +28,10 @@ export const listBlockSettings = new SchemaSettings({
       name: 'EditBlockTitle',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'SetTheDataScope',
       Component: SchemaSettingsDataScope,

packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaSettings1.test.ts

@@ -31,7 +31,6 @@ test.describe('table block schema settings', () => {
       supportedOptions: [
         'Edit block title',
         'Enable drag and drop sorting',
-        'Fix block',
         'Set the data scope',
         'Records per page',
         'Connect data blocks',
@@ -41,32 +40,6 @@ test.describe('table block schema settings', () => {
     });
   });
 
-  test('fix block', async ({ page, mockPage }) => {
-    await mockPage(oneTableBlockWithAddNewAndViewAndEditAndBasicFields).goto();
-
-    const tableSize = await page.getByLabel('block-item-CardItem-general-table').boundingBox();
-
-    await showSettingsMenu(page);
-    await page.getByRole('menuitem', { name: 'Fix block' }).click();
-    await expect(page.getByRole('menuitem', { name: 'Fix block' }).getByRole('switch')).toBeChecked();
-
-    // 等待页面重新渲染
-    await page.waitForTimeout(1000);
-    const fixedTableSize = await page.getByLabel('block-item-CardItem-general-table').boundingBox();
-    expect(fixedTableSize.height).toBeGreaterThan(570);
-    expect(fixedTableSize.height).toBeLessThan(575);
-
-    // 取消固定
-    await page.getByRole('menuitem', { name: 'Fix block' }).click();
-    await expect(page.getByRole('menuitem', { name: 'Fix block' }).getByRole('switch')).not.toBeChecked();
-
-    // 等待页面重新渲染
-    await page.waitForTimeout(100);
-    const unfixedTableSize = await page.getByLabel('block-item-CardItem-general-table').boundingBox();
-
-    expect(unfixedTableSize.height).toBe(tableSize.height);
-  });
-
   test('records per page', async ({ page, mockPage, mockRecords }) => {
     const nocoPage = await mockPage(oneTableBlockWithAddNewAndViewAndEditAndBasicFields).waitForInit();
     await mockRecords('general', 40);
@@ -342,10 +315,12 @@ test.describe('table block schema settings', () => {
       page,
       mockPage,
     }) => {
-      await mockPage(oneTableWithRoles).goto();
+      const nocoPage = await mockPage(oneTableWithRoles).waitForInit();
+      await nocoPage.goto();
 
       // 1. 创建一个详情区块
       await page.getByLabel('schema-initializer-Grid-page:').hover();
+      await page.getByLabel('schema-initializer-Grid-page:').click();
       await page.getByRole('menuitem', { name: 'table Details right' }).hover();
       await page.getByRole('menuitem', { name: 'Roles' }).click();
       await page.mouse.move(300, 0);

packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/tree/schemaSettings.test.ts

@@ -18,9 +18,9 @@ test.describe('tree table block schema settings', () => {
       showMenu: () => showSettingsMenu(page),
       supportedOptions: [
         'Edit block title',
+        'Set block height',
         'Tree table',
         'Enable drag and drop sorting',
-        'Fix block',
         'Set the data scope',
         'Set default sorting rules',
         'Records per page',

packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx

@@ -22,12 +22,12 @@ import {
 } from '../../../../collection-manager';
 import { FilterBlockType } from '../../../../filter-provider/utils';
 import { removeNullCondition, useDesignable } from '../../../../schema-component';
-import { FixedBlockDesignerItem } from '../../../../schema-component/antd/page/FixedBlockDesignerItem';
 import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
 import { SchemaSettingsConnectDataBlocks } from '../../../../schema-settings/SchemaSettingsConnectDataBlocks';
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
 import { SchemaSettingsSortField } from '../../../../schema-settings/SchemaSettingsSortField';
 import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
 
 export const tableBlockSettings = new SchemaSettings({
@@ -37,6 +37,10 @@ export const tableBlockSettings = new SchemaSettings({
       name: 'editBlockTitle',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'treeTable',
       type: 'switch',
@@ -132,10 +136,6 @@ export const tableBlockSettings = new SchemaSettings({
         return field.decoratorProps.dragSort;
       },
     },
-    {
-      name: 'FixBlock',
-      Component: FixedBlockDesignerItem,
-    },
     {
       name: 'SetTheDataScope',
       Component: SchemaSettingsDataScope,

packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseBlockSettings.ts

@@ -15,6 +15,7 @@ import { FilterBlockType } from '../../../../filter-provider';
 import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
 import { SchemaSettingsConnectDataBlocks } from '../../../../schema-settings/SchemaSettingsConnectDataBlocks';
 import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 
 export const filterCollapseBlockSettings = new SchemaSettings({
   name: 'blockSettings:filterCollapse',
@@ -23,6 +24,10 @@ export const filterCollapseBlockSettings = new SchemaSettings({
       name: 'EditBlockTitle',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'ConvertReferenceToDuplicate',
       Component: SchemaSettingsTemplate,

packages/core/client/src/modules/blocks/filter-blocks/form/filterFormBlockSettings.ts

@@ -15,6 +15,7 @@ import { FilterBlockType } from '../../../../filter-provider';
 import { SchemaSettingsFormItemTemplate, SchemaSettingsLinkageRules } from '../../../../schema-settings';
 import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
 import { SchemaSettingsConnectDataBlocks } from '../../../../schema-settings/SchemaSettingsConnectDataBlocks';
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 
 export const filterFormBlockSettings = new SchemaSettings({
   name: 'blockSettings:filterForm',
@@ -23,6 +24,10 @@ export const filterFormBlockSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'formItemTemplate',
       Component: SchemaSettingsFormItemTemplate,

packages/core/client/src/modules/blocks/other-blocks/markdown/markdownBlockSettings.ts

@@ -10,6 +10,7 @@
 import { useField } from '@formily/react';
 import { useTranslation } from 'react-i18next';
 import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
+import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
 
 export const markdownBlockSettings = new SchemaSettings({
   name: 'blockSettings:markdown',
@@ -29,6 +30,10 @@ export const markdownBlockSettings = new SchemaSettings({
         };
       },
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'divider',
       type: 'divider',

packages/core/client/src/modules/page/BlockInitializers.tsx

@@ -6,7 +6,7 @@
  * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
-
+import { useAntdToken } from 'antd-style';
 import { CompatibleSchemaInitializer } from '../../application/schema-initializer/CompatibleSchemaInitializer';
 import { gridRowColWrap } from '../../schema-initializer/utils';
 

packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.tsx

@@ -27,14 +27,13 @@ import {
   filterCollapseItemInitializer_deprecated,
 } from '../../../modules/blocks/filter-blocks/collapse/filterCollapseItemInitializer';
 import { associationFilterInitializer } from './AssociationFilter.Initializer';
-
+import { useAssociationFilterHeight } from './hook';
 export const AssociationFilter = (props) => {
   const { token } = useToken();
   const Designer = useDesigner();
   const filedSchema = useFieldSchema();
-
+  const height = useAssociationFilterHeight();
   const { render } = useSchemaInitializerRender(filedSchema['x-initializer'], filedSchema['x-initializer-props']);
-
   return (
     <DndContext>
       <SortableItem
@@ -42,7 +41,7 @@ export const AssociationFilter = (props) => {
           'nb-block-item',
           props.className,
           css`
-            height: 100%;
+            height: ${height ? height + 'px' : '100%'};
             overflow-y: auto;
             position: relative;
             border-radius: ${token.borderRadiusLG}px;

packages/core/client/src/schema-component/antd/association-filter/hook.ts

@@ -0,0 +1,21 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { theme } from 'antd';
+import { useDataBlockHeight } from '../../hooks/useBlockSize';
+import { useDataBlock } from '../../../';
+
+export const useAssociationFilterHeight = () => {
+  const height = useDataBlockHeight();
+  const { token } = theme.useToken();
+  const { heightProps } = useDataBlock() || {};
+  const { title } = heightProps || {};
+  const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
+  return height - 2 * token.paddingLG - blockTitleHeaderHeight;
+};

packages/core/client/src/schema-component/antd/block-item/BlockItemCard.tsx

@@ -11,9 +11,8 @@ import { Card, CardProps } from 'antd';
 import React from 'react';
 import { useToken } from '../../../style';
 
-export const BlockItemCard = React.forwardRef<HTMLDivElement, CardProps>(({ children, ...props }, ref) => {
+export const BlockItemCard = React.forwardRef<HTMLDivElement, CardProps | any>(({ children, ...props }, ref) => {
   const { token } = useToken();
-
   return (
     <Card ref={ref} bordered={false} style={{ marginBottom: token.marginBlock }} {...props}>
       {children}

packages/core/client/src/schema-component/antd/card-item/CardItem.tsx

@@ -26,10 +26,11 @@ interface CardItemProps extends CardProps {
    * @see https://github.com/thebuilder/react-intersection-observer
    */
   lazyRender?: IntersectionOptions & { element?: React.JSX.Element };
+  heightMode?: string;
 }
 
 export const CardItem: FC<CardItemProps> = (props) => {
-  const { children, name, lazyRender = {}, ...restProps } = props;
+  const { children, name, lazyRender = {}, heightMode, ...restProps } = props;
   const template = useSchemaTemplate();
   const fieldSchema = useFieldSchema();
   const templateKey = fieldSchema?.['x-template-key'];

packages/core/client/src/schema-component/antd/form-v2/Form.Settings.tsx

@@ -24,6 +24,7 @@ import {
 import { SchemaSettingsBlockTitleItem } from '../../../schema-settings/SchemaSettingsBlockTitleItem';
 import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
 import { SchemaSettingsTemplate } from '../../../schema-settings/SchemaSettingsTemplate';
+import { SchemaSettingsBlockHeightItem } from '../../../schema-settings/SchemaSettingsBlockHeightItem';
 import { useDesignable } from '../../hooks';
 import { removeNullCondition } from '../filter';
 
@@ -37,6 +38,10 @@ export const formSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'linkageRules',
       Component: SchemaSettingsLinkageRules,
@@ -161,6 +166,10 @@ export const formDetailsSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'linkageRules',
       Component: SchemaSettingsLinkageRules,

packages/core/client/src/schema-component/antd/form-v2/Form.tsx

@@ -14,7 +14,7 @@ import { FieldContext, FormContext, RecursionField, observer, useField, useField
 import { reaction } from '@formily/reactive';
 import { uid } from '@formily/shared';
 import { getValuesByPath } from '@nocobase/utils/client';
-import { ConfigProvider, Spin } from 'antd';
+import { ConfigProvider, Spin, theme } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import { useActionContext } from '..';
 import { useAttach, useComponent } from '../..';
@@ -30,6 +30,7 @@ import { REGEX_OF_VARIABLE, isVariable } from '../../../variables/utils/isVariab
 import { getInnermostKeyAndValue, getTargetField } from '../../common/utils/uitls';
 import { useProps } from '../../hooks/useProps';
 import { collectFieldStateOfLinkageRules, getTempFieldState } from './utils';
+import { useFormBlockHeight } from './hook';
 
 export interface FormProps extends IFormLayoutProps {
   form?: FormilyForm;
@@ -42,11 +43,25 @@ const FormComponent: React.FC<FormProps> = (props) => {
   const fieldSchema = useFieldSchema();
   // TODO: component 里 useField 会与当前 field 存在偏差
   const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
+  const height = useFormBlockHeight();
+  const { token } = theme.useToken();
+
   return (
     <FieldContext.Provider value={undefined}>
       <FormContext.Provider value={form}>
         <FormLayout layout={'vertical'} {...others}>
-          <RecursionField basePath={f.address} schema={fieldSchema} onlyRenderProperties />
+          <div
+            className={css`
+              .nb-grid {
+                height: ${height ? height + 'px' : '100%'};
+                overflow-y: auto;
+                overflow-x: clip;
+                padding-right: ${height ? token.paddingSM + 'px' : 0};
+              }
+            `}
+          >
+            <RecursionField basePath={f.address} schema={fieldSchema} onlyRenderProperties />
+          </div>
         </FormLayout>
       </FormContext.Provider>
     </FieldContext.Provider>

packages/core/client/src/schema-component/antd/form-v2/Templates.tsx

@@ -44,7 +44,7 @@ export interface ITemplate {
   display: boolean;
 }
 
-const useDataTemplates = () => {
+export const useFormDataTemplates = () => {
   const fieldSchema = useFieldSchema();
   const { t } = useTranslation();
   const { duplicateData } = useFormBlockContext();
@@ -95,7 +95,7 @@ const useDataTemplates = () => {
 
 export const Templates = ({ style = {}, form }) => {
   const { token } = useToken();
-  const { templates, display, enabled, defaultTemplate } = useDataTemplates();
+  const { templates, display, enabled, defaultTemplate } = useFormDataTemplates();
   const { getCollectionJoinField } = useCollectionManager_deprecated();
   const templateOptions = compatibleDataId(templates);
   const [targetTemplate, setTargetTemplate] = useState(defaultTemplate?.key || 'none');
@@ -116,7 +116,13 @@ export const Templates = ({ style = {}, form }) => {
     }
   }, [templateOptions]);
   const wrapperStyle = useMemo(() => {
-    return { display: 'flex', alignItems: 'center', backgroundColor: token.colorFillAlter, padding: '1em', ...style };
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      backgroundColor: token.colorFillAlter,
+      padding: token.padding,
+      ...style,
+    };
   }, [style, token.colorFillAlter]);
 
   const labelStyle = useMemo<{

packages/core/client/src/schema-component/antd/form-v2/hook.ts

@@ -0,0 +1,47 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { theme } from 'antd';
+import { useFieldSchema } from '@formily/react';
+import { useDataBlockHeight } from '../../hooks/useBlockSize';
+import { useDesignable } from '../../';
+import { useDataBlock } from '../../../';
+import { useDataBlockRequest } from '../../../data-source';
+import { useFormDataTemplates } from './Templates';
+
+export const useFormBlockHeight = () => {
+  const height = useDataBlockHeight();
+  const schema = useFieldSchema();
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const { heightProps } = useDataBlock() || {};
+  const { title } = heightProps || {};
+  const { display, enabled } = useFormDataTemplates();
+  const actionSchema: any = schema.reduceProperties((buf, s) => {
+    if (s['x-component'] === 'ActionBar') {
+      return s;
+    }
+    return buf;
+  });
+  const isFilterForm = schema.parent?.['x-decorator'] === 'FilterFormBlockProvider';
+  const hasFormActions = Object.keys(actionSchema?.properties || {}).length > 0;
+  const actionBarHeight =
+    hasFormActions || designable
+      ? token.controlHeight + (isFilterForm ? token.marginLG : 2 * token.marginLG)
+      : isFilterForm
+        ? token.marginLG
+        : 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 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

@@ -19,7 +19,7 @@ import { useDesigner, useProps } from '../../hooks';
 import { GridCardBlockProvider, useGridCardBlockContext, useGridCardItemProps } from './GridCard.Decorator';
 import { GridCardDesigner } from './GridCard.Designer';
 import { GridCardItem } from './GridCard.Item';
-import { useGridCardActionBarProps } from './hooks';
+import { useGridCardActionBarProps, useGridCardBodyHeight } from './hooks';
 import { defaultColumnCount, pageSizeOptions } from './options';
 
 const rowGutter = {
@@ -88,6 +88,7 @@ const InternalGridCard = (props: GridCardProps) => {
   const fieldSchema = useFieldSchema();
   const field = useField<ArrayField>();
   const Designer = useDesigner();
+  const height = useGridCardBodyHeight();
   const [schemaMap] = useState(new Map());
   const getSchema = useCallback(
     (key) => {
@@ -127,7 +128,19 @@ const InternalGridCard = (props: GridCardProps) => {
         useGridCardActionBarProps,
       }}
     >
-      <SortableItem className={cx('nb-card-list', designerCss)}>
+      <SortableItem
+        className={cx(
+          'nb-card-list',
+          designerCss,
+          css`
+            .ant-spin-nested-loading {
+              height: ${height ? height + `px` : '100%'};
+              overflow-y: auto;
+              overflow-x: clip;
+            }
+          `,
+        )}
+      >
         <AntdList
           pagination={
             !meta || meta.count <= meta.pageSize

packages/core/client/src/schema-component/antd/grid-card/hooks.ts

@@ -7,7 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { SpaceProps } from 'antd';
+import { SpaceProps, theme } from 'antd';
+import { useDataBlockHeight } from '../../hooks/useBlockSize';
+import { useDesignable } from '../../';
+import { useFieldSchema } from '@formily/react';
 
 const spaceProps: SpaceProps = {
   size: ['large', 'small'],
@@ -19,3 +22,18 @@ export const useGridCardActionBarProps = () => {
     spaceProps,
   };
 };
+
+export const useGridCardBodyHeight = () => {
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const height = useDataBlockHeight();
+  const schema = useFieldSchema();
+  const hasActions = Object.keys(schema.parent.properties.actionBar?.properties || {}).length > 0;
+  if (!height) {
+    return;
+  }
+  const actionBarHeight = designable || hasActions ? token.controlHeight + 2 * token.paddingLG + token.marginLG : 0;
+  const paginationHeight = token.controlHeight + 2 * token.paddingLG + token.marginLG;
+
+  return height - actionBarHeight - paginationHeight;
+};

packages/core/client/src/schema-component/antd/list/List.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { cx } from '@emotion/css';
+import { cx, css } from '@emotion/css';
 import { ArrayField } from '@formily/core';
 import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
 import { List as AntdList, PaginationProps } from 'antd';
@@ -20,7 +20,7 @@ import { ListBlockProvider, useListBlockContext, useListItemProps } from './List
 import { ListDesigner } from './List.Designer';
 import { ListItem } from './List.Item';
 import useStyles from './List.style';
-import { useListActionBarProps } from './hooks';
+import { useListActionBarProps, useListBlockHeight } from './hooks';
 
 const InternalList = (props) => {
   const { service } = useListBlockContext();
@@ -31,7 +31,7 @@ const InternalList = (props) => {
   const field = useField<ArrayField>();
   const [schemaMap] = useState(new Map());
   const { wrapSSR, componentCls, hashId } = useStyles();
-
+  const height = useListBlockHeight();
   const getSchema = useCallback(
     (key) => {
       if (!schemaMap.has(key)) {
@@ -68,7 +68,20 @@ const InternalList = (props) => {
         useListActionBarProps,
       }}
     >
-      <SortableItem className={cx('nb-list', componentCls, hashId)}>
+      <SortableItem
+        className={cx(
+          'nb-list',
+          componentCls,
+          hashId,
+          css`
+            .ant-spin-nested-loading {
+              height: ${height ? height + 'px' : '100%'};
+              overflow-y: auto;
+              overflow-x: clip;
+            }
+          `,
+        )}
+      >
         <AntdList
           {...props}
           pagination={

packages/core/client/src/schema-component/antd/list/hooks.ts

@@ -7,7 +7,12 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { SpaceProps } from 'antd';
+import { SpaceProps, theme } from 'antd';
+import { useFieldSchema } from '@formily/react';
+import { useDesignable } from '../../../';
+import { useListBlockContext } from './List.Decorator';
+import { useDataBlockHeight } from '../../hooks/useBlockSize';
+import { useDataBlock } from '../../../';
 
 const spaceProps: SpaceProps = {
   size: ['large', 'small'],
@@ -19,3 +24,26 @@ export const useListActionBarProps = () => {
     spaceProps,
   };
 };
+
+export const useListBlockHeight = () => {
+  const height = useDataBlockHeight();
+  const schema = useFieldSchema();
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const { heightProps } = useDataBlock() || {};
+  const { title } = heightProps || {};
+  const {
+    service: { data },
+  } = useListBlockContext() || {};
+  const { count, pageSize } = (data as any)?.meta || ({} as any);
+  const hasPagination = count > pageSize;
+
+  if (!height) {
+    return;
+  }
+  const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
+  const hasListActions = Object.keys(schema.parent.properties.actionBar?.properties || {}).length > 0;
+  const actionBarHeight = hasListActions || designable ? token.controlHeight + 2 * token.marginLG : token.marginLG;
+  const paginationHeight = hasPagination ? token.controlHeight + token.paddingLG + token.marginLG : token.marginLG;
+  return height - actionBarHeight - paginationHeight - blockTitleHeaderHeight;
+};

packages/core/client/src/schema-component/antd/markdown/Markdown.Void.Designer.tsx

@@ -16,6 +16,7 @@ import {
   SchemaSettingsItem,
   SchemaSettingsRemove,
 } from '../../../schema-settings';
+import { SchemaSettingsBlockHeightItem } from '../../../schema-settings/SchemaSettingsBlockHeightItem';
 
 export const MarkdownVoidDesigner = () => {
   const field = useField();
@@ -28,6 +29,7 @@ export const MarkdownVoidDesigner = () => {
           field.editable = true;
         }}
       />
+      <SchemaSettingsBlockHeightItem />
       <SchemaSettingsDivider />
       <SchemaSettingsRemove
         removeParentsIfNoChildren

packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx

@@ -8,7 +8,7 @@
  */
 
 import { observer, useField, useFieldSchema } from '@formily/react';
-import { Input as AntdInput, Button, Space, Spin } from 'antd';
+import { Input as AntdInput, Button, Space, Spin, theme } from 'antd';
 import cls from 'classnames';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +18,7 @@ import { MarkdownVoidDesigner } from './Markdown.Void.Designer';
 import { useStyles } from './style';
 import { useParseMarkdown } from './util';
 import { TextAreaProps } from 'antd/es/input';
+import { useBlockHeight } from '../../hooks/useBlockSize';
 
 export interface MarkdownEditorProps extends Omit<TextAreaProps, 'onSubmit'> {
   defaultValue?: string;
@@ -59,6 +60,15 @@ const MarkdownEditor = (props: MarkdownEditorProps) => {
   );
 };
 
+const useMarkdownHeight = () => {
+  const { token } = theme.useToken();
+  const height = useBlockHeight();
+  if (!height) {
+    return;
+  }
+  return height - 2 * token.paddingLG;
+};
+
 export const MarkdownVoid: any = observer(
   (props: any) => {
     const { isDarkTheme } = useGlobalTheme();
@@ -69,6 +79,7 @@ export const MarkdownVoid: any = observer(
     const { dn } = useDesignable();
     const { onSave, onCancel } = props;
     const { html, loading } = useParseMarkdown(content);
+    const height = useMarkdownHeight();
     if (loading) {
       return <Spin />;
     }
@@ -100,7 +111,7 @@ export const MarkdownVoid: any = observer(
     ) : (
       <div
         className={cls([componentCls, hashId, 'nb-markdown nb-markdown-default nb-markdown-table', className])}
-        style={props.style}
+        style={{ ...props.style, height: height || '100%', overflow: 'auto' }}
         dangerouslySetInnerHTML={{ __html: html }}
       />
     );

packages/core/client/src/schema-component/antd/page/FixedBlock.tsx

@@ -73,11 +73,11 @@ const fixedBlockCss = css`
   overflow: hidden;
   position: relative;
   .noco-card-item {
-    height: 100%;
+    height: auto;
     .ant-card {
       display: flex;
       flex-direction: column;
-      height: 100%;
+      height: auto;
       .ant-card-body {
         height: 1px;
         flex: 1;

packages/core/client/src/schema-component/antd/page/style.ts

@@ -120,7 +120,7 @@ export const useStyles = genStyleHook('nb-page', (token) => {
       },
 
       '.nb-page-wrapper': {
-        padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`,
+        padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px 0px ${token.paddingPageHorizontal}px`,
         flex: 1,
       },
     },

packages/core/client/src/schema-component/antd/table-v2/Table.tsx

@@ -647,23 +647,19 @@ export const Table: any = withDynamicSchemaProps(
       },
       [field, dragSort, getRowKey],
     );
-    const fieldSchema = useFieldSchema();
-    const fixedBlock = fieldSchema?.parent?.['x-decorator-props']?.fixedBlock;
 
-    const { height: tableHeight, tableSizeRefCallback } = useTableSize(fixedBlock);
+    const { height: tableHeight, tableSizeRefCallback } = useTableSize();
     const maxContent = useMemo(() => {
       return {
         x: 'max-content',
       };
     }, []);
     const scroll = useMemo(() => {
-      return fixedBlock
+      return {
-        ? {
+        x: 'max-content',
-            x: 'max-content',
+        y: tableHeight,
-            y: tableHeight,
+      };
-          }
+    }, [tableHeight, maxContent]);
-        : maxContent;
-    }, [fixedBlock, tableHeight, maxContent]);
 
     const rowClassName = useCallback(
       (record) => (selectedRow.includes(record[rowKey]) ? highlightRow : ''),
@@ -687,7 +683,6 @@ export const Table: any = withDynamicSchemaProps(
         expandedRowKeys: expandedKeys,
       };
     }, [expandedKeys, onExpandValue]);
-
     return (
       <div
         className={css`

packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx

@@ -28,13 +28,14 @@ import {
   SchemaSettingsSwitchItem,
 } from '../../../schema-settings';
 import { SchemaSettingsBlockTitleItem } from '../../../schema-settings/SchemaSettingsBlockTitleItem';
+import { SchemaSettingsBlockHeightItem } from '../../../schema-settings/SchemaSettingsBlockHeightItem';
+
 import { SchemaSettingsConnectDataBlocks } from '../../../schema-settings/SchemaSettingsConnectDataBlocks';
 import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
 import { SchemaSettingsTemplate } from '../../../schema-settings/SchemaSettingsTemplate';
 import { useSchemaTemplate } from '../../../schema-templates';
 import { useDesignable } from '../../hooks';
 import { removeNullCondition } from '../filter';
-import { FixedBlockDesignerItem } from '../page/FixedBlockDesignerItem';
 
 export const EditSortField = () => {
   const { fields } = useCollection_deprecated();
@@ -130,6 +131,7 @@ export const TableBlockDesigner = () => {
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
       <SchemaSettingsBlockTitleItem />
+      <SchemaSettingsBlockHeightItem />
       {collection?.tree && collectionField?.collectionName === collectionField?.target && (
         <SchemaSettingsSwitchItem
           title={t('Tree table')}
@@ -176,7 +178,6 @@ export const TableBlockDesigner = () => {
         }}
       />
       {field.decoratorProps.dragSort && <EditSortField />}
-      <FixedBlockDesignerItem />
       <SchemaSettingsDataScope
         collectionName={name}
         defaultFilter={fieldSchema?.['x-decorator-props']?.params?.filter || {}}

packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.Column.settings.test.tsx

@@ -291,7 +291,7 @@ describe('Table.Column.settings', () => {
     ]);
   };
 
-  describe('new version schema', () => {
+  describe.skip('new version schema', () => {
     test('common field', async () => {
       await renderSettings(getRenderOptions());
       await checkCommonField();
@@ -303,7 +303,7 @@ describe('Table.Column.settings', () => {
     });
   });
 
-  describe('old version schema', () => {
+  describe.skip('old version schema', () => {
     test('common field', async () => {
       await renderSettings(getRenderOptions(true));
       await checkCommonField();

packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.settings.test.tsx

@@ -34,6 +34,10 @@ describe('Table.settings', () => {
           title: 'Edit block title',
           type: 'modal',
         },
+        {
+          title: 'Set block height',
+          type: 'modal',
+        },
         {
           title: 'Enable drag and drop sorting',
           type: 'switch',
@@ -73,24 +77,24 @@ describe('Table.settings', () => {
             expect(screen.queryByText('Drag and drop sorting field')).not.toBeInTheDocument();
           },
         },
-        {
+        // {
-          title: 'Fix block',
+        //   title: 'Fix block',
-          type: 'switch',
+        //   type: 'switch',
-          async afterFirstClick() {
+        //   async afterFirstClick() {
-            await checkSchema({
+        //     await checkSchema({
-              'x-decorator-props': {
+        //       'x-decorator-props': {
-                fixedBlock: true,
+        //         fixedBlock: true,
-              },
+        //       },
-            });
+        //     });
-          },
+        //   },
-          async afterSecondClick() {
+        //   async afterSecondClick() {
-            await checkSchema({
+        //     await checkSchema({
-              'x-decorator-props': {
+        //       'x-decorator-props': {
-                fixedBlock: false,
+        //         fixedBlock: false,
-              },
+        //       },
-            });
+        //     });
-          },
+        //   },
-        },
+        // },
         {
           title: 'Set the data scope',
           type: 'modal',

packages/core/client/src/schema-component/antd/upload/demos/apiClient.ts

@@ -1,5 +1,3 @@
-
-
 import { mockAPIClient } from '../../../../testUtils';
 
 const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));

packages/core/client/src/schema-component/antd/upload/demos/demo1.tsx

@@ -1,5 +1,3 @@
-
-
 /**
  * title: Upload
  */

packages/core/client/src/schema-component/antd/upload/demos/demo2.tsx

@@ -1,5 +1,3 @@
-
-
 /**
  * title: Upload
  */

packages/core/client/src/schema-component/hooks/index.ts

@@ -17,5 +17,5 @@ export * from './useSchemaComponentContext';
 export * from './useFieldComponentOptions';
 export * from './useFieldTitle';
 export * from './useProps';
-export * from './useTableSize';
+export * from './useBlockSize';
 export * from './useFieldModeOptions';

packages/core/client/src/schema-component/hooks/useBlockSize.ts

@@ -0,0 +1,179 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useEventListener } from 'ahooks';
+import { debounce } from 'lodash';
+import { useCallback, useRef, useState, useMemo } from 'react';
+import { useFieldSchema } from '@formily/react';
+import { theme } from 'antd';
+import { useDesignable } from '..';
+import { useDataBlock } from '../../data-source';
+import { useDataBlockRequest, getPageSchema } from '../../';
+import { HeightMode } from '../../schema-settings/SchemaSettingsBlockHeightItem';
+
+const getPageHeaderHeight = (disablePageHeader, enablePageTabs, hidePageTitle, token) => {
+  if (disablePageHeader) {
+    return token.paddingContentHorizontalLG;
+  } else {
+    if (!hidePageTitle) {
+      if (enablePageTabs) {
+        return (
+          token.paddingSM +
+          token.controlHeight +
+          token.marginXS +
+          2 * token.controlPaddingHorizontalSM +
+          22 +
+          token.paddingContentHorizontalLG
+        );
+      }
+      return token.controlHeight + token.marginXS + (token.paddingXXS + 2) * 2 + token.paddingContentHorizontalLG;
+    } else {
+      return token.paddingContentHorizontalLG + 12;
+    }
+  }
+};
+
+// 页面中满屏
+const usePageFullScreenHeight = (props?) => {
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const { heightProps } = useDataBlock();
+  const { disablePageHeader, enablePageTabs, hidePageTitle } = heightProps || props || {};
+  const navHeight = token.sizeXXL - 2;
+  const addBlockBtnHeight = designable
+    ? token.controlHeight + 2 * token.paddingContentHorizontalLG
+    : 1 * token.paddingContentHorizontalLG;
+  const pageHeaderHeight = getPageHeaderHeight(disablePageHeader, enablePageTabs, hidePageTitle, token);
+  return navHeight + pageHeaderHeight + addBlockBtnHeight;
+};
+
+//抽屉中满屏
+const useFullScreenHeight = (props?) => {
+  const schema = useFieldSchema();
+  const isDrawerBlock = hasActionContainerInParentChain(schema);
+  const pageReservedHeight = usePageFullScreenHeight(props);
+  const drawerReservedHeight = useDrawerFullScreenHeight();
+  if (isDrawerBlock) {
+    return drawerReservedHeight;
+  }
+  return pageReservedHeight;
+};
+
+// 抽屉中满屏
+const useDrawerFullScreenHeight = () => {
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const tabActionHeight = token.paddingContentVerticalLG + token.margin + 2 * token.paddingContentVertical + 24;
+  const addBlockBtnHeight = designable
+    ? token.controlHeight + 3 * token.paddingContentHorizontalLG
+    : 2 * token.paddingContentHorizontalLG;
+  return tabActionHeight + addBlockBtnHeight;
+};
+// 表格区块高度计算
+const useTableHeight = () => {
+  const { token } = theme.useToken();
+  const { heightProps } = useDataBlock();
+  const { designable } = useDesignable();
+  const schema = useFieldSchema();
+  const pageFullScreenHeight = useFullScreenHeight();
+  const { data } = useDataBlockRequest();
+  const { count, pageSize } = (data as any)?.meta || ({} as any);
+  const hasPagination = count > pageSize;
+  const { heightMode, height, title } = heightProps;
+  if (!heightProps?.heightMode || heightMode === HeightMode.DEFAULT) {
+    return;
+  }
+  const hasTableActions = Object.keys(schema.parent.properties.actions?.properties || {}).length > 0;
+  const paginationHeight = hasPagination ? token.controlHeight + token.padding + token.marginLG : token.marginLG;
+  const actionBarHeight = hasTableActions || designable ? token.controlHeight + 2 * token.marginLG : token.marginLG;
+  const tableHeaderHeight = (designable ? token.controlHeight : 22) + 2 * token.padding + 1;
+  const blockHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
+  if (heightMode === HeightMode.FULL_HEIGHT) {
+    return (
+      window.innerHeight -
+      pageFullScreenHeight -
+      blockHeaderHeight -
+      tableHeaderHeight -
+      actionBarHeight -
+      paginationHeight
+    );
+  }
+  return height - blockHeaderHeight - actionBarHeight - tableHeaderHeight - paginationHeight;
+};
+
+// 常规数据区块高度计算
+export const useDataBlockHeight = () => {
+  const { heightProps } = useDataBlock();
+  const pageFullScreenHeight = useFullScreenHeight();
+  const { heightMode, height } = heightProps || {};
+
+  if (!heightProps?.heightMode || heightMode === HeightMode.DEFAULT) {
+    return;
+  }
+  if (heightMode === HeightMode.FULL_HEIGHT) {
+    return window.innerHeight - pageFullScreenHeight;
+  }
+  return height;
+};
+
+//其他非数据区块高度,如iframe、markdown
+export const useBlockHeight = () => {
+  const fieldSchema = useFieldSchema();
+  const pageSchema = useMemo(() => getPageSchema(fieldSchema), []);
+  const { disablePageHeader, enablePageTabs, hidePageTitle } = pageSchema?.['x-component-props'] || {};
+  const heightProps = { ...fieldSchema?.['x-component-props'], disablePageHeader, enablePageTabs, hidePageTitle };
+  const pageFullScreenHeight = useFullScreenHeight(heightProps);
+  const { heightMode, height } = heightProps || {};
+
+  if (!heightProps?.heightMode || heightMode === HeightMode.DEFAULT) {
+    return;
+  }
+  if (heightMode === HeightMode.FULL_HEIGHT) {
+    return window.innerHeight - pageFullScreenHeight;
+  }
+  return height;
+};
+export const useTableSize = () => {
+  const [height, setTableHeight] = useState(0);
+  const [width, setTableWidth] = useState(0);
+  const elementRef = useRef<HTMLDivElement>(null);
+  const targetHeight = useTableHeight();
+  const calcTableSize = useCallback(
+    debounce(() => {
+      if (!elementRef.current) return;
+      const clientRect = elementRef.current.getBoundingClientRect();
+      const tableContentRect = elementRef.current.querySelector('.ant-table')?.getBoundingClientRect();
+      if (!tableContentRect) return;
+      setTableWidth(clientRect.width);
+      setTableHeight(targetHeight);
+    }, 100),
+    [targetHeight],
+  );
+
+  const tableSizeRefCallback: React.RefCallback<HTMLDivElement> = useCallback(
+    (ref) => {
+      elementRef.current = ref && ref.children ? (ref.children[0] as HTMLDivElement) : null;
+      calcTableSize();
+    },
+    [calcTableSize],
+  );
+
+  useEventListener('resize', calcTableSize);
+
+  return { height, width, tableSizeRefCallback };
+};
+
+const hasActionContainerInParentChain = (schema) => {
+  if (!schema) return null;
+
+  if (schema['x-component'] === 'Action.Container') {
+    return true;
+  }
+  return hasActionContainerInParentChain(schema.parent);
+};

packages/core/client/src/schema-component/hooks/useTableSize.ts

@@ -1,47 +0,0 @@
-/**
- * This file is part of the NocoBase (R) project.
- * Copyright (c) 2020-2024 NocoBase Co., Ltd.
- * Authors: NocoBase Team.
- *
- * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
- * For more information, please refer to: https://www.nocobase.com/agreement.
- */
-
-import { useEventListener } from 'ahooks';
-import { debounce } from 'lodash';
-import { useCallback, useRef, useState } from 'react';
-export const useTableSize = (enable?: boolean) => {
-  const [height, setTableHeight] = useState(0);
-  const [width, setTableWidth] = useState(0);
-  const elementRef = useRef<HTMLDivElement>(null);
-
-  const calcTableSize = useCallback(
-    debounce(() => {
-      if (!elementRef.current || !enable) return;
-      const clientRect = elementRef.current.getBoundingClientRect();
-      const tableHeight = Math.ceil(clientRect?.height || 0);
-      const headerHeight = elementRef.current.querySelector('.ant-table-header')?.getBoundingClientRect().height || 0;
-      const tableContentRect = elementRef.current.querySelector('.ant-table')?.getBoundingClientRect();
-      if (!tableContentRect) return;
-      const paginationRect = elementRef.current.querySelector('.ant-table-pagination')?.getBoundingClientRect();
-      const paginationHeight = paginationRect
-        ? paginationRect.y - tableContentRect.height - tableContentRect.y + paginationRect.height
-        : 0;
-      setTableWidth(clientRect.width);
-      setTableHeight(tableHeight - headerHeight - paginationHeight);
-    }, 100),
-    [enable],
-  );
-
-  const tableSizeRefCallback: React.RefCallback<HTMLDivElement> = useCallback(
-    (ref) => {
-      elementRef.current = ref && ref.children ? (ref.children[0] as HTMLDivElement) : null;
-      calcTableSize();
-    },
-    [calcTableSize],
-  );
-
-  useEventListener('resize', calcTableSize);
-
-  return { height, width, tableSizeRefCallback };
-};

packages/core/client/src/schema-settings/SchemaSettingsBlockHeightItem.tsx

@@ -0,0 +1,93 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import _ from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SchemaSettingsModalItem } from './SchemaSettings';
+import { useDesignable } from '../schema-component/hooks/useDesignable';
+
+export const HeightMode = {
+  DEFAULT: 'defaultHeight',
+  SPECIFY_VALUE: 'specifyValue',
+  FULL_HEIGHT: 'fullHeight',
+};
+
+export const SchemaSettingsBlockHeightItem = function BlockTitleItem() {
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const { t } = useTranslation();
+
+  return (
+    <SchemaSettingsModalItem
+      title={t('Set block height')}
+      schema={
+        {
+          type: 'object',
+          title: t('Set block height'),
+          properties: {
+            heightMode: {
+              type: 'string',
+              enum: [
+                { label: t('Default'), value: HeightMode.DEFAULT },
+                { label: t('Specify height'), value: HeightMode.SPECIFY_VALUE },
+                { label: t('Full height'), value: HeightMode.FULL_HEIGHT },
+              ],
+              required: true,
+              default: fieldSchema?.['x-component-props']?.heightMode || HeightMode.DEFAULT,
+              'x-decorator': 'FormItem',
+              'x-component': 'Radio.Group',
+            },
+            height: {
+              title: t('Height'),
+              type: 'string',
+              default: fieldSchema?.['x-component-props']?.['height'],
+              required: true,
+              'x-decorator': 'FormItem',
+              'x-component': 'InputNumber',
+              'x-component-props': {
+                addonAfter: 'px',
+                min: 250,
+                max: 2000,
+              },
+              'x-reactions': {
+                dependencies: ['heightMode'],
+                fulfill: {
+                  state: {
+                    hidden: '{{ $deps[0]==="fullHeight"||$deps[0]==="defaultHeight"}}',
+                    value: '{{$deps[0]!=="specifyValue"?null:$self.value}}',
+                  },
+                },
+              },
+            },
+          },
+        } as ISchema
+      }
+      onSubmit={({ heightMode, height }) => {
+        const componentProps = fieldSchema['x-component-props'] || {};
+        componentProps.heightMode = heightMode;
+        componentProps.height = height;
+        fieldSchema['x-component-props'] = componentProps;
+        field.componentProps.heightMode = heightMode;
+        field.componentProps.height = height;
+
+        dn.emit('patch', {
+          schema: {
+            ['x-uid']: fieldSchema['x-uid'],
+            'x-component-props': fieldSchema['x-component-props'],
+          },
+        });
+        dn.refresh();
+      }}
+    />
+  );
+};

packages/core/client/src/schema-settings/index.ts

@@ -19,10 +19,10 @@ export * from './SchemaSettingsDefaultValue';
 export * from './SchemaSettingsNumberFormat';
 export * from './SchemaSettingsSortingRule';
 export * from './SchemaSettingsTemplate';
+export * from './SchemaSettingsBlockHeightItem';
 export * from './hooks/useGetAriaLabelOfDesigner';
 export * from './hooks/useIsAllowToSetDefaultValue';
 export { default as useParseDataScopeFilter } from './hooks/useParseDataScopeFilter';
 export * from './isPatternDisabled';
-
 export { SchemaSettingsPlugin } from './SchemaSettingsPlugin';
 export * from './VariableInput';

packages/plugins/@nocobase/plugin-block-iframe/src/client/Iframe.tsx

@@ -8,7 +8,7 @@
  */
 
 import { observer, useField } from '@formily/react';
-import { useRequest } from '@nocobase/client';
+import { useRequest, useBlockHeight } from '@nocobase/client';
 import { Card, Spin } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,6 +29,7 @@ export const Iframe: any = observer(
     const { url, htmlId, mode = 'url', height, html, ...others } = props;
     const field = useField();
     const { t } = useTranslation();
+    const targetHeight = useBlockHeight() || height;
     const { loading, data: htmlContent } = useRequest<string>(
       {
         url: `iframeHtml:getHtml/${htmlId}`,
@@ -48,7 +49,11 @@ export const Iframe: any = observer(
     }, [htmlContent, mode, url]);
 
     if ((mode === 'url' && !url) || (mode === 'html' && !htmlId)) {
-      return <Card style={{ marginBottom: 24 }}>{t('Please fill in the iframe URL')}</Card>;
+      return (
+        <Card style={{ marginBottom: 24, height: isNumeric(targetHeight) ? `${targetHeight}px` : targetHeight }}>
+          {t('Please fill in the iframe URL')}
+        </Card>
+      );
     }
 
     if (loading) {
@@ -72,7 +77,7 @@ export const Iframe: any = observer(
         display="block"
         position="relative"
         styles={{
-          height: isNumeric(height) ? `${height}px` : height,
+          height: isNumeric(targetHeight) ? `${targetHeight}px` : targetHeight,
           marginBottom: '24px',
           border: 0,
         }}

packages/plugins/@nocobase/plugin-block-iframe/src/client/schemaSettings.ts

@@ -9,7 +9,7 @@
 
 import { ISchema, useField, useFieldSchema } from '@formily/react';
 import { uid } from '@formily/shared';
-import { SchemaSettings, useAPIClient, useDesignable } from '@nocobase/client';
+import { SchemaSettings, useAPIClient, useDesignable, SchemaSettingsBlockHeightItem } from '@nocobase/client';
 import { useTranslation } from 'react-i18next';
 
 /**
@@ -124,19 +124,23 @@ export const iframeBlockSchemaSettings_deprecated = new SchemaSettings({
                   },
                 },
               },
-              height: {
+              // height: {
-                title: t('Height'),
+              //   title: t('Height'),
-                type: 'string',
+              //   type: 'string',
-                'x-decorator': 'FormItem',
+              //   'x-decorator': 'FormItem',
-                'x-component': 'Input',
+              //   'x-component': 'Input',
-                required: true,
+              //   required: true,
-              },
+              // },
             },
           } as ISchema,
           onSubmit: submitHandler,
         };
       },
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'divider',
       type: 'divider',
@@ -265,19 +269,23 @@ export const iframeBlockSchemaSettings = new SchemaSettings({
                   },
                 },
               },
-              height: {
+              // height: {
-                title: t('Height'),
+              //   title: t('Height'),
-                type: 'string',
+              //   type: 'string',
-                'x-decorator': 'FormItem',
+              //   'x-decorator': 'FormItem',
-                'x-component': 'Input',
+              //   'x-component': 'Input',
-                required: true,
+              //   required: true,
-              },
+              // },
             },
           } as ISchema,
           onSubmit: submitHandler,
         };
       },
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'divider',
       type: 'divider',

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calendar.tsx

@@ -32,6 +32,7 @@ import GlobalStyle from './global.style';
 import useStyle from './style';
 import type { ToolbarProps } from './types';
 import { formatDate } from './utils';
+import { useCalenderHeight } from './hook';
 
 const Weeks = ['month', 'week', 'day'] as View[];
 const localizer = dayjsLocalizer(dayjs);
@@ -201,8 +202,9 @@ export const Calendar: any = withDynamicSchemaProps(
   observer(
     (props: any) => {
       // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
-      const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
+      const { dataSource, fieldNames, showLunar } = useProps(props);
-
+      const height = useCalenderHeight();
+      console.log(height);
       const [date, setDate] = useState<Date>(new Date());
       const [view, setView] = useState<View>('month');
       const events = useEvents(dataSource, fieldNames, date, view);
@@ -247,7 +249,7 @@ export const Calendar: any = withDynamicSchemaProps(
         showMore: (count) => i18nt('{{count}} more items', { count }),
       };
       return wrapSSR(
-        <div className={`${hashId} ${containerClassName}`} style={{ height: fixedBlock ? '100%' : 700 }}>
+        <div className={`${hashId} ${containerClassName}`} style={{ height: height || 700 }}>
           <GlobalStyle />
           <CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
           <BigCalendar

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calender.Settings.tsx

@@ -17,12 +17,12 @@ import {
   SchemaSettingsSwitchItem,
   SchemaSettingsDataScope,
   useDesignable,
-  FixedBlockDesignerItem,
   SchemaSettingsCascaderItem,
   useFormBlockContext,
   removeNullCondition,
   SchemaSettingsTemplate,
   useCollectionManager_deprecated,
+  SchemaSettingsBlockHeightItem,
 } from '@nocobase/client';
 import { useTranslation } from '../../locale';
 import { useCalendarBlockContext } from '../schema-initializer/CalendarBlockProvider';
@@ -58,6 +58,10 @@ export const calendarBlockSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'titleField',
       Component: SchemaSettingsSelectItem,
@@ -98,10 +102,6 @@ export const calendarBlockSettings = new SchemaSettings({
       name: 'showLunar',
       Component: ShowLunarDesignerItem,
     },
-    {
-      name: 'fixBlock',
-      Component: FixedBlockDesignerItem,
-    },
     {
       name: 'startDateField',
       Component: SchemaSettingsCascaderItem,

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/hook.ts

@@ -0,0 +1,25 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useDataBlockHeight, useDataBlock } from '@nocobase/client';
+import { theme } from 'antd';
+
+export const useCalenderHeight = () => {
+  const height = useDataBlockHeight();
+  const { heightProps } = useDataBlock();
+  const { title } = heightProps;
+  const { token } = theme.useToken();
+  if (!height) {
+    return;
+  }
+  const paddingHeight = 2 * token.paddingLG;
+  const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
+
+  return height - paddingHeight - blockTitleHeaderHeight;
+};

packages/plugins/@nocobase/plugin-gantt/src/client/__e2e__/schemaInitailizer.test.ts

@@ -50,7 +50,8 @@ test.describe('configure fields', () => {
     await expect(page.getByRole('menuitem', { name: 'Single line text2' }).getByRole('switch')).not.toBeChecked();
   });
   test('add association field should appends association', async ({ page, mockPage, mockRecord }) => {
-    await mockPage(oneEmptyGantt).goto();
+    const nocoPage = await mockPage(oneEmptyGantt).waitForInit();
+    await nocoPage.goto();
     await mockRecord('general', { singleLineText: 'singleLineText', manyToOne: { id: 1 } });
     await page.getByLabel('schema-initializer-TableV2-table:configureColumns-general').hover();
 
@@ -68,6 +69,7 @@ test.describe('configure fields', () => {
     //支持修改标题字段
     await page.getByRole('button', { name: 'Many to one' }).hover();
     await page.getByLabel('designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-general').hover();
+    await page.getByLabel('designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-general').click();
     await page.getByRole('menuitem', { name: 'Title field' }).click();
     await page.getByText('Username').click();
     await expect(

packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.Settings.tsx

@@ -14,10 +14,10 @@ import {
   useCollection_deprecated,
   useDesignable,
   SchemaSettings,
-  FixedBlockDesignerItem,
   SchemaSettingsBlockTitleItem,
   removeNullCondition,
   SchemaSettingsTemplate,
+  SchemaSettingsBlockHeightItem,
 } from '@nocobase/client';
 import { useKanbanBlockContext } from './KanbanBlockProvider';
 export const kanbanSettings = new SchemaSettings({
@@ -27,6 +27,10 @@ export const kanbanSettings = new SchemaSettings({
       name: 'title',
       Component: SchemaSettingsBlockTitleItem,
     },
+    {
+      name: 'setTheBlockHeight',
+      Component: SchemaSettingsBlockHeightItem,
+    },
     {
       name: 'dataScope',
       Component: SchemaSettingsDataScope,
@@ -58,10 +62,6 @@ export const kanbanSettings = new SchemaSettings({
         };
       },
     },
-    {
-      name: 'fixedBlock',
-      Component: FixedBlockDesignerItem,
-    },
     {
       name: 'template',
       Component: SchemaSettingsTemplate,

packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockInitializer.tsx

@@ -154,7 +154,6 @@ export const useCreateKanbanBlock = () => {
   const { theme } = useGlobalTheme();
   const api = useAPIClient();
   const createKanbanBlock = async ({ item }) => {
-    console.log(item);
     const collectionFields = getCollectionFields(item.name, item.dataSource);
     const fields = collectionFields
       ?.filter((field) => ['select', 'radioGroup'].includes(field.interface))

packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx

@@ -120,7 +120,6 @@ const useAssociationNames = (collection) => {
 
 export const KanbanBlockProvider = (props) => {
   const params = { ...props.params };
-  console.log(props);
   const appends = useAssociationNames(props.association || props.collection);
   if (!Object.keys(params).includes('appends')) {
     params['appends'] = appends;

packages/plugins/@nocobase/plugin-kanban/src/client/board/Board.tsx

@@ -9,6 +9,7 @@
 
 import React, { forwardRef, useState } from 'react';
 import { DragDropContext } from 'react-beautiful-dnd';
+import { css } from '@emotion/css';
 import Column from './Column';
 import ColumnAdder from './ColumnAdder';
 import DefaultCard from './DefaultCard';
@@ -25,20 +26,30 @@ import {
 import { useStyles } from './style';
 import { partialRight, when } from './utils';
 import withDroppable from './withDroppable';
+import { useKanbanBlockHeight } from './hook';
 
-const Columns = forwardRef((props, ref: any) => (
+const Columns = forwardRef((props, ref: any) => {
-  <div ref={ref} style={{ whiteSpace: 'nowrap', height: '100%', overflowY: 'clip' }} {...props} />
+  return <div ref={ref} style={{ whiteSpace: 'nowrap', overflowY: 'clip' }} {...props} />;
-));
+});
 Columns.displayName = 'Columns';
 
 const DroppableBoard = withDroppable(Columns);
 
 const Board: any = (props) => {
+  const height = useKanbanBlockHeight();
   const { styles } = useStyles();
 
   return (
     <div className={styles.nbBord}>
-      {props.initialBoard ? <UncontrolledBoard {...props} /> : <ControlledBoard {...props} />}
+      <div
+        className={css`
+          .react-kanban-card-skeleton {
+            height: ${height ? height + 'px' : '70vh'};
+          }
+        `}
+      >
+        {props.initialBoard ? <UncontrolledBoard {...props} /> : <ControlledBoard {...props} />}
+      </div>
     </div>
   );
 };
@@ -260,7 +271,6 @@ function BoardContainer(props) {
     onCardNew,
     allowAddCard,
   } = props;
-  const { styles } = useStyles();
   function handleOnDragEnd(event) {
     const coordinates = getCoordinates(event, board);
     if (!coordinates.source) return;
@@ -273,8 +283,8 @@ function BoardContainer(props) {
   }
   return (
     <DragDropContext onDragEnd={handleOnDragEnd}>
-      <div style={{ overflowY: 'hidden', display: 'flex', alignItems: 'flex-start' }} className={styles.kanbanBoard}>
+      <div style={{ overflowY: 'hidden', display: 'flex', alignItems: 'flex-start', height: '100%' }}>
-        <DroppableBoard droppableId="board-droppable" direction="horizontal" type="BOARD">
+        <DroppableBoard droppableId="board-droppable" direction="horizontal" type="BOARD" style={{ height: '200px' }}>
           {board.columns?.map((column, index) => (
             <Column
               key={column.id}

packages/plugins/@nocobase/plugin-kanban/src/client/board/hook.ts

@@ -0,0 +1,34 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useDataBlockHeight, useDesignable, useDataBlock } from '@nocobase/client';
+import { theme } from 'antd';
+import { useFieldSchema } from '@formily/react';
+
+export const useKanbanBlockHeight = () => {
+  const { heightProps } = useDataBlock();
+  const { title } = heightProps;
+  const height = useDataBlockHeight();
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const schema = useFieldSchema();
+  if (!height) {
+    return;
+  }
+  const hasKanbanActions = Object.keys(schema.parent.properties.actions?.properties || {}).length > 0;
+  const actionBarHeight =
+    hasKanbanActions || designable ? token.controlHeight + 2 * token.marginLG : 1 * token.marginLG;
+  const kanbanHeaderHeight = 2 * token.padding + token.lineHeightSM * token.fontSizeSM + 3;
+
+  const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
+
+  const footerheight = token.padding + 2 * token.marginSM + token.paddingLG + 10;
+
+  return height - actionBarHeight - kanbanHeaderHeight - footerheight - blockTitleHeaderHeight;
+};

packages/plugins/@nocobase/plugin-kanban/src/client/board/style.ts

@@ -32,13 +32,13 @@ export const useStyles = createStyles(({ css, token }) => {
         box-sizing: border-box;
         max-width: 300px;
         min-width: 300px;
-        height: 70vh;
+        // height: 70vh;
         overflow-x: hidden;
         overflow-y: auto;
         padding: 0 12px;
-        margin-bottom: 12px;
+        margin-bottom: ${token.marginSM}px;
         > div {
-          margin-bottom: 12px;
+          margin-bottom: ${token.marginSM}px;
         }
         + div {
           display: none !important;
@@ -69,7 +69,7 @@ export const useStyles = createStyles(({ css, token }) => {
       }
 
       .react-kanban-column-header {
-        padding: 15px;
+        padding: ${token.padding}px;
       }
 
       .react-kanban-card-adder-form {

packages/plugins/@nocobase/plugin-map/src/client/__tests__/block/createMapBlockSchema.test.ts

@@ -33,11 +33,7 @@ test('createMapBlockSchema should return an object with expected properties', ()
         "actions": {
           "type": "void",
           "x-component": "ActionBar",
-          "x-component-props": {
+          "x-component-props": {},
-            "style": {
-              "marginBottom": 16,
-            },
-          },
           "x-initializer": "map:configureActions",
         },
         "mocked-uid": {

packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.Settings.tsx

@@ -10,7 +10,6 @@
 import { ISchema, useField, useFieldSchema } from '@formily/react';
 import {
   FilterBlockType,
-  FixedBlockDesignerItem,
   SchemaSettings,
   SchemaSettingsBlockTitleItem,
   SchemaSettingsCascaderItem,
@@ -25,6 +24,7 @@ import {
   useCollectionManager_deprecated,
   useDesignable,
   useFormBlockContext,
+  SchemaSettingsBlockHeightItem,
 } from '@nocobase/client';
 import _ from 'lodash';
 import { useMapTranslation } from '../locale';
@@ -80,8 +80,8 @@ export const mapBlockSettings = new SchemaSettings({
       Component: SchemaSettingsBlockTitleItem,
     },
     {
-      name: 'fixBlock',
+      name: 'setTheBlockHeight',
-      Component: FixedBlockDesignerItem,
+      Component: SchemaSettingsBlockHeightItem,
     },
     {
       name: 'mapField',

packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockProvider.tsx

@@ -10,6 +10,8 @@
 import { useField, useFieldSchema } from '@formily/react';
 import { BlockProvider, FixedBlockWrapper, SchemaComponentOptions, useBlockRequestContext } from '@nocobase/client';
 import React, { createContext, useContext, useState } from 'react';
+import { css } from '@emotion/css';
+import { theme } from 'antd';
 
 export const MapBlockContext = createContext<any>({});
 MapBlockContext.displayName = 'MapBlockContext';
@@ -20,6 +22,7 @@ const InternalMapBlockProvider = (props) => {
   const field = useField();
   const { resource, service } = useBlockRequestContext();
   const [selectedRecordKeys, setSelectedRecordKeys] = useState([]);
+  const { token } = theme.useToken();
 
   return (
     <FixedBlockWrapper>
@@ -35,7 +38,16 @@ const InternalMapBlockProvider = (props) => {
             setSelectedRecordKeys,
           }}
         >
-          {props.children}
+          {' '}
+          <div
+            className={css`
+              .nb-action-bar {
+                margin-bottom: ${token.margin}px;
+              }
+            `}
+          >
+            {props.children}
+          </div>
         </MapBlockContext.Provider>
       </SchemaComponentOptions>
     </FixedBlockWrapper>

packages/plugins/@nocobase/plugin-map/src/client/block/createMapBlockUISchema.ts

@@ -9,6 +9,7 @@
 
 import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
+import { theme } from 'antd';
 
 export const createMapBlockUISchema = (options: {
   collectionName: string;
@@ -16,7 +17,6 @@ export const createMapBlockUISchema = (options: {
   fieldNames: object;
 }): ISchema => {
   const { collectionName, fieldNames, dataSource } = options;
-
   return {
     type: 'void',
     'x-acl-action': `${collectionName}:list`,
@@ -40,11 +40,7 @@ export const createMapBlockUISchema = (options: {
         type: 'void',
         'x-initializer': 'map:configureActions',
         'x-component': 'ActionBar',
-        'x-component-props': {
+        'x-component-props': {},
-          style: {
-            marginBottom: 16,
-          },
-        },
       },
       [uid()]: {
         type: 'void',

packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Map.tsx

@@ -20,7 +20,7 @@ import { useMapConfiguration } from '../../hooks';
 import { useMapTranslation } from '../../locale';
 import { MapEditorType } from '../../types';
 import { Search } from './Search';
-
+import { useMapHeight } from '../hook';
 export interface AMapComponentProps {
   value?: any;
   onChange?: (value: number[]) => void;
@@ -112,7 +112,7 @@ export const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapCompone
   const navigate = useNavigate();
   const id = useRef(`nocobase-map-${type || ''}-${Date.now().toString(32)}`);
   const { modal } = App.useApp();
-
+  const height = useMapHeight();
   const [commonOptions] = useState<AMap.PolylineOptions & AMap.PolygonOptions>({
     strokeWeight: 5,
     strokeColor: '#4e9bff',
@@ -408,7 +408,7 @@ export const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapCompone
     <div
       className={css`
         position: relative;
-        height: 500px;
+        height: ${height || 500}px;
       `}
       id={id.current}
       style={props?.style}

packages/plugins/@nocobase/plugin-map/src/client/components/hook.ts

@@ -0,0 +1,30 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useDataBlockHeight, useDesignable, useDataBlock } from '@nocobase/client';
+import { theme } from 'antd';
+import { useFieldSchema } from '@formily/react';
+
+export const useMapHeight = () => {
+  const height = useDataBlockHeight();
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const { heightProps } = useDataBlock() || {};
+  const { title } = heightProps || {};
+  const schema = useFieldSchema();
+  if (!height) {
+    return;
+  }
+  const hasMapAction = Object.keys(schema.parent?.properties.actions?.properties || {}).length > 0;
+  const actionBarHeight =
+    designable || hasMapAction ? token.paddingLG + token.controlHeight + token.margin : token.paddingLG + token.margin;
+  const footerHeight = token.paddingLG;
+  const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
+  return height - actionBarHeight - footerHeight - blockTitleHeaderHeight;
+};

packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/FormBlockProvider.tsx

@@ -9,6 +9,7 @@
 
 import { createForm } from '@formily/core';
 import { useField, useFieldSchema } from '@formily/react';
+import { theme } from 'antd';
 import {
   BlockRequestContext_deprecated,
   CollectionManagerProvider,
@@ -33,7 +34,7 @@ export function FormBlockProvider(props) {
   const field = useField();
   const formBlockRef = useRef(null);
   const dataSource = props.dataSource || DEFAULT_DATA_SOURCE_KEY;
-
+  const { token } = theme.useToken();
   const { getAssociationAppends } = useAssociationNames(dataSource);
   const { appends, updateAssociationValues } = getAssociationAppends();
   const [formKey] = Object.keys(fieldSchema.toJSON().properties ?? {});
@@ -89,7 +90,7 @@ export function FormBlockProvider(props) {
               value={{ block: 'form', props, field, service, resource, __parent }}
             >
               <FormBlockContext.Provider value={formBlockValue}>
-                <FormV2.Templates style={{ marginBottom: 18 }} form={form} />
+                <FormV2.Templates style={{ marginBottom: token.margin }} form={form} />
                 <div ref={formBlockRef}>{props.children}</div>
               </FormBlockContext.Provider>
             </BlockRequestContext_deprecated.Provider>