tachybase_todo/docs/zh-CN/welcome/release/v15-changelog.md

279 lines
7.7 KiB
Markdown
Raw Normal View History

refactor: new schema initializer and schema settings (#2802) * fix: form * refactor: schema-initializer * fix: bug * refactor: schema initializer * refactor: rename * fix: delete SchemaInitializerProvider * refactor: props `insert` to hooks `useSchemaInitializerV2` * fix: bug * refactor: delete `SchemaInitializer.Button` * refactor: delete old SchemaInitializer * fix: bug * fix: workflow * fix: docs * fix: bug * fix: bug * feat: style * fix: remove v2 * fix: visible * fix: bug * fix: item hook * feat: item hook * fix: add search DataBlockInitializer * fix: build bug * fix: style bug * fix: style bug * fix: test bug * fix: test bug * fix: rerender bug * fix: remove menu select * fix: bug * chore: add aria-label for SchemaInitializerButton * refactor: rename name to camel case * fix: menu height bug * fix: build errors * fix: build errors * fix: bug * fix: bug * fix: performance * test: add test for header * fix: sidebar is not refresh (T-2422) * feat(e2e): support to add group page and link page * chore: make sure the page is configurable when using page.goto * test: add tests for menu initializer * fix: imporve code * chore: fix build error * chore: optimize locator of menu item * refactor: rename testid for select * test: make tests passing * fix: make tests passing * chore: upgrade vitest to v0.34.6 * chore: increase timeout of e2e * feat: core * fix: revert schema initializer demos * test: menu, page tabs, page grid, table column * fix: schema button interface * feat: refactor: page tab settings * feat: page settings * fix: dumirc * fix: export CSSVariableProvider * feat: lazy render * fix: form-item * fix: general schema desinger * feat: filter form item settings * refactor: form-v2 schema settings * refactor: form-v1 schema settings * refactor: action schema settings * fix: action bug * fix: form-item bug * fix: types error * docs: schema settings doc * docs: schema settings * feat: schema setting item add name * fix: visible lazy render bug * fix: revert form item filter * fix: test bug * fix: test JSON.parse bug * fix: test bug * fix: improve styling * fix: styling * fix: cleanup * fix: token.borderRadiusSM * fix: bug * test: add tests * fix: style bug * fix: add chart performance * feat: add SchemaDesignerContext * fix: bug * fix: test bug * style: create record action style improve * fix: make test passing * chore: mack tests passing * chore: make tests passing * test: fix tests * style: style revert * fix: bug * fix: data selector * fix: fix tests * fix: fix tests * fix: delete PluginManagerContext * refactor: improve router and add SchemaComponentProvider & CSSVariableProvider to MainComponent * fix: add dn and field builtin to SchemaSettingWrapper * feat: update docs * refactor: application providers * fix: test bug * fix: fix tests * chore: make test passing * feat: update docs * chore: rename collection name * feat: update docs * chore: skip weird test * fix: blockInitializers media to otherBlocks * fix: cancel to skip test * fix: bug * test: add test * refactor: migrate to small files * test: add tests for form block settings * chore: format * fix: add chart scroll bug * refactor: action designer improve * refactor: formitem designer schemaSetting * feat: schemaSettingsManager and schemaInitializerManager addItem and removeItem * test: add tests for color field in creating block * test: add tests for email field in creating block * test: make tests passing * perf: reduce fields number * fix: sub menu bug * test: add tests basic in editing form * test: add tests basic in details form * fix: improve code * test: make tests passing * test(plugin-mock-collections): add color for enum options * refactor: improve code * fix: bug * fix: bug * refactor: convert parameters to destructured object * test: add tests choices * test: add tests media * test: add tests for datetime in creating form * feat(plugin-mock-collection): generate faker time * test: add tests for datetime in editing form * test: add tests for datetime in details form * fix: bug * feat: improve code * test: add tests for relation fields * fix: rename SchemaSettings * fix: type bug * refactor: useDesinger() * fix: bug * fix: bug * fix: build tip * fix: designableState * fix: bug * fix: designable * fix: designable * test: add tests for relation fields * test: add tests for relation fields * test: add tests for relation fields * feat: client api doc * test: add tests for relation fields * test: avoid errors * test: make tests passing * fix: bug * test: make tests passing * test: add tests for advanced fields * test: increase e2e timeout-minutes to 60 * fix: bug * fix: improve code * feat: add schema initailizer component demos * test: make tests passing * fix: schema settings demos * feat: shallowMerge & deepMerge * test: reduce number of tests * test: make tests passing * feat: updates * fix: add Initializer Internal * demos: useSchemaSettingsRender * test: make tests passing * test: make tests passing * fix: improve docs * fix: bug * chore: upgrade dumi theme * test: make tests passing * test: add tests for linkage rules * test: add test for form data templates * test: add tests for default value * test: reduce number of tests * fix: dn.deepMerge * fix: bug * fix: bug * fix: toolbar * fix: docs ssr * test: add tests for system fields * test: add tests for actions * fix: bug * test: add tests for lazy loading of variables * test: make testing more stable * fix: update docs * fix: bug --------- Co-authored-by: Rain <958414905@qq.com> Co-authored-by: chenos <chenlinxh@gmail.com> Co-authored-by: katherinehhh <katherine_15995@163.com>
2023-12-04 14:56:46 +08:00
# v0.15
## 不兼容的变化
### SchemaInitializer 的注册和实现变更
#### 定义方式变更
以前 `SchemaInitializer` 支持 2 种定义方式,分别为对象和组件。例如:
```tsx
const BlockInitializers = {
title: '{{t("Add block")}}',
icon: 'PlusOutlined',
items: [
// ...
],
// ...
}
```
```tsx
const BlockInitializers = () => {
return <SchemaInitializer.Button
title={'{{t("Add block")}}'}
icon={'PlusOutlined'}
items={[
// ...
]}
// ...
/>
}
```
现在仅支持 `new SchemaInitializer()` 的实例。例如:
```tsx
const blockInitializers = new SchemaInitializer({
name: 'BlockInitializers', // 名称,和原来保持一致
title: '{{t("Add block")}}',
icon: 'PlusOutlined',
items: [
// ...
],
// ...
});
```
#### 参数变更
整体来说,`new SchemaInitializer()` 的参数参考了之前对象定义方式,但又有新的变更。具体如下:
- 新增 `name` 必填参数,用于 `x-initializer` 的值。
- 新增 `Component` 参数,用于定制化渲染的按钮。默认为 `SchemaInitializerButton`
- 新增 `componentProps`、`style` 用于配置 `Component` 的属性和样式。
- 新增 `ItemsComponent` 参数,用于定制化渲染的列表。默认为 `SchemaInitializerItems`
- 新增 `itemsComponentProps`、`itemsComponentStyle` 用于配置 `ItemsComponent` 的属性和样式。
- 新增 `popover` 参数,用于配置是否显示 `popover` 效果。
- 新增 `useInsert` 参数,用于当 `insert` 函数需要使用 hooks 时。
- 更改 将 `dropdown` 参数改为了 `popoverProps`,使用 `Popover` 代替了 `Dropdown`
- items 参数变更
- 新增 `useChildren` 函数,用于动态控制子项。
- 更改 `visible` 参数改为了 `useVisible` 函数,用于动态控制是否显示。
- 更改 将 `component` 参数改为了 `Component`,用于列表项的渲染。
- 更改 将 `key` 参数改为了 `name`,用于列表项的唯一标识。
案例1
```diff
- export const BlockInitializers = {
+ export const blockInitializers = new SchemaInitializer({
+ name: 'BlockInitializers',
'data-testid': 'add-block-button-in-page',
title: '{{t("Add block")}}',
icon: 'PlusOutlined',
wrap: gridRowColWrap,
items: [
{
- key: 'dataBlocks',
+ name: 'data-blocks',
type: 'itemGroup',
title: '{{t("Data blocks")}}',
children: [
{
- key: 'table',
+ name: 'table',
- type: 'item', // 当有 Component 参数时,就不需要此了
title: '{{t("Table")}}',
- component: TableBlockInitializer,
+ Component: TableBlockInitializer,
},
{
key: 'form',
type: 'item',
title: '{{t("Form")}}',
component: FormBlockInitializer,
}
],
},
],
});
```
案例2
原来是组件定义的方式:
```tsx
export const BulkEditFormItemInitializers = (props: any) => {
const { t } = useTranslation();
const { insertPosition, component } = props;
const associationFields = useAssociatedFormItemInitializerFields({ readPretty: true, block: 'Form' });
return (
<SchemaInitializer.Button
data-testid="configure-fields-button-of-bulk-edit-form-item"
wrap={gridRowColWrap}
icon={'SettingOutlined'}
items={[
{
type: 'itemGroup',
title: t('Display fields'),
children: useCustomBulkEditFormItemInitializerFields(),
},
{
type: 'divider',
},
{
type: 'item',
title: t('Add text'),
component: BlockItemInitializer,
},
]}
insertPosition={insertPosition}
component={component}
title={component ? null : t('Configure fields')}
/>
);
};
```
现在需要改为 `new SchemaInitializer()` 的方式:
```tsx
const bulkEditFormItemInitializers = new SchemaInitializer({
name: 'BulkEditFormItemInitializers',
'data-testid': 'configure-fields-button-of-bulk-edit-form-item',
wrap: gridRowColWrap,
icon: 'SettingOutlined',
// 原 insertPosition 和 component 是透传的,这里不用管,也是透传的
items: [
{
type: 'itemGroup',
title: t('Display fields'),
name: 'display-fields', // 记得加上 name
useChildren: useCustomBulkEditFormItemInitializerFields, // 使用到了 useChildren
},
{
type: 'divider',
},
{
title: t('Add text'),
name: 'add-text',
Component: BlockItemInitializer, // component 替换为 Component
},
]
});
```
关于参数的具体说明可以参考 `SchemaInitializer` 的类型定义,以及 [SchemaInitializer 文档](https://client.docs.nocobase.com/client/schema-initializer)。
#### 实现原理变更
以前是将所有 `items` 转为 `Menu` 组件的 items JSON 对象,最后渲染成 Menu 列表。
现在默认情况下仅仅是渲染 `items` 列表项的 `Component` 组件,至于 `Component` 组件内部如何渲染取决于自身,最后也不会拼接成一个 JSON 对象。
具体说明参考 `SchemaInitializer` 的 [Nested items 示例](https://client.docs.nocobase.com/client/schema-initializer#nested-items)。
#### 列表中的组件获取参数方式变更
之前是通过 `props` 获取 `insert` 函数,现在需要通过 `useSchemaInitializer()` 获取。例如:
```diff
const FormBlockInitializer = (props) => {
- const { insert } = props;
+ const { insert } = useSchemaInitializer();
// ...
}
export const blockInitializers = new SchemaInitializer({
name: 'BlockInitializers',
items: [
{
name: 'form',
Component: FormBlockInitializer
}
]
});
```
#### 注册方式变更
以前是通过 `SchemaInitializerProvider` 进行注册。例如:
```tsx
<SchemaInitializerProvider
initializers={{ BlockInitializers }}
components={{ ManualActionDesigner }}
></SchemaInitializerProvider>
```
现在需要改为插件的方式。例如:
```tsx
import { Plugin } from '@nocobase/client';
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add(blockInitializers);
this.app.addComponents({ ManualActionDesigner });
}
}
```
#### 修改方式变更
以前是通过 `SchemaInitializerContext` 获取到全部的 `Initializers` 然后进行增删改。例如下面代码是为了往 `BlockInitializers` 中的 `media` 下添加 `Hello`
```tsx
const items = useContext<any>(SchemaInitializerContext);
const mediaItems = items.BlockInitializers.items.find((item) => item.key === 'media');
if (process.env.NODE_ENV !== 'production' && !mediaItems) {
throw new Error('media block initializer not found');
}
const children = mediaItems.children;
if (!children.find((item) => item.key === 'hello')) {
children.push({
key: 'hello',
type: 'item',
title: '{{t("Hello block")}}',
component: HelloBlockInitializer,
});
}
```
新的方式则通过插件的方式更简洁的进行修改。例如:
```tsx
class MyPlugin extends Plugin {
async load() {
// 获取 BlockInitializers
const blockInitializers = this.app.schemaInitializerManager.get('BlockInitializers');
// 添加 Hello
blockInitializers.add('media.hello', {
title: '{{t("Hello block")}}',
Component: HelloBlockInitializer,
})
}
}
```
#### 使用方式变更
之前使用 `useSchemaInitializer` 的方式进行渲染,现在需要改为 `useSchemaInitializerRender`,并且参数需要增加 `x-initializer-props`。例如:
```diff
- const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
+ const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']);
render();
render({ style: { marginLeft: 8 } })
```
更多说明可以参考 [SchemaInitializer 文档](https://client.docs.nocobase.com/client/schema-initializer)。