mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 23:46:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'next' into 730

Browse Source
This commit is contained in:
Zeke Zhang 2024-11-02 13:50:40 +08:00
commit 977c0f4c81
19 changed files with 273 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/client/src/locale/zh-CN.json
View File

@ -1017,5 +1017,11 @@
"Left": "左",
"Center": "居中",
"Right": "右",
"Divider line color": "分割线颜色"
"Divider line color": "分割线颜色",
"Label align": "字段标题对齐方式",
"Label width": "字段标题宽度",
"When the Label exceeds the width": "字段标题超出宽度时",
"Line break": "换行",
"Ellipsis": "省略",
"Set block layout": "设置区块布局"
}

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

@ -16,13 +16,14 @@ import { useDetailsBlockContext } from '../../../../block-provider/DetailsBlockP
import { useFormBlockContext } from '../../../../block-provider/FormBlockProvider';
import { useCollection_deprecated, useSortFields } from '../../../../collection-manager';
import { removeNullCondition, useDesignable } from '../../../../schema-component';
import { SchemaSettingsLinkageRules, schemaSettingsLabelLayout } from '../../../../schema-settings';
import { SchemaSettingsLinkageRules } from '../../../../schema-settings';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
import { useBlockTemplateContext } from '../../../../schema-templates/BlockTemplateProvider';
import { setDataLoadingModeSettingsItem } from './setDataLoadingModeSettingsItem';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
const commonItems: SchemaSettingsItemType[] = [
{
@ -212,7 +213,10 @@ const commonItems: SchemaSettingsItemType[] = [
};
},
},
schemaSettingsLabelLayout,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
{
name: 'divider',
type: 'divider',

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

@ -11,14 +11,12 @@ import { useFieldSchema } from '@formily/react';
import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
import { SchemaSettingsItemType } from '../../../../application/schema-settings/types';
import { useCollection } from '../../../../data-source/collection/CollectionProvider';
import {
SchemaSettingsFormItemTemplate,
SchemaSettingsLinkageRules,
schemaSettingsLabelLayout,
} from '../../../../schema-settings';
import { SchemaSettingsFormItemTemplate, SchemaSettingsLinkageRules } from '../../../../schema-settings';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { useBlockTemplateContext } from '../../../../schema-templates/BlockTemplateProvider';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
const commonItems: SchemaSettingsItemType[] = [
{
name: 'title',
@ -56,7 +54,10 @@ const commonItems: SchemaSettingsItemType[] = [
};
},
},
schemaSettingsLabelLayout,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
{
name: 'divider',
type: 'divider',

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

@ -16,11 +16,11 @@ import {
SchemaSettingsDataTemplates,
SchemaSettingsFormItemTemplate,
SchemaSettingsLinkageRules,
schemaSettingsLabelLayout,
} from '../../../../schema-settings';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { useBlockTemplateContext } from '../../../../schema-templates/BlockTemplateProvider';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
export const createFormBlockSettings = new SchemaSettings({
name: 'blockSettings:createForm',
@ -77,7 +77,10 @@ export const createFormBlockSettings = new SchemaSettings({
};
},
},
schemaSettingsLabelLayout,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
{
name: 'divider2',
type: 'divider',

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

@ -16,11 +16,11 @@ import {
SchemaSettingsDataTemplates,
SchemaSettingsFormItemTemplate,
SchemaSettingsLinkageRules,
schemaSettingsLabelLayout,
} from '../../../../schema-settings';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { useBlockTemplateContext } from '../../../../schema-templates/BlockTemplateProvider';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
export const editFormBlockSettings = new SchemaSettings({
name: 'blockSettings:editForm',
@ -77,7 +77,10 @@ export const editFormBlockSettings = new SchemaSettings({
};
},
},
schemaSettingsLabelLayout,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
{
name: 'divider2',
type: 'divider',

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

@ -23,7 +23,7 @@ import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettin
import { useBlockTemplateContext } from '../../../../schema-templates/BlockTemplateProvider';
import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
import { SetTheCountOfColumnsDisplayedInARow } from './SetTheCountOfColumnsDisplayedInARow';
import { schemaSettingsLabelLayout } from '../../../../schema-settings';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
export const gridCardBlockSettings = new SchemaSettings({
name: 'blockSettings:gridCard',
@ -222,7 +222,10 @@ export const gridCardBlockSettings = new SchemaSettings({
};
},
},
schemaSettingsLabelLayout,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
{
name: 'divider',
type: 'divider',

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

@ -21,7 +21,7 @@ import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSetti
import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
import { useBlockTemplateContext } from '../../../../schema-templates/BlockTemplateProvider';
import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
import { schemaSettingsLabelLayout } from '../../../../schema-settings';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
export const listBlockSettings = new SchemaSettings({
name: 'blockSettings:list',
@ -225,7 +225,10 @@ export const listBlockSettings = new SchemaSettings({
};
},
},
schemaSettingsLabelLayout,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
{
name: 'divider',
type: 'divider',

2
packages/core/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaSettings.test.ts
View File

@ -103,7 +103,7 @@ test.describe('table data selector schema settings', () => {
await page.getByRole('menuitem', { name: 'Delete' }).hover();
await page.mouse.move(-300, 0);
await page.getByLabel('block-item-CollectionField-').nth(1).click();
await page.getByTestId('select-data-picker').first().click();
// 3. 创建 Table 区块
await page.getByLabel('schema-initializer-Grid-popup').hover();

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

@ -13,15 +13,12 @@ import { SchemaSettings } from '../../../../application/schema-settings/SchemaSe
import { useCollection_deprecated } from '../../../../collection-manager';
import { useCollection } from '../../../../data-source/collection/CollectionProvider';
import { FilterBlockType } from '../../../../filter-provider';
import {
SchemaSettingsFormItemTemplate,
SchemaSettingsLinkageRules,
schemaSettingsLabelLayout,
} from '../../../../schema-settings';
import { SchemaSettingsFormItemTemplate, SchemaSettingsLinkageRules } from '../../../../schema-settings';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsConnectDataBlocks } from '../../../../schema-settings/SchemaSettingsConnectDataBlocks';
import { useBlockTemplateContext } from '../../../../schema-templates/BlockTemplateProvider';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
export const filterFormBlockSettings = new SchemaSettings({
name: 'blockSettings:filterForm',
@ -71,7 +68,10 @@ export const filterFormBlockSettings = new SchemaSettings({
};
},
},
schemaSettingsLabelLayout,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
{
name: 'divider',
type: 'divider',

7
packages/core/client/src/modules/fields/component/Nester/subformComponentFieldSettings.tsx
View File

@ -21,7 +21,7 @@ import {
useIsFormReadPretty,
} from '../../../../schema-component/antd/form-item/FormItem.Settings';
import { linkageRules, setDefaultSortingRules } from '../SubTable/subTablePopoverComponentFieldSettings';
import { schemaSettingsLabelLayout } from '../../../../schema-settings';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
const allowMultiple: any = {
name: 'allowMultiple',
@ -144,6 +144,9 @@ export const subformComponentFieldSettings = new SchemaSettings({
},
setDefaultSortingRules,
linkageRules,
schemaSettingsLabelLayout,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
],
});

13
packages/core/client/src/modules/fields/component/PopoverNester/subformPopoverComponentFieldSettings.tsx
View File

@ -20,7 +20,7 @@ import { useColumnSchema } from '../../../../schema-component/antd/table-v2/Tabl
import { titleField } from '../Select/selectComponentFieldSettings';
import { linkageRules } from '../SubTable/subTablePopoverComponentFieldSettings';
import { schemaSettingsLabelLayout } from '../../../../schema-settings';
import { SchemaSettingsLayoutItem } from '../../../../schema-settings/SchemaSettingsLayoutItem';
const allowMultiple: any = {
name: 'allowMultiple',
@ -106,5 +106,14 @@ const fieldComponent: any = {
export const subformPopoverComponentFieldSettings = new SchemaSettings({
name: 'fieldSettings:component:PopoverNester',
items: [fieldComponent, allowMultiple, titleField, linkageRules, schemaSettingsLabelLayout],
items: [
fieldComponent,
allowMultiple,
titleField,
linkageRules,
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
],
});

22
packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx
View File

@ -9,6 +9,7 @@
import { css, cx } from '@emotion/css';
import { FormLayout } from '@formily/antd-v5';
import { theme } from 'antd';
import { RecursionField, observer, useField, useFieldSchema } from '@formily/react';
import React, { useEffect } from 'react';
import { ACLCollectionProvider, useACLActionParamsContext } from '../../../acl';
@ -45,14 +46,25 @@ export const InternalNester = observer(
const { options: collectionField } = useAssociationFieldContext();
const showTitle = fieldSchema['x-decorator-props']?.showTitle ?? true;
const { actionName } = useACLActionParamsContext();
const { layout = 'vertical' } = fieldSchema?.['x-component-props'] || {};
const { token } = theme.useToken();
const {
layout = 'vertical',
labelAlign = 'left',
labelWidth = 120,
labelWrap = true,
} = fieldSchema?.['x-component-props'] || {};
useEffect(() => {
insertNester(schema.Nester);
}, []);
return (
<CollectionProvider_deprecated name={collectionField.target}>
<ACLCollectionProvider actionPath={`${collectionField.target}:${actionName || 'view'}`}>
<FormLayout layout={layout}>
<FormLayout
layout={layout}
labelAlign={labelAlign}
labelWidth={layout === 'horizontal' ? labelWidth : null}
labelWrap={labelWrap}
>
<div
className={cx(
InternalNesterCss,
@ -62,6 +74,12 @@ export const InternalNester = observer(
css`
.nb-grid-container {
height: 100% !important;
.ant-formily-item-label {
line-height: ${token.controlHeight}px;
}
.ant-formily-item-label label {
white-space: ${labelWrap ? 'break-all' : 'nowrap'};
}
}
`,
)}

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

@ -40,11 +40,22 @@ const FormComponent: React.FC<FormProps> = (props) => {
const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
const height = useFormBlockHeight();
const { token } = theme.useToken();
const { layout = 'vertical' } = cardItemSchema?.['x-component-props'] || {};
const {
layout = 'vertical',
labelAlign = 'left',
labelWidth = 120,
labelWrap = true,
} = cardItemSchema?.['x-component-props'] || {};
return (
<FieldContext.Provider value={undefined}>
<FormContext.Provider value={form}>
<FormLayout layout={layout} {...others}>
<FormLayout
layout={layout}
{...others}
labelAlign={labelAlign}
labelWidth={layout === 'horizontal' ? labelWidth : null}
labelWrap={labelWrap}
>
<div
className={css`
.nb-grid-container {

14
packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx
View File

@ -162,7 +162,12 @@ const InternalGridCard = (props: GridCardProps) => {
onChange: onPaginationChange,
};
const cardItemSchema = getCardItemSchema?.(fieldSchema);
const { layout = 'vertical' } = cardItemSchema?.['x-component-props'] || {};
const {
layout = 'vertical',
labelAlign = 'left',
labelWidth = 120,
labelWrap = true,
} = cardItemSchema?.['x-component-props'] || {};
return (
<SchemaComponentOptions
@ -187,7 +192,12 @@ const InternalGridCard = (props: GridCardProps) => {
`,
)}
>
<FormLayout layout={layout}>
<FormLayout
layout={layout}
labelAlign={labelAlign}
labelWidth={layout === 'horizontal' ? labelWidth : null}
labelWrap={labelWrap}
>
<AntdList
pagination={
!meta || meta.count <= meta.pageSize

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

@ -67,7 +67,12 @@ const InternalList = (props) => {
[run, params],
);
const cardItemSchema = getCardItemSchema?.(fieldSchema);
const { layout = 'vertical' } = cardItemSchema?.['x-component-props'] || {};
const {
layout = 'vertical',
labelAlign = 'left',
labelWidth = 120,
labelWrap = true,
} = cardItemSchema?.['x-component-props'] || {};
const usePagination = () => {
if (!count) {
return {
@ -138,7 +143,12 @@ const InternalList = (props) => {
)}
>
<div className="nb-list-container">
<FormLayout layout={layout}>
<FormLayout
layout={layout}
labelAlign={labelAlign}
labelWidth={layout === 'horizontal' ? labelWidth : null}
labelWrap={labelWrap}
>
<AntdList
{...props}
pagination={!meta || !field.value?.length ? false : paginationProps}

134
packages/core/client/src/schema-settings/SchemaSettingsLayoutItem.tsx Normal file
View File

@ -0,0 +1,134 @@
/**
* 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 Layout = {
VERTICAL: 'vertical',
HORIZONTAL: 'horizontal',
};
export const SchemaSettingsLayoutItem = function LayoutItem() {
const field = useField();
const fieldSchema = useFieldSchema();
const { dn } = useDesignable();
const { t } = useTranslation();
return (
<SchemaSettingsModalItem
title={t('Layout')}
schema={
{
type: 'object',
title: t('Set block layout'),
properties: {
layout: {
type: 'string',
enum: [
{ label: t('Vertical'), value: Layout.VERTICAL },
{ label: t('Horizontal'), value: Layout.HORIZONTAL },
],
required: true,
default: fieldSchema?.['x-component-props']?.layout || Layout.VERTICAL,
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
},
labelAlign: {
title: t('Label align'),
type: 'string',
default: fieldSchema?.['x-component-props']?.['labelAlign'] || 'left',
'x-decorator': 'FormItem',
'x-component': 'Select',
enum: [
{ label: "{{t('Right')}}", value: 'right' },
{ label: "{{t('Left')}}", value: 'left' },
],
'x-reactions': {
dependencies: ['layout'],
fulfill: {
state: {
visible: '{{ $deps[0]==="horizontal"}}',
},
},
},
},
labelWidth: {
title: t('Label width'),
type: 'string',
default: fieldSchema?.['x-component-props']?.['labelWidth'] || 120,
required: true,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
addonAfter: 'px',
},
'x-validator': [
{
minimum: 50,
},
],
'x-reactions': {
dependencies: ['layout'],
fulfill: {
state: {
visible: '{{ $deps[0]==="horizontal"}}',
},
},
},
},
labelWrap: {
type: 'string',
title: t('When the Label exceeds the width'),
enum: [
{ label: t('Line break'), value: true },
{ label: t('Ellipsis'), value: false },
],
default: fieldSchema?.['x-component-props']?.labelWrap !== false,
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
'x-reactions': {
dependencies: ['layout'],
fulfill: {
state: {
visible: '{{ $deps[0]==="horizontal"}}',
},
},
},
},
},
} as ISchema
}
onSubmit={({ layout, labelAlign, labelWidth, labelWrap }) => {
const componentProps = fieldSchema['x-component-props'] || {};
componentProps.layout = layout;
componentProps.labelAlign = labelAlign;
componentProps.labelWidth = layout === 'horizontal' ? labelWidth : null;
componentProps.labelWrap = labelWrap;
fieldSchema['x-component-props'] = componentProps;
field.componentProps.layout = layout;
field.componentProps.labelAlign = labelAlign;
field.componentProps.labelWidth = labelWidth;
field.componentProps.labelWrap = labelWrap;
dn.emit('patch', {
schema: {
['x-uid']: fieldSchema['x-uid'],
'x-component-props': fieldSchema['x-component-props'],
},
});
dn.refresh();
}}
/>
);
};

1
packages/core/client/src/schema-settings/index.ts
View File

@ -25,6 +25,7 @@ export * from './setTheDataScopeSchemaSettingsItem';
export * from './SchemaSettingsRenderEngine';
export * from './hooks/useGetAriaLabelOfDesigner';
export * from './hooks/useIsAllowToSetDefaultValue';
export * from './SchemaSettingsLayoutItem';
export { default as useParseDataScopeFilter } from './hooks/useParseDataScopeFilter';
export * from './isPatternDisabled';
export { SchemaSettingsPlugin } from './SchemaSettingsPlugin';

14
packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.Card.tsx
View File

@ -127,13 +127,23 @@ export const KanbanCard: any = observer(
};
}, [popupSchema]);
const cardItemSchema = getCardItemSchema?.(fieldSchema);
const { layout = 'vertical' } = cardItemSchema?.['x-component-props'] || {};
const {
layout = 'vertical',
labelAlign = 'left',
labelWidth = 120,
labelWrap = true,
} = cardItemSchema?.['x-component-props'] || {};
return (
<>
<Card onClick={handleCardClick} bordered={false} hoverable style={cardStyle} className={cardCss}>
<DndContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
<FormLayout layout={layout}>
<FormLayout
layout={layout}
labelAlign={labelAlign}
labelWidth={layout === 'horizontal' ? labelWidth : null}
labelWrap={labelWrap}
>
<FormProvider form={form}>
<MemorizedRecursionField schema={fieldSchema} onlyRenderProperties />
</FormProvider>

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

@ -20,10 +20,11 @@ import {
useCollection_deprecated,
useDesignable,
useFormBlockContext,
schemaSettingsLabelLayout,
SchemaSettingsLayoutItem,
} from '@nocobase/client';
import { useTranslation } from 'react-i18next';
import { useKanbanBlockContext } from './KanbanBlockProvider';
export const kanbanSettings = new SchemaSettings({
name: 'blockSettings:kanban',
items: [
@ -78,7 +79,6 @@ export const kanbanSettings = new SchemaSettings({
};
},
},
schemaSettingsLabelLayout,
{
name: 'allowDragAndDrop',
type: 'switch',
@ -105,6 +105,10 @@ export const kanbanSettings = new SchemaSettings({
};
},
},
{
name: 'setBlockLayout',
Component: SchemaSettingsLayoutItem,
},
{
name: 'divider',
type: 'divider',