refactor: workflow block && template block support setting block height (#4678)

* refactor: workflow support setting block height

* refactor: support block template

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

lerna.json

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

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

@@ -15,7 +15,7 @@ import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps';
 import { useTableBlockParams } from '../modules/blocks/data-blocks/table';
 import { FixedBlockWrapper, SchemaComponentOptions } from '../schema-component';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';
-
+import { useBlockHeightProps } from './hooks';
 /**
  * @internal
  */
@@ -67,6 +67,7 @@ const InternalTableBlockProvider = (props: Props) => {
   const { resource, service } = useBlockRequestContext();
   const fieldSchema = useFieldSchema();
   const [expandFlag, setExpandFlag] = useState(fieldNames || propsExpandFlag ? true : false);
+  const { heightProps } = useBlockHeightProps();
 
   useEffect(() => {
     setExpandFlag(fieldNames || propsExpandFlag);
@@ -104,6 +105,7 @@ const InternalTableBlockProvider = (props: Props) => {
           childrenColumnName,
           allIncludesChildren,
           setExpandFlag: setExpandFlagValue,
+          heightProps,
         }}
       >
         {props.children}
@@ -147,7 +149,6 @@ export const TableBlockProvider = withDynamicSchemaProps((props) => {
   const collection = getCollection(props.collection, props.dataSource);
   const { treeTable } = fieldSchema?.['x-decorator-props'] || {};
   const { params, parseVariableLoading } = useTableBlockParamsCompat(props);
-
   let childrenColumnName = 'children';
 
   if (treeTable) {

packages/core/client/src/block-provider/hooks/useBlockHeightProps.tsx

@@ -9,17 +9,23 @@
 
 import { useFieldSchema } from '@formily/react';
 import { useMemo } from 'react';
+import { useBlockTemplateContext } from '../../schema-templates/BlockTemplate';
 
 export const useBlockHeightProps = () => {
   const fieldSchema = useFieldSchema();
   const cardItemSchema = getCardItemSchema(fieldSchema);
-  const pageSchema = useMemo(() => getPageSchema(fieldSchema), []);
+  const blockTemplateSchema = useBlockTemplateContext()?.fieldSchema;
+  const pageSchema = useMemo(() => getPageSchema(blockTemplateSchema || fieldSchema), []);
   const { disablePageHeader, enablePageTabs, hidePageTitle } = pageSchema?.['x-component-props'] || {};
   return {
-    heightProps: { ...cardItemSchema?.['x-component-props'], disablePageHeader, enablePageTabs, hidePageTitle },
+    heightProps: {
+      ...cardItemSchema?.['x-component-props'],
+      disablePageHeader,
+      enablePageTabs,
+      hidePageTitle,
+    },
   };
 };
-
 export const getPageSchema = (schema) => {
   if (!schema) return null;
 

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

@@ -13,7 +13,7 @@ import { theme } from 'antd';
 import { debounce } from 'lodash';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useDesignable } from '..';
-import { useDataBlockRequest } from '../../';
+import { useDataBlockRequest, useCollection, useTableBlockContext } from '../../';
 import { HeightMode } from '../../schema-settings/SchemaSettingsBlockHeightItem';
 import { useBlockHeightProps, getPageSchema } from '../../block-provider/hooks';
 
@@ -58,7 +58,18 @@ const usePageFullScreenHeight = (props?) => {
   return navHeight + pageHeaderHeight + addBlockBtnHeight;
 };
 
-//抽屉中满屏
+// 抽屉中满屏
+const useDrawerFullScreenHeight = () => {
+  const { token } = theme.useToken();
+  const { designable } = useDesignable();
+  const tabActionHeight = token.paddingContentVerticalLG + token.margin + 2 * token.paddingContentVertical + 24;
+  const addBlockBtnHeight = designable
+    ? token.controlHeight + 2 * token.paddingContentHorizontalLG
+    : 1 * token.paddingContentHorizontalLG;
+  return tabActionHeight + addBlockBtnHeight;
+};
+
+//满屏
 const useFullScreenHeight = (props?) => {
   const schema = useFieldSchema();
   const isDrawerBlock = hasActionContainerInParentChain(schema);
@@ -70,24 +81,18 @@ const useFullScreenHeight = (props?) => {
   return pageReservedHeight;
 };
 
-// 抽屉中满屏
+const InternalWorkflowCollection = ['users_jobs', 'approvals', 'approvalRecords'];
-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 } = useBlockHeightProps();
+  const { heightProps: blockHeightProps } = useBlockHeightProps();
+  const { heightProps: tableHeightProps } = useTableBlockContext();
   const { designable } = useDesignable();
   const schema = useFieldSchema();
+  const heightProps = tableHeightProps || blockHeightProps;
   const pageFullScreenHeight = useFullScreenHeight();
   const { data } = useDataBlockRequest();
+  const { name } = useCollection();
   const { count, pageSize } = (data as any)?.meta || ({} as any);
   const hasPagination = count > pageSize;
   const { heightMode, height, title } = heightProps;
@@ -97,7 +102,8 @@ const useTableHeight = () => {
   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 tableHeaderHeight =
+    (designable && !InternalWorkflowCollection.includes(name) ? 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 (

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

@@ -244,7 +244,7 @@ export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC }
             'x-component': 'ActionBar',
             'x-component-props': {
               style: {
-                marginBottom: 16,
+                marginBottom: 'var(--nb-spacing)',
               },
             },
             properties: {