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

refactor: adjust block height settings, set the minimum value to 100 (#6220)

Browse Source 
* refactor: adjust block height settings, set the minimum value to 100

* fix: bug
This commit is contained in:
Katherine 2025-02-15 22:02:41 +08:00 committed by GitHub
parent 0611e02c88
commit a25438c9ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,10 +11,10 @@ import { Card, CardProps } from 'antd';
import React, { useMemo } from 'react';
import { useToken } from '../../../style';
export const BlockItemCard = React.forwardRef<HTMLDivElement, CardProps>(({ children, ...props }, ref) => {
export const BlockItemCard = React.forwardRef<HTMLDivElement, CardProps>(({ children, ...props }: any, ref) => {
const { token } = useToken();
const style = useMemo(() => {
return { marginBottom: token.marginBlock };
return { marginBottom: token.marginBlock, height: props.height || '100%' };
}, [token.marginBlock]);
return (

2
packages/core/client/src/schema-settings/SchemaSettingsBlockHeightItem.tsx
View File

@ -59,7 +59,7 @@ export const SchemaSettingsBlockHeightItem = function BlockTitleItem() {
},
'x-validator': [
{
minimum: 200,
minimum: 100,
},
],
'x-reactions': {

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

@ -38,6 +38,8 @@ function isMobile() {
return window.matchMedia('(max-width: 768px)').matches;
}
const gap = 8;
const ResponsiveSpace = () => {
const fieldSchema = useFieldSchema();
const isMobileMedia = isMobile();
@ -46,7 +48,6 @@ const ResponsiveSpace = () => {
const isUnderMobile = isMobileMedia || underMobileCtx;
const containerRef = useRef(null); // 引用容器
const [containerWidth, setContainerWidth] = useState(0); // 容器宽度
const gap = 8;
// 使用 ResizeObserver 动态获取容器宽度
useEffect(() => {
const handleResize = () => {
@ -202,22 +203,24 @@ export const WorkbenchBlock: any = withDynamicSchemaProps(
(props) => {
const fieldSchema = useFieldSchema();
const { layout = 'grid' } = fieldSchema['x-component-props'] || {};
const { title } = fieldSchema['x-decorator-props'] || {};
const targetHeight = useBlockHeight();
const { token } = theme.useToken();
const { designable } = useDesignable();
const { heightProps } = useBlockHeightProps() || {};
const { titleHeight } = heightProps || {};
const titleHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
const internalHeight = 2 * token.paddingLG + token.controlHeight + token.marginLG + titleHeight;
const warperHeight =
targetHeight - (designable ? internalHeight : 2 * token.paddingLG + token.marginLG + titleHeight);
const targetWarperHeight = warperHeight > 0 ? warperHeight + 'px' : '100%';
return (
<div className="nb-action-penal-container">
<div
className="nb-action-penal-container"
style={{ height: targetHeight ? targetHeight - 2 * token.paddingLG - gap - titleHeight : '100%' }}
>
<div
className={css`
.nb-action-panel-warp {
height: ${targetHeight
? targetHeight -
(designable ? internalHeight : 2 * token.paddingLG + token.marginLG + titleHeight) +
'px'
: '100%'};
height: ${targetHeight ? targetWarperHeight : '100%'};
overflow-y: auto;
margin-left: -24px;
margin-right: -24px;