fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-02 03:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(workbench-block): improve block height and layout responsiveness (#6321)

Browse Source 
- Add dynamic height calculations for workbench block
- Support height adjustments for different layouts (grid/list)
- Implement responsive styling with designable mode considerations
This commit is contained in:
Zeke Zhang 2025-02-27 15:26:44 +08:00 committed by GitHub
parent 9c74600770
commit 195f5df6bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchBlock.tsx
View File

@ -11,16 +11,18 @@ import { observer, useFieldSchema } from '@formily/react';
import {
CollectionContext,
createStyles,
css,
DataSourceContext,
DndContext,
Icon,
NocoBaseRecursionField,
useBlockHeight,
useDesignable,
useOpenModeContext,
useSchemaInitializerRender,
withDynamicSchemaProps,
} from '@nocobase/client';
import { Avatar, Space } from 'antd';
import { Avatar, Space, theme } from 'antd';
import { Grid, List } from 'antd-mobile';
import React, { createContext } from 'react';
import { WorkbenchLayout } from './workbenchBlockSettings';
@ -142,9 +144,33 @@ export const WorkbenchBlock: any = withDynamicSchemaProps(
const fieldSchema = useFieldSchema();
const { layout = 'grid' } = fieldSchema['x-component-props'] || {};
const { styles } = useStyles();
const { title } = fieldSchema['x-decorator-props'] || {};
const targetHeight = useBlockHeight();
const { token } = theme.useToken();
const { designable } = useDesignable();
const titleHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 : 0;
let containerHeight = targetHeight - 2 * token.paddingLG - titleHeight;
// 减去 1rem 的 margin，减去 padding，减去按钮高度，给 Initializer 按钮留出空间
let wrapperHeight = `calc(${containerHeight}px - 1rem - ${token.controlHeight}px)`;
if (layout === 'list') {
// list 有一个负的 margin
containerHeight = targetHeight - titleHeight;
wrapperHeight = `calc(${containerHeight}px - 1rem - ${token.controlHeight + token.paddingLG}px)`;
}
const heightClass = css`
height: ${targetHeight ? containerHeight + 'px' : '100%'};
.nb-action-panel-warp {
height: ${designable ? wrapperHeight : '100%'};
overflow-y: auto;
}
`;
return (
<div className={`nb-action-penal-container ${layout} ${styles.containerClass}`}>
<div className={`nb-action-penal-container ${layout} ${styles.containerClass} ${heightClass}`}>
<WorkbenchBlockContext.Provider value={{ layout }}>
<DataSourceContext.Provider value={undefined}>
<CollectionContext.Provider value={undefined}>{props.children}</CollectionContext.Provider>