ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: new schema initializer and schema settings (#2802)

Browse Source 
* 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>
This commit is contained in:
jack zhang 2023-12-04 14:56:46 +08:00 committed by GitHub
parent 69abfc9832
commit bf1a19426a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
678 changed files with 53962 additions and 7769 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.dumirc.ts
View File

@ -30,6 +30,12 @@ export default defineConfig({
alias: {
...umiConfig.alias,
},
ssr: {
},
exportStatic: {
ignorePreRenderError: true
},
cacheDirectoryPath: `node_modules/.docs-${lang}-cache`,
outputPath: `./docs/dist/${lang}`,
resolve: {

6
.github/workflows/deploy-client-docs.yml vendored
View File

@ -23,8 +23,10 @@ jobs:
with:
node-version: "18"
- run: yarn install
- name: Build
run: yarn doc build core/client
- name: Build zh-CN
run: yarn doc build core/client --lang=zh-CN
- name: Build en-US
run: yarn doc build core/client --lang=en-US
- name: Set tags
id: set-tags
run: |

2
.github/workflows/nocobase-test-e2e.yml vendored
View File

@ -76,4 +76,4 @@ jobs:
DB_UNDERSCORED: ${{ matrix.underscored }}
DB_SCHEMA: ${{ matrix.schema }}
COLLECTION_MANAGER_SCHEMA: ${{ matrix.collection_schema }}
timeout-minutes: 40
timeout-minutes: 60

4
docs/en-US/api/acl/acl.md
View File

@ -206,14 +206,14 @@ type ConditionFunc = (ctx: any) => Promise<boolean> | boolean;
**Detailed Information**
* resourceName - Name of the resource
* actionNames - Name of the resource action
* actionNames - Name of the resource action
* condition? - Configuration of the validity condition
* Pass in a `string` to use a condition that is already defined; Use the `acl.allowManager.registerCondition` method to register a condition.
```typescript
acl.allowManager.registerAllowCondition('superUser', async () => {
return ctx.state.user?.id === 1;
});
// Open permissions of the users:list with validity condition superUser
acl.allow('users', 'list', 'superUser');
```

1
docs/en-US/api/client/application.md
View File

@ -35,7 +35,6 @@ Add Providers, build-in Providers are:
- SystemSettingsProvider
- PluginManagerProvider
- SchemaComponentProvider
- SchemaInitializerProvider
- BlockSchemaComponentProvider
- AntdSchemaComponentProvider
- ACLProvider

8
docs/en-US/api/client/schema-designer/schema-initializer.md
View File

@ -17,11 +17,3 @@ Used for the initialization of various schemas. Newly added schema can be insert
},
}
```
The core of SchemaInitializer includes `<SchemaInitializer.Button />` and `<SchemaInitializer.Item />` the two components. `<SchemaInitializer.Button />` is used to create the dropdown menu button of schema, and the options of the dropdown menu is `<SchemaInitializer.Item/>`.
### `<SchemaInitializerProvider />`
### `<SchemaInitializer.Button />`
### `<SchemaInitializer.Item/>`

1
docs/en-US/development/client/index.md
View File

@ -10,7 +10,6 @@ Most of the extensions for the NocoBase client are provided as Providers.
- SystemSettingsProvider
- PluginManagerProvider
- SchemaComponentProvider
- SchemaInitializerProvider
- BlockSchemaComponentProvider
- AntdSchemaComponentProvider
- DocumentTitleProvider

16
docs/en-US/development/client/ui-schema-designer/x-initializer.md
View File

@ -25,15 +25,11 @@
```tsx |pure
import React, { useContext } from 'react';
import { SchemaInitializerContext } from '@nocobase/client';
import { Plugin } from '@nocobase/client';
export default React.memo((props) => {
const items = useContext(SchemaInitializerContext);
const BlockInitializers = {};
return (
<SchemaInitializerContext.Provider value={{ ...items, BlockInitializers }}>
{props.children}
</SchemaInitializerContext.Provider>
);
});
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add('BlockInitializers', BlockInitializers)
}
}
```

1
docs/zh-CN/api/client/application.md
View File

@ -35,7 +35,6 @@ const app = new Application({
- SystemSettingsProvider
- PluginManagerProvider
- SchemaComponentProvider
- SchemaInitializerProvider
- BlockSchemaComponentProvider
- AntdSchemaComponentProvider
- ACLProvider

8
docs/zh-CN/api/client/schema-designer/schema-initializer.md
View File

@ -17,11 +17,3 @@
},
}
```
SchemaInitializer 的核心包括 `<SchemaInitializer.Button />` 和 `<SchemaInitializer.Item />` 两个组件。`<SchemaInitializer.Button />` 用于创建 Schema 的下拉菜单按钮，下拉菜单的菜单项为 `<SchemaInitializer.Item/>`。
### `<SchemaInitializerProvider />`
### `<SchemaInitializer.Button />`
### `<SchemaInitializer.Item/>`

1
docs/zh-CN/development/client/index.md
View File

@ -10,7 +10,6 @@ NocoBase 客户端的扩展大多以 Provider 的形式提供。
- SystemSettingsProvider
- PluginManagerProvider
- SchemaComponentProvider
- SchemaInitializerProvider
- BlockSchemaComponentProvider
- AntdSchemaComponentProvider
- DocumentTitleProvider

18
docs/zh-CN/development/client/ui-schema-designer/x-initializer.md
View File

@ -23,17 +23,13 @@
## 替换
```tsx |pure
```tsx | pure
import React, { useContext } from 'react';
import { SchemaInitializerContext } from '@nocobase/client';
import { Plugin } from '@nocobase/client';
export default React.memo((props) => {
const items = useContext(SchemaInitializerContext);
const BlockInitializers = {};
return (
<SchemaInitializerContext.Provider value={{ ...items, BlockInitializers }}>
{props.children}
</SchemaInitializerContext.Provider>
);
});
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add('BlockInitializers', BlockInitializers)
}
}
```

278
docs/zh-CN/welcome/release/v15-changelog.md Normal file
View File

@ -0,0 +1,278 @@
# 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)。

4
package.json
View File

@ -86,7 +86,7 @@
"axios": "^0.26.1",
"commander": "^9.2.0",
"dumi": "^2.2.0",
"dumi-theme-nocobase": "^0.2.14",
"dumi-theme-nocobase": "^0.2.18",
"eslint-plugin-jest-dom": "^5.0.1",
"eslint-plugin-testing-library": "^5.11.0",
"execa": "^5.1.1",
@ -103,7 +103,7 @@
"ts-jest": "^29.1.1",
"typescript": "5.1.3",
"vite": "^4.4.9",
"vitest": "^0.34.3"
"vitest": "^0.34.6"
},
"volta": {
"node": "18.14.2",

8
packages/core/build/src/build.ts
View File

@ -24,7 +24,13 @@ export async function build(pkgs: string[]) {
const packages = getPackages(pkgs);
if (packages.length === 0) {
console.error(chalk.red(`[@nocobase/build]: '${pkgs.join(', ')}' not match any packages.`));
let msg = '';
if (pkgs.length) {
msg = `'${pkgs.join(', ')}' did not match any packages`
} else {
msg = 'No package matched'
}
console.warn(chalk.yellow(`[@nocobase/build]: ${msg}`));
return;
}

376
packages/core/client/.dumirc.ts
View File

@ -3,19 +3,29 @@ import { defineConfig } from 'dumi';
import { defineThemeConfig } from 'dumi-theme-nocobase';
const umiConfig = getUmiConfig();
process.env.DOC_LANG = process.env.DOC_LANG || 'zh-CN';
const lang = process.env.DOC_LANG;
console.log('process.env.DOC_LANG', lang);
export default defineConfig({
hash: true,
alias: {
...umiConfig.alias,
},
// ssr: {},
// exportStatic: {
// ignorePreRenderError: true
// },
cacheDirectoryPath: `node_modules/.docs-client-${lang}-cache`,
outputPath: `./dist/${lang}`,
resolve: {
atomDirs: [
{ type: 'api', dir: 'src' },
{ type: 'api', dir: 'src/schema-component/antd' },
{ type: 'api', dir: 'src/route-switch/antd' },
],
docDirs: [`./docs/${lang}`]
},
locales: [
{ id: 'en-US', name: 'English' },
{ id: 'zh-CN', name: '中文' },
],
themeConfig: defineThemeConfig({
title: 'NocoBase',
logo: 'https://www.nocobase.com/images/logo.png',
@ -25,92 +35,338 @@ export default defineConfig({
nav: [
{
title: 'API',
link: '/apis/application',
link: '/core/application/application',
},
// {
// title: 'UI Schema',
// link: '/ui-schema',
// },
],
sidebarEnhance: {
'/apis': [
'/core': [
{
title: 'Core',
title: 'Application',
type: 'group',
children: [
{
title: 'Application',
children: [
{
title: 'Application',
link: '/apis/application',
},
{
title: 'APIClient',
link: '/apis/api-client',
},
{
title: 'PluginSettingsManager',
link: '#',
},
],
link: '/core/application/application',
},
{
title: 'UI schema designer',
children: [
{
title: 'SchemaComponent',
link: '#',
},
{
title: 'SchemaInitializer',
link: '#',
},
{
title: 'SchemaSettings',
link: '#',
},
{
title: 'DNDContext & DragHandler',
link: '#',
},
],
title: 'Plugin',
link: '/core/application/plugin',
},
{
title: 'Collection Manager',
link: '#',
title: 'PluginManager',
link: '/core/application/plugin-manager',
},
{
title: 'BlockProvider',
link: '#',
title: 'RouterManager',
link: '/core/application/router-manager',
},
{
title: 'RecordProvider',
link: '#',
title: 'PluginSettingsManager',
link: '/core/application/plugin-settings-manager',
},
],
},
{
title: 'React components',
title: 'UI Schema',
type: 'group',
children: [
{
title: 'Board',
link: '#',
title: 'SchemaComponent',
link: '/core/ui-schema/schema-component',
},
{
title: 'Icon',
link: '#',
title: 'Designable',
link: '/core/ui-schema/designable',
},
],
},
{
title: 'Schema components',
type: 'group',
children: [
{
title: 'Input',
link: '#',
title: 'SchemaInitializer',
link: '/core/ui-schema/schema-initializer',
},
{
title: 'SchemaInitializerManager',
link: '/core/ui-schema/schema-initializer-manager',
},
{
title: 'SchemaSettings',
link: '/core/ui-schema/schema-settings',
},
{
title: 'SchemaSettingsManager',
link: '/core/ui-schema/schema-settings-manager',
},
{
title: 'SchemaToolbar',
link: '/core/ui-schema/schema-toolbar',
},
],
},
],
// '/ui-schema': [
// {
// title: 'Overview',
// link: '/ui-schema',
// },
// {
// title: 'Globals',
// type: 'group',
// children: [
// {
// title: 'Menu',
// link: '/ui-schema/globals/menu',
// },
// {
// title: 'Page',
// link: '/ui-schema/globals/page',
// },
// {
// title: 'Tabs',
// link: '/ui-schema/globals/tabs',
// },
// ],
// },
// {
// title: 'Blocks',
// type: 'group',
// children: [
// {
// title: 'Overview',
// link: '/ui-schema/blocks',
// },
// {
// title: 'Data blocks',
// children: [
// {
// title: 'Overview',
// link: '/ui-schema/blocks/data',
// },
// {
// title: 'Table',
// link: '/ui-schema/blocks/data/table',
// },
// {
// title: 'Form',
// link: '/ui-schema/blocks/data/form',
// },
// {
// title: 'Form(Read pretty)',
// link: '/ui-schema/blocks/data/form-read-pretty',
// },
// {
// title: 'Details',
// link: '/ui-schema/blocks/data/details',
// },
// {
// title: 'List',
// link: '/ui-schema/blocks/data/list',
// },
// {
// title: 'Grid Card',
// link: '/ui-schema/blocks/data/grid-card',
// },
// {
// title: 'Calendar',
// link: '/ui-schema/blocks/data/calendar',
// },
// {
// title: 'Kanban',
// link: '/ui-schema/blocks/data/kanban',
// },
// {
// title: 'Map',
// link: '/ui-schema/blocks/data/map',
// },
// {
// title: 'Gantt',
// link: '/ui-schema/blocks/data/gantt',
// },
// {
// title: 'Charts',
// link: '/ui-schema/blocks/data/charts',
// },
// ],
// },
// {
// title: 'Filter blocks',
// children: [
// {
// title: 'Collapse',
// link: '/ui-schema/blocks/filter/collapse',
// },
// {
// title: 'Form',
// link: '/ui-schema/blocks/filter/form',
// },
// ],
// },
// {
// title: 'Other blocks',
// children: [
// {
// title: 'iframe',
// link: '/ui-schema/blocks/others/iframe',
// },
// {
// title: 'Markdown',
// link: '/ui-schema/blocks/others/markdown',
// },
// {
// title: 'Workflow todos',
// link: '/ui-schema/blocks/others/workflow-todo',
// },
// ],
// },
// ],
// },
// {
// title: 'Fields',
// type: 'group',
// children: [
// {
// title: 'Overview',
// link: '/ui-schema/fields',
// },
// {
// title: 'FormItem',
// link: '/ui-schema/fields/form-item',
// },
// {
// title: 'TableColumn',
// link: '/ui-schema/fields/table-column',
// },
// {
// title: 'Association',
// children: [
// {
// title: 'Title',
// link: '/ui-schema/fields/association-components/title',
// },
// {
// title: 'Tag',
// link: '/ui-schema/fields/association-components/tag',
// },
// {
// title: 'Select',
// link: '/ui-schema/fields/association-components/select',
// },
// {
// title: 'RecordPicker',
// link: '/ui-schema/fields/association-components/record-picker',
// },
// {
// title: 'Cascader',
// link: '/ui-schema/fields/association-components/cascader-select',
// },
// {
// title: 'Sub-form',
// link: '/ui-schema/fields/association-components/sub-form',
// },
// {
// title: 'Sub-form(Popover)',
// link: '/ui-schema/fields/association-components/sub-form-popover',
// },
// {
// title: 'Sub-details',
// link: '/ui-schema/fields/association-components/sub-details',
// },
// {
// title: 'Sub-table',
// link: '/ui-schema/fields/association-components/cascader-select',
// },
// {
// title: 'File manager',
// link: '/ui-schema/fields/association-components/file-manager',
// },
// ],
// },
// ],
// },
// {
// title: 'Actions',
// type: 'group',
// children: [
// {
// title: 'Overview',
// link: '/ui-schema/actions',
// },
// {
// title: 'Add new',
// link: '/ui-schema/actions/add-new',
// },
// {
// title: 'View',
// link: '/ui-schema/actions/view',
// },
// {
// title: 'Edit',
// link: '/ui-schema/actions/edit',
// },
// {
// title: 'Delete',
// link: '/ui-schema/actions/delete',
// },
// {
// title: 'Submit',
// link: '/ui-schema/actions/submit',
// },
// {
// title: 'Filter',
// link: '/ui-schema/actions/filter',
// },
// {
// title: 'Refresh',
// link: '/ui-schema/actions/refresh',
// },
// {
// title: 'Print',
// link: '/ui-schema/actions/print',
// },
// {
// title: 'Duplicate',
// link: '/ui-schema/actions/duplicate',
// },
// {
// title: 'Export',
// link: '/ui-schema/actions/export',
// },
// {
// title: 'Import',
// link: '/ui-schema/actions/import',
// },
// {
// title: 'Bulk update',
// link: '/ui-schema/actions/bulk-update',
// },
// {
// title: 'Bulk edit',
// link: '/ui-schema/actions/bulk-edit',
// },
// {
// title: 'Add record(任意表)',
// link: '/ui-schema/actions/add-record',
// },
// {
// title: 'Update record',
// link: '/ui-schema/actions/update-record',
// },
// {
// title: 'Save record',
// link: '/ui-schema/actions/save-record',
// },
// {
// title: 'Custom request',
// link: '/ui-schema/actions/custom-request',
// },
// {
// title: 'Submit to workflow',
// link: '/ui-schema/actions/submit-to-workflow',
// },
// ],
// },
// ],
},
}),
});

3
packages/core/client/.npmignore
View File

@ -1,3 +1,4 @@
/node_modules
/src
/.dumi
/.dumi
/docs

5
packages/core/client/docs/develop.md
View File

@ -1,5 +0,0 @@
---
sidebar: false
---
<code src="../src/application/demos/demo3.tsx"></code>

369
packages/core/client/docs/en-US/core/application/application.md Normal file
View File

@ -0,0 +1,369 @@
# Application
## new Application(options)
创建一个 NocoBase 应用。
- 类型
```tsx | pure
export interface ApplicationOptions {
apiClient?: APIClientOptions;
ws?: WebSocketClientOptions | boolean;
i18n?: i18next;
providers?: (ComponentType | ComponentAndProps)[];
plugins?: PluginType[];
components?: Record<string, ComponentType>;
scopes?: Record<string, any>;
router?: RouterOptions;
schemaSettings?: SchemaSetting[];
schemaInitializers?: SchemaInitializer[];
loadRemotePlugins?: boolean;
}
```
- 详细信息
- apiClient：API 请求实例，具体说明请参见：[https://docs.nocobase.com/api/sdk](https://docs.nocobase.com/api/sdk)
- i18n：国际化，具体请参考：[https://www.i18next.com/overview/api#createinstance](https://www.i18next.com/overview/api#createinstance)
- providers：上下文
- components：全局组件
- scopes：全局 scopes
- router：配置路由，具体请参考：[RouterManager](/core/application/router-manager)
- pluginSettings: [PluginSettingsManager](/core/application/plugin-settings-manager)
- schemaSettings：Schema 设置工具，具体参考：[SchemaSettingsManager](/core/ui-schema/schema-initializer-manager)
- schemaInitializers：Schema 添加工具，具体参考：[SchemaInitializerManager](/core/ui-schema/schema-initializer-manager)
- loadRemotePlugins：用于控制是否加载远程插件，默认为 `false`，即不加载远程插件（方便单测和 DEMO 环境）。
- 示例
```tsx
/**
* defaultShowCode: true
*/
import { Application, Plugin } from '@nocobase/client';
const ProviderDemo = ({ children }) => {
return <div>
<div>hello world</div>
<div style={{ marginTop: 10 }}>{children}</div>
</div>
}
class MyPlugin extends Plugin {
async load(){
this.app.router.add('home', {
path: '/',
Component: () => <div>home page</div>
})
}
}
const app = new Application({
providers: [ProviderDemo],
plugins: [MyPlugin],
router: {
type: 'memory',
initialEntries: ['/'],
}
});
export default app.getRootComponent();
```
## 实例属性
### app.i18n
```tsx | pure
class Application {
i18n: i18next;
}
```
详细介绍，请参考：[i18next](https://www.i18next.com/overview/api#createinstance)
### app.apiClient
```tsx | pure
class Application {
apiClient: APIClient;
}
```
详细介绍，请参考：[APIClient](https://docs.nocobase.com/api/sdk)
### app.router
详细介绍，请参考：[RouterManager](/core/application/router-manager)
### app.pluginSettingsManager
详细介绍，请参考：[PluginSettingsManager](/core/application/plugin-settings-manager)
### app.schemaSettingsManager
详细介绍，请参考：[SchemaSettingsManager](/core/ui-schema/schema-initializer-manager)
### app.schemaInitializerManager
详细介绍，请参考：[SchemaInitializerManager](/core/ui-schema/schema-initializer-manager)
## 实例方法
### app.getRootComponent()
获取应用的根组件。
- 类型
```tsx | pure
class Application {
getRootComponent(): React.FC
}
```
- 示例
```tsx | pure
import { Application } from '@nocobase/client';
const app = new Application();
const App = app.getRootComponent();
```
### app.mount()
将应用实例挂载在一个容器元素中。
- 类型
```tsx | pure
class Application {
mount(containerOrSelector: Element | ShadowRoot | string): ReactDOM.Root
}
```
- 示例
```tsx | pure
import { Application } from '@nocobase/client';
const app = new Application();
app.mount('#root');
```
### app.addProvider()
添加 `Provider` 上下文。
- 类型
```tsx | pure
class Application {
addProvider<T = any>(component: ComponentType, props?: T): void;
}
```
- 详细信息
第一个参数是组件，第二个参数是组件的参数。注意 `Provider` 一定要渲染 `children`。
- 示例
```tsx | pure
// 场景1：第三方库，或者自己创建的 Context
const MyContext = createContext({});
app.addProvider(MyContext.provider, { value: { color: 'red' } });
```
```tsx
import { createContext, useContext } from 'react';
import { Application, Plugin } from '@nocobase/client';
const MyContext = createContext();
const HomePage = () => {
const { color } = useContext(MyContext) || {};
return <div style={{ color }}>home page</div>
}
class MyPlugin extends Plugin {
async load(){
this.app.addProvider(MyContext.Provider, { value: { color: 'red' } });
this.app.router.add('home', {
path: '/',
Component: HomePage
})
}
}
const app = new Application({
plugins: [MyPlugin],
router: {
type: 'memory',
initialEntries: ['/'],
}
});
export default app.getRootComponent();
```
```tsx | pure
// 场景2：自定义的组件，注意 children
const GlobalDemo = ({ name, children }) => {
return <div>
<div>hello, { name }</div>
<div>{ children }</div>
</div>
}
app.addProvider(GlobalDemo, { name: 'nocobase' });
```
```tsx
import { Application, Plugin } from '@nocobase/client';
const GlobalDemo = ({ name, children }) => {
return <div>
<div>hello, { name }</div>
<div>{ children }</div>
</div>
}
class MyPlugin extends Plugin {
async load(){
this.app.addProvider(GlobalDemo, { name: 'nocobase' });
this.app.router.add('home', {
path: '/',
Component: () => <div>home page</div>
})
}
}
const app = new Application({
plugins: [MyPlugin],
router: {
type: 'memory',
initialEntries: ['/'],
}
});
export default app.getRootComponent();
```
### app.addProviders()
添加多个 `Provider` 上下文。
- 类型
```tsx | pure
class Application {
addProviders(providers: (ComponentType | [ComponentType, any])[]): void;
}
```
- 详细信息
一次添加多个 `Provider`。
- 示例
```tsx | pure
app.addProviders([[MyContext.provider, { value: { color: 'red' } }], [GlobalDemo, { name: 'nocobase' }]])
```
### app.addComponents()
添加全局组件。
全局组件可以使用在 [RouterManager](/core/application/router-manager) 和 [UI Schema](/core/ui-schema/schema-component)上。
- 类型
```tsx | pure
class Application {
addComponents(components: Record<string, ComponentType>): void;
}
```
- 示例
```tsx | pure
app.addComponents({ Demo, Foo, Bar })
```
### app.addScopes()
添加全局的 scope。
全局组 scope 可以 [UI Schema](/core/ui-schema/schema-component) 上。
- 类型
```tsx | pure
class Application {
addScopes(scopes: Record<string, any>): void;
}
```
- 示例
```tsx | pure
function useSomeThing() {}
const anyVar = '';
app.addScopes({ useSomeThing, anyVar })
```
## Hooks
### useApp()
获取当前应用的实例。
- 类型
```tsx | pure
const useApp: () => Application
```
- 示例
```tsx | pure
const Demo = () => {
const app = useApp();
return <div>{ JSON.stringify(app.router.getRouters()) }</div>
}
```
```tsx
import { Application, Plugin, useApp } from '@nocobase/client';
const HomePage = () => {
const app = useApp();
return <div>{ JSON.stringify(app.router.getRoutes()) }</div>
}
class MyPlugin extends Plugin {
async load(){
this.app.router.add('home', {
path: '/',
Component: HomePage
})
}
}
const app = new Application({
plugins: [MyPlugin],
router: {
type: 'memory',
initialEntries: ['/'],
}
});
export default app.getRootComponent();
```

122
packages/core/client/docs/en-US/core/application/plugin-manager.md Normal file
View File

@ -0,0 +1,122 @@
# PluginManager
用于管理插件。
```tsx | pure
class PluginManager {
add<T = any>(plugin: typeof Plugin, opts?: PluginOptions<T>): Promise<void>
get<T extends typeof Plugin>(PluginClass: T): InstanceType<T>;
get<T extends {}>(name: string): T;
}
```
## 实例方法
### pluginManager.add()
将插件添加到应用中。
- 类型
```tsx | pure
class PluginManager {
add<T = any>(plugin: typeof Plugin, opts?: PluginOptions<T>): Promise<void>
}
```
- 详细信息
第一个参数是插件类，第二个则是实例化时传递的参数。前面已经讲过会在添加插件后，立即调用 `afterAdd` 钩子函数，所以返回的是 `Promise<void>`。
对于远程组件而言，会自动传递一个 `name` 参数。
- 示例
```tsx | pure
class MyPluginA extends Plugin {
async load() {
console.log('options', this.options)
console.log('app', this.app);
console.log('router', this.app.router, this.router);
}
}
class MyPluginB extends Plugin {
// 需要在 afterAdd 执行添加的方法
async afterAdd() {
// 通过 `app.pluginManager.add()` 添加插件时，第一个参数是插件类，第二个参数是实例化时传递的参数
this.app.pluginManager.add(MyPluginA, { name: 'MyPluginA', hello: 'world' })
}
}
const app = new Application({
plugins: [MyPluginB],
});
```
### pluginManager.get()
获取插件实例。
- 类型
```tsx | pure
class PluginManager {
get<T extends typeof Plugin>(PluginClass: T): InstanceType<T>;
get<T extends {}>(name: string): T;
}
```
- 详细信息
可以通过 Class 获取插件示例，如果在插件注册的时候有 name，也可以通过字符串的 name 获取。
如果是远程插件，会自动传入 name，值为 package 的 name。
- 示例
```tsx | pure
import MyPluginA from 'xxx';
class MyPluginB extends Plugin {
async load() {
// 方式1：通过 Class 获取
const myPluginA = this.app.pluginManager.get(MyPluginA);
// 方式2：通过 name 获取（添加的时候要传递 name 参数）
const myPluginA = this.app.pluginManager.get('MyPluginA');
}
}
```
## Hooks
获取插件实例，等同于 `pluginManager.get()`。
### usePlugin()
```tsx | pure
function usePlugin<T extends typeof Plugin>(plugin: T): InstanceType<T>;
function usePlugin<T extends {}>(name: string): T;
```
- 详细信息
可以通过 Class 获取插件示例，如果在插件注册的时候有 name，也可以通过字符串的 name 获取。
- 示例
```tsx | pure
import { usePlugin } from '@nocobase/client';
const Demo = () => {
// 通过 Class 获取
const myPlugin = usePlugin(MyPlugin);
// 通过 name 获取（添加的时候要传递 name 参数）
const myPlugin = usePlugin('MyPlugin');
return <div></div>
}
```

269
packages/core/client/docs/en-US/core/application/plugin-settings-manager.md Normal file
View File

@ -0,0 +1,269 @@
# PluginSettingsManager
![](../static/plugin-settings.jpg)
用于管理插件配置页面，其底层对应着 [RouterManager](/core/application/router-manager)。
```tsx | pure
interface PluginSettingOptionsType {
title: string;
/**
* @default `Outlet`
*/
Component?: ComponentType<T> | string;
icon?: string;
/**
* sort, the smaller the number, the higher the priority
* @default 0
*/
sort?: number;
aclSnippet?: string;
}
interface PluginSettingsPageType {
label?: string;
title: string;
key: string;
icon: any;
path: string;
sort?: number;
name?: string;
isAllow?: boolean;
topLevelName?: string;
aclSnippet: string;
children?: PluginSettingsPageType[];
}
class PluginSettingsManager {
add(name: string, options: PluginSettingOptionsType): void
get(name: string, filterAuth?: boolean): PluginSettingsPageType;
getList(filterAuth?: boolean): PluginSettingsPageType[]
has(name: string): boolean;
remove(name: string): void;
getRouteName(name: string): string
getRoutePath(name: string): string;
hasAuth(name: string): boolean;
}
```
## 实例方法
### pluginSettingsManager.add()
添加插件配置页。
- 类型
```tsx | pure
class PluginSettingsManager {
add(name: string, options: PluginSettingOptionsType): void
}
```
- 详细解释
第一个参数 `name`，是路由唯一标识，用于后续的删改查，并且 `name` 支持 `.` 用于分割层级，不过需要注意当使用 `.` 分层的时候，父级要使用 [Outlet](https://reactrouter.com/en/main/components/outlet)，让子元素能正常渲染。
第二个参数中 `Component` 支持组件形式和字符串形式，如果是字符串组件，要先通过 [app.addComponents](/core/application/application#appaddcomponents) 进行注册，具体参考 [RouterManager](/core/application/router-manager)。
- 示例
单层级配置。
```tsx | pure
const HelloSettingPage = () => {
return <div>hello setting page</div>
}
class MyPlugin extends Plugin {
async load() {
this.app.pluginSettingsManager.add('hello', {
title: 'Hello', // menu title and page title
icon: 'ApiOutlined', // menu icon
Component: HelloSettingPage
})
}
}
```
多层级配置。
```tsx | pure
// 多层级配置页
class MyPlugin extends Plugin {
async load() {
this.app.pluginSettingsManager.add('hello', {
title: 'HelloWorld',
icon: '',
// Component: Outlet, 默认为 react-router-dom 的 Outlet 组件，可自定义
})
this.app.pluginSettingsManager.add('hello.demo1', {
title: 'Demo1 Page',
Component: () => <div>Demo1 Page Content</div>
})
this.app.pluginSettingsManager.add('hello.demo2', {
title: 'Demo2 Page',
Component: () => <div>Demo2 Page Content</div>
})
}
}
```
### pluginSettingsManager.get()
获取配置信息。
- 类型
```tsx | pure
class PluginSettingsManager {
get(name: string, filterAuth?: boolean): PluginSettingsPageType;
}
```
- 详细解释
第一个是在添加时的 name 参数，第二个参数是是否在获取的时候进行权限过滤。
- 示例
在组件中获取。
```tsx | pure
const Demo = () => {
const app = useApp();
const helloSettingPage = this.app.pluginSettingsManager.get('hello');
}
```
在插件中获取。
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const helloSettingPage = this.app.pluginSettingsManager.get('hello')
const helloSettingPage = this.app.pluginSettingsManager.get('hello', false);
const mobileAppConfigPage = this.app.pluginSettingsManager.get('mobile.app')
}
}
```
### pluginSettingsManager.getList()
获取插件配置页列表。
- 类型
```tsx | pure
class PluginSettingsManager {
getList(filterAuth?: boolean): PluginSettingsPageType[]
}
```
- 详细解释
`filterAuth` 默认值为 `true`，即进行权限过滤。
- 示例
```tsx | pure
const Demo = () => {
const app = useApp();
const settings = app.pluginSettingsManager.getList();
const settings = app.pluginSettingsManager.getList(false);
}
```
### pluginSettingsManager.has()
判断是否存在，内部已进行权限过滤。
- 类型
```tsx | pure
class PluginSettingsManager {
has(name: string): boolean;
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
this.app.pluginSettingsManager.has('hello');
}
}
```
### pluginSettingsManager.remove()
移除配置。
```tsx | pure
class PluginSettingsManager {
remove(name: string): void;
}
```
### pluginSettingsManager.getRouteName()
获取对应路由的名称。
- 类型
```tsx | pure
class PluginSettingsManager {
getRouteName(name: string): string
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const helloRouteName = this.pluginSettingsManager.getRouteName('hello'); // admin.settings.hello
}
}
```
### pluginSettingsManager.getRoutePath()
获取插件配置对应的页面路径。
- 类型
```tsx | pure
class PluginSettingsManager {
getRoutePath(name: string): string;
}
```
- 示例
```tsx | pure
const Demo = () => {
const navigate = useNavigate();
const app = useApp();
const helloSettingPath = app.pluginSettingsManager.getRoutePath('hello');
return <div onClick={()=> navigate(helloSettingPath)}>
go to hello setting page
</div>
}
```
### pluginSettingsManager.hasAuth()
单独判断是否权限。
```tsx | pure
class PluginSettingsManager {
hasAuth(name: string): boolean;
}
```

85
packages/core/client/docs/en-US/core/application/plugin.md Normal file
View File

@ -0,0 +1,85 @@
# Plugin
Plugin 基类。
- 类型
```tsx | pure
class Plugin<T = any> {
constructor(
protected options: T,
protected app: Application,
) {
this.options = options;
this.app = app;
}
get pluginManager() {
return this.app.pluginManager;
}
get router() {
return this.app.router;
}
get pluginSettingsManager() {
return this.app.pluginSettingsManager;
}
get schemaInitializerManager() {
return this.app.schemaInitializerManager;
}
get schemaSettingsManager() {
return this.app.schemaSettingsManager;
}
async afterAdd() {}
async beforeLoad() {}
async load() {}
}
```
- 详细信息
- 构造函数
- `options`： 插件的添加有两种方式，一种方式从插件列表中远程加载出来，另一种方式是通过 [PluginManager](/core/application/plugin-manager) 添加
- 远程加载：`options` 会被自动注入 `{ name: 'npm package.name' }`
- PluginManager `options` 由用户自己传递
- `app`：此参数是自动注入的，是应用实例
- 快捷访问：基类提供了对 `app` 部分方法和属性的快捷访问
- `pluginManager`
- `router`
- `pluginSettingsManager`
- `schemaSettingsManager`
- `schemaInitializerManager`
- 声明周期
- `afterAdd`：插件被添加后立即执行
- `beforeLoad`：执行渲染时执行，在 `afterAdd` 之后，`load` 之前
- `load`：最后执行
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async afterAdd() {
console.log('afterAdd')
}
async beforeLoad() {
console.log('beforeLoad')
}
async load() {
console.log('load')
// 可以访问应用实例
console.log(this.app)
// 访问应用实例内容
console.log(this.app.router, this.router);
}
}
```

386
packages/core/client/docs/en-US/core/application/router-manager.md Normal file
View File

@ -0,0 +1,386 @@
# RouterManager
用于管理路由。
```tsx | pure
import { ComponentType } from 'react';
import { RouteObject } from 'react-router-dom';
interface RouteType extends Omit<RouteObject, 'children' | 'Component'> {
Component?: ComponentType<T> | string;
}
class RouterManager {
add(name: string, route: RouteType): void;
getRoutes(): Record<string, RouteType>;
getRoutesTree(): RouteObject[];
get(name: string): RouteType;
has(name: string): boolean;
remove(name: string): void;
setType(type: 'browser' | 'memory' | 'hash'): void;
setBasename(basename: string): void;
}
```
## 实例方法
### router.add()
添加一条路由。
- 类型
```tsx | pure
class RouterManager {
add(name: string, route: RouteType): void
}
```
- 详情
第一个参数 `name`，是路由唯一标识，用于后续的删改查，并且 `name` 支持 `.` 用于分割层级，不过需要注意当使用 `.` 分层的时候，父级要使用 [Outlet](https://reactrouter.com/en/main/components/outlet)，让子元素能正常渲染。
第二个参数 `RouteType` 的 `Component` 支持组件形式和字符串形式，如果是字符串组件，要先通过 [app.addComponents](/core/application/application#appaddcomponents) 进行注册。
- 示例
单层级路由。
```tsx | pure
class MyPlugin extends Plugin {
async load() {
this.app.router.add('home', {
path: '/',
Component: () => <div>home page</div>
})
this.app.router.add('login', {
path: '/login',
element: <div>login page</div>
})
}
}
```
```tsx
import { useNavigate } from 'react-router-dom';
import { Plugin, Application } from '@nocobase/client';
const HomePage = () => {
const navigate = useNavigate();
return <div>
<div>home page</div>
<button onClick={() => navigate('/login')}>GO To LoginPage</button>
</div>
}
const LoginPage = () => {
const navigate = useNavigate();
return <div>
<div>login page</div>
<button onClick={() => navigate('/')}>GO To HomePage</button>
</div>
}
class MyPlugin extends Plugin {
async load() {
this.app.router.add('home', {
path: '/',
Component: HomePage
})
this.app.router.add('login', {
path: '/login',
Component: LoginPage
})
}
}
const app = new Application({
plugins: [MyPlugin],
router: {
type: 'memory',
initialEntries: ['/'],
}
});
export default app.getRootComponent();
```
多层级路由。
```tsx | pure
import { Plugin } from '@nocobase/client';
import { Outlet } from 'react-router-dom';
const AdminLayout = () =>{
return <div>
<div>This is admin layout</div>
<Outlet />
</div>
}
const AdminSettings = () => {
return <div>This is admin settings page</div>
}
class MyPlugin extends Plugin {
async load() {
this.app.router.add('admin', {
path: '/admin',
Component: AdminLayout
})
this.app.router.add('admin.settings', {
path: '/admin/settings',
Component: AdminSettings ,
})
}
}
```
```tsx
import { useNavigate, Outlet } from 'react-router-dom';
import { Plugin, Application } from '@nocobase/client';
const AdminLayout = () =>{
return <div>
<div>This is admin layout</div>
<Outlet />
</div>
}
const AdminSettings = () => {
return <div>This is admin settings page</div>
}
class MyPlugin extends Plugin {
async load() {
this.app.router.add('admin', {
path: '/admin',
Component: AdminLayout
})
this.app.router.add('admin.settings', {
path: '/admin/settings',
Component: AdminSettings ,
})
}
}
const app = new Application({
plugins: [MyPlugin],
router: {
type: 'memory',
initialEntries: ['/admin/settings'],
}
});
export default app.getRootComponent();
```
`Component` 参数为字符串。
```tsx | pure
const LoginPage = () => {
return <div>login page</div>
}
class MyPlugin extends Plugin {
async load() {
// 通过 app.addComponents 进行注册
this.app.addComponents({ LoginPage })
this.app.router.add('login', {
path: '/login',
Component: 'LoginPage', // 这里可以使用字符串了
})
}
}
```
### router.getRoutes()
获取路由列表。
- 类型
```tsx | pure
class RouterManager {
getRoutes(): Record<string, RouteType>
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
console.log(this.app.router.getRoutes());
}
}
```
![](../static/CxjJbp0pcogYn6xviVyc6QT8nUg.png)
### router.getRoutesTree()
获取用于 [useRoutes()](https://reactrouter.com/hooks/use-routes) 的数据。
- 类型
```tsx | pure
class RouterManager {
getRoutesTree(): RouteObject[]
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const routes = this.app.router.getRoutesTree();
}
}
```
### router.get()
获取单个路由配置。
- 类型
```tsx | pure
class RouterManager {
get(name: string): RouteType
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const adminRoute = this.app.router.get('admin')
const adminSettings = this.app.router.get('admin.settings')
}
}
```
### router.has()
判断是否添加过路由。
- 类型
```tsx | pure
class RouterManager {
has(name: string): boolean;
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const hasAdminRoute = this.app.router.has('admin')
const hasAdminSettings = this.app.router.has('admin.settings')
}
}
```
### router.remove()
移除路由配置。
- 类型
```tsx | pure
class RouterManager {
remove(name: string): void;
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
this.app.router.remove('admin')
this.app.router.remove('admin.settings')
}
}
```
### router.setType()
设置路由类型，默认为 `browser`。
- 类型
```tsx | pure
class RouterManager {
setType(type: 'browser' | 'memory' | 'hash'): void;
}
```
- 详细解释
- browser: [BrowserRouter](https://reactrouter.com/en/main/router-components/browser-router)
- memory: [MemoryRouter](https://reactrouter.com/en/main/router-components/hash-router)
- hash: [HashRouter](https://reactrouter.com/en/main/router-components/memory-router)
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
this.app.router.setType('hash')
}
}
```
### router.setBasename()
设置 [basename](https://reactrouter.com/en/main/router-components/browser-router#basename)。
- 类型
```tsx | pure
class RouterManager {
setBasename(basename: string): void;
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
this.app.router.setBasename('/')
}
}
```
## Hooks
### useRouter()
获取当前路由的实例，等同于 `app.router`。
- 类型
```tsx | pure
const useRouter: () => RouterManager
```
- 示例
```tsx | pure
import { useRouter } from '@nocobase/client';
const Demo = () => {
const router = useRouter();
}
```

BIN
packages/core/client/docs/en-US/core/static/CxjJbp0pcogYn6xviVyc6QT8nUg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
packages/core/client/docs/en-US/core/static/KTUWb69kioUg8bxYTAMc2ReDnRg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
packages/core/client/docs/en-US/core/static/VfPGbhWo9os0qTxcITkcHNfin4g.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
packages/core/client/docs/en-US/core/static/designer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
packages/core/client/docs/en-US/core/static/plugin-settings.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

122
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-basic.tsx Normal file
View File

@ -0,0 +1,122 @@
import React from 'react';
import {
Application,
Plugin,
SchemaComponent,
SchemaInitializer,
SchemaInitializerItem,
useSchemaInitializer,
useSchemaInitializerItem,
useSchemaInitializerRender,
} from '@nocobase/client';
import { observer, useField, useFieldSchema } from '@formily/react';
import { Field } from '@formily/core';
const Hello = observer(() => {
const field = useField<Field>();
return (
<div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
{field.title}
</div>
);
});
function Demo() {
const itemConfig = useSchemaInitializerItem();
// 调用插入功能
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
title: itemConfig.title,
'x-component': 'Hello',
});
};
return <SchemaInitializerItem title={itemConfig.title} onClick={handleClick} />;
}
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Add Block',
// 插入位置
insertPosition: 'beforeEnd',
items: [
{
name: 'a',
title: 'Item A',
Component: Demo,
},
{
name: 'b',
title: 'Item B',
Component: Demo,
},
],
});
const AddBlockButton = observer(() => {
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializerRender(fieldSchema['x-initializer']);
return render();
});
const Page = observer(
(props) => {
return (
<div>
{props.children}
<AddBlockButton />
</div>
);
},
{ displayName: 'Page' },
);
const Root = () => {
return (
<div>
<SchemaComponent
components={{ Page, Hello, AddBlockButton }}
schema={{
type: 'void',
name: 'page',
'x-component': 'Page',
'x-initializer': 'MyInitializer',
properties: {
hello1: {
type: 'void',
title: 'Test1',
'x-component': 'Hello',
},
hello2: {
type: 'void',
title: 'Test2',
'x-component': 'Hello',
},
},
}}
></SchemaComponent>
</div>
);
};
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add(myInitializer);
this.app.router.add('root', {
path: '/',
Component: Root,
});
}
}
const app = new Application({
router: {
type: 'memory',
initialEntries: ['/'],
},
plugins: [MyPlugin],
designable: true,
});
export default app.getRootComponent();

38
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-common.tsx Normal file
View File

@ -0,0 +1,38 @@
import { ApplicationOptions, Grid, Plugin, SchemaComponent } from '@nocobase/client';
import React from 'react';
const HelloPage = () => {
return (
<div>
<SchemaComponent
schema={{
name: 'root',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'MyInitializer',
properties: {},
}}
/>
</div>
);
};
class PluginHello extends Plugin {
async load() {
this.app.addComponents({ Grid });
this.router.add('hello', {
path: '/',
Component: HelloPage,
});
}
}
const appOptions: ApplicationOptions = {
router: {
type: 'memory',
},
designable: true,
plugins: [PluginHello],
};
export { appOptions };

130
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-component.tsx Normal file
View File

@ -0,0 +1,130 @@
import React from 'react';
import {
Application,
Plugin,
SchemaComponent,
SchemaInitializer,
SchemaInitializerItem,
useSchemaInitializer,
useSchemaInitializerItem,
useSchemaInitializerRender,
} from '@nocobase/client';
import { observer, useField, useFieldSchema } from '@formily/react';
import { Field } from '@formily/core';
import { Avatar } from 'antd';
const Hello = observer(() => {
const field = useField<Field>();
return (
<div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
{field.title}
</div>
);
});
function Demo() {
const itemConfig = useSchemaInitializerItem();
// 调用插入功能
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
title: itemConfig.title,
'x-component': 'Hello',
});
};
return <SchemaInitializerItem title={itemConfig.title} onClick={handleClick} />;
}
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Add Block',
insertPosition: 'beforeEnd',
Component: (props: any) => (
<Avatar style={{ cursor: 'pointer' }} {...props}>
C
</Avatar>
),
componentProps: {
size: 'large',
},
items: [
{
name: 'a',
title: 'Item A',
Component: Demo,
},
{
name: 'b',
title: 'Item B',
Component: Demo,
},
],
});
const AddBlockButton = observer(() => {
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializerRender(fieldSchema['x-initializer']);
return render();
});
const Page = observer(
(props) => {
return (
<div>
{props.children}
<AddBlockButton />
</div>
);
},
{ displayName: 'Page' },
);
const Root = () => {
return (
<div>
<SchemaComponent
components={{ Page, Hello, AddBlockButton }}
schema={{
type: 'void',
name: 'page',
'x-component': 'Page',
'x-initializer': 'MyInitializer',
properties: {
hello1: {
type: 'void',
title: 'Test1',
'x-component': 'Hello',
},
hello2: {
type: 'void',
title: 'Test2',
'x-component': 'Hello',
},
},
}}
></SchemaComponent>
</div>
);
};
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add(myInitializer);
this.app.router.add('root', {
path: '/',
Component: Root,
});
}
}
const app = new Application({
router: {
type: 'memory',
initialEntries: ['/'],
},
plugins: [MyPlugin],
designable: true,
});
export default app.getRootComponent();

57
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-components-divider.tsx Normal file
View File

@ -0,0 +1,57 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaInitializer } from '@nocobase/client';
import { appOptions } from './schema-initializer-common';
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
title: 'A Group Title',
type: 'itemGroup',
children: [
{
name: 'a1',
type: 'item',
title: 'A1',
},
{
name: 'a2',
type: 'item',
title: 'A2',
},
],
},
{
name: 'd',
type: 'divider',
},
{
name: 'b',
title: 'B Group Title',
type: 'itemGroup',
children: [
{
name: 'a1',
type: 'item',
title: 'B1',
},
{
name: 'a2',
type: 'item',
title: 'B2',
},
],
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

71
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-components-group.tsx Normal file
View File

@ -0,0 +1,71 @@
import { Application, SchemaInitializer, SchemaInitializerItemGroup } from '@nocobase/client';
import { appOptions } from './schema-initializer-common';
import React from 'react';
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
title: 'A Group Title',
type: 'itemGroup',
children: [
{
name: 'a1',
type: 'item',
title: 'A1',
},
{
name: 'a2',
type: 'item',
title: 'A2',
},
],
},
{
name: 'b',
title: 'B Group Title',
type: 'itemGroup',
divider: true, // 渲染分割线
useChildren() {
// 动态子元素
return [
{
name: 'b1',
type: 'item',
title: 'B1',
},
{
name: 'b2',
type: 'item',
title: 'B2',
},
];
},
},
{
name: 'c',
Component: () => {
return (
<SchemaInitializerItemGroup title="C Group Title">
{[
{
name: 'c1',
type: 'item',
title: 'C1',
},
]}
</SchemaInitializerItemGroup>
);
},
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

88
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-components-item.tsx Normal file
View File

@ -0,0 +1,88 @@
/**
* defaultShowCode: true
*/
import {
Grid,
SchemaInitializer,
useSchemaInitializer,
SchemaInitializerItem,
CardItem,
Application,
} from '@nocobase/client';
import React from 'react';
import { appOptions } from './schema-initializer-common';
import { useFieldSchema } from '@formily/react';
const Demo = () => {
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
'x-decorator': 'CardItem',
'x-component': 'Hello',
});
};
return <SchemaInitializerItem title={'Demo-组件方式定义'} onClick={handleClick}></SchemaInitializerItem>;
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
wrap: Grid.wrap,
items: [
{
name: 'demo1',
Component: Demo,
},
{
name: 'demo2',
type: 'item',
useComponentProps() {
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
'x-decorator': 'CardItem',
'x-component': 'Hello',
});
};
return {
title: 'type 方式定义',
onClick: handleClick,
};
},
},
{
name: 'demo3',
title: 'with items',
type: 'item',
onClick(args) {
console.log(args);
},
items: [
{
label: 'aaa',
value: 'aaa',
},
{
label: 'bbb',
value: 'bbb',
},
],
},
],
});
const Hello = () => {
const schema = useFieldSchema();
return <h1>Hello, world! {schema.name}</h1>;
};
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
components: { CardItem, Hello },
});
export default app.getRootComponent();

53
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-components-menu.tsx Normal file
View File

@ -0,0 +1,53 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaInitializer } from '@nocobase/client';
import { appOptions } from './schema-initializer-common';
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
title: 'A subMenu',
type: 'subMenu',
children: [
{
name: 'a1',
type: 'item',
title: 'A1',
},
{
name: 'a2',
type: 'item',
title: 'A2',
},
],
},
{
name: 'b',
title: 'B subMenu',
type: 'subMenu',
children: [
{
name: 'a1',
type: 'item',
title: 'B1',
},
{
name: 'a2',
type: 'item',
title: 'B2',
},
],
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

53
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-components-select.tsx Normal file
View File

@ -0,0 +1,53 @@
/**
* defaultShowCode: true
*/
import { useFieldSchema } from '@formily/react';
import { Application, Grid, SchemaInitializer, SchemaInitializerSelect, useDesignable } from '@nocobase/client';
import React from 'react';
import { appOptions } from './schema-initializer-common';
const OpenModeSelect = () => {
const fieldSchema = useFieldSchema();
const openModeValue = fieldSchema?.['x-component-props']?.['openMode'] || 'drawer';
const { patch } = useDesignable();
const handleChange = (value) => {
// 修改当前节点的 Schema 的属性
patch({
'x-component-props': {
openMode: value,
},
});
};
return (
<SchemaInitializerSelect
title={'Open mode'}
options={[
{ label: 'Drawer', value: 'drawer' },
{ label: 'Dialog', value: 'modal' },
]}
value={openModeValue}
onChange={handleChange}
/>
);
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
wrap: Grid.wrap,
items: [
{
name: 'openMode',
Component: OpenModeSelect,
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

88
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-components-switch.tsx Normal file
View File

@ -0,0 +1,88 @@
/**
* defaultShowCode: true
*/
import {
Grid,
SchemaInitializer,
Application,
SchemaInitializerSwitch,
useCurrentSchema,
useSchemaInitializer,
Action,
} from '@nocobase/client';
import React from 'react';
import { appOptions } from './schema-initializer-common';
const actionKey = 'x-action';
const schema = {
type: 'void',
[actionKey]: 'create',
title: "{{t('Add new')}}",
'x-component': 'Action',
'x-component-props': {
type: 'primary',
},
};
const AddNewButton = () => {
// 判断是否已插入
const { exists, remove } = useCurrentSchema(schema[actionKey], actionKey);
const { insert } = useSchemaInitializer();
return (
<SchemaInitializerSwitch
checked={exists}
title={'Add new - Component方式'}
onClick={() => {
// 如果已插入，则移除
if (exists) {
return remove();
}
// 新插入子节点
insert(schema);
}}
/>
);
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Configure actions',
wrap: Grid.wrap,
items: [
{
name: 'Add New',
Component: AddNewButton,
},
{
name: 'Add New2',
type: 'switch',
useComponentProps() {
const { exists, remove } = useCurrentSchema(schema[actionKey], actionKey);
const { insert } = useSchemaInitializer();
return {
checked: exists,
title: 'Add new - type 方式',
onClick() {
// 如果已插入，则移除
if (exists) {
return remove();
}
// 新插入子节点
insert(schema);
},
};
},
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
components: { Action },
});
export default app.getRootComponent();

33
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-hooks-item.tsx Normal file
View File

@ -0,0 +1,33 @@
/**
* defaultShowCode: true
*/
import React, { ReactNode } from 'react';
import { Application, SchemaInitializer, SchemaInitializerItem, useSchemaInitializerItem } from '@nocobase/client';
import { appOptions } from './schema-initializer-common';
import { TableOutlined } from '@ant-design/icons';
const Demo = () => {
const { name, foo, icon } = useSchemaInitializerItem<{ name: string; foo: string; icon: ReactNode }>();
return <SchemaInitializerItem icon={icon} title={`${name} - ${foo}`} />;
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
foo: 'bar',
icon: <TableOutlined />,
Component: Demo,
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

143
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-items.tsx Normal file
View File

@ -0,0 +1,143 @@
import React, { FC } from 'react';
import {
Application,
Plugin,
SchemaComponent,
SchemaInitializer,
SchemaInitializerChild,
SchemaInitializerItem,
SchemaInitializerItemsProps,
useSchemaInitializer,
useSchemaInitializerItem,
useSchemaInitializerRender,
} from '@nocobase/client';
import { observer, useField, useFieldSchema } from '@formily/react';
import { Field } from '@formily/core';
import { ButtonProps, ListProps, List, Card } from 'antd';
const Hello = observer(() => {
const field = useField<Field>();
return (
<div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
{field.title}
</div>
);
});
function Demo() {
const itemConfig = useSchemaInitializerItem();
// 调用插入功能
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
title: itemConfig.title,
'x-component': 'Hello',
});
};
return <SchemaInitializerItem title={itemConfig.title} onClick={handleClick} />;
}
const CustomListGridMenu: FC<SchemaInitializerItemsProps<ButtonProps, ListProps<any>>> = (props) => {
const { items, options, ...others } = props;
return (
<List
{...others}
style={{ marginTop: 20 }}
dataSource={items}
grid={{ gutter: 16, column: 2 }}
renderItem={(item) => (
<List.Item style={{ minWidth: 100, textAlign: 'center' }}>
<SchemaInitializerChild {...item} />
</List.Item>
)}
></List>
);
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Add Block',
// 插入位置
insertPosition: 'beforeEnd',
ItemsComponent: CustomListGridMenu,
items: [
{
name: 'a',
title: 'Item A',
Component: Demo,
},
{
name: 'b',
title: 'Item B',
Component: Demo,
},
],
});
const AddBlockButton = observer(() => {
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializerRender(fieldSchema['x-initializer']);
return render();
});
const Page = observer(
(props) => {
return (
<div>
{props.children}
<AddBlockButton />
</div>
);
},
{ displayName: 'Page' },
);
const Root = () => {
return (
<div>
<SchemaComponent
components={{ Page, Hello, AddBlockButton }}
schema={{
type: 'void',
name: 'page',
'x-component': 'Page',
'x-initializer': 'MyInitializer',
properties: {
hello1: {
type: 'void',
title: 'Test1',
'x-component': 'Hello',
},
hello2: {
type: 'void',
title: 'Test2',
'x-component': 'Hello',
},
},
}}
></SchemaComponent>
</div>
);
};
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add(myInitializer);
this.app.router.add('root', {
path: '/',
Component: Root,
});
}
}
const app = new Application({
router: {
type: 'memory',
initialEntries: ['/'],
},
plugins: [MyPlugin],
designable: true,
});
export default app.getRootComponent();

61
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-options-item-children.tsx Normal file
View File

@ -0,0 +1,61 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaInitializer, SchemaInitializerItem } from '@nocobase/client';
import { appOptions } from './schema-initializer-common';
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
type: 'itemGroup',
title: '静态 children',
children: [
{
name: 'a1',
type: 'item',
title: 'A 1',
onClick: () => {
alert('a-1');
},
},
{
name: 'a2',
type: 'item',
title: 'A 2',
},
],
},
{
name: 'a',
type: 'itemGroup',
title: '动态 children',
useChildren() {
return [
{
name: 'a1',
type: 'item',
title: 'A 1',
onClick: () => {
alert('a-1');
},
},
{
name: 'a2',
type: 'item',
title: 'A 2',
},
];
},
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

34
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-options-item-define.tsx Normal file
View File

@ -0,0 +1,34 @@
/**
* defaultShowCode: true
*/
import React from 'react';
import { Application, SchemaInitializer, SchemaInitializerItem } from '@nocobase/client';
import { appOptions } from './schema-initializer-common';
const Demo = () => {
// 最终渲染 `SchemaInitializerItem`
return <SchemaInitializerItem title="Component Demo" />;
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
Component: Demo, // 通过 Component 定义
},
{
name: 'b',
type: 'item', // 通过 `type` 定义，底层对应着 `SchemaInitializerItem` 组件
title: 'type Demo',
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

40
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-options-item-props.tsx Normal file
View File

@ -0,0 +1,40 @@
/**
* defaultShowCode: true
*/
import React from 'react';
import { Application, SchemaInitializer, SchemaInitializerItem } from '@nocobase/client';
import { appOptions } from './schema-initializer-common';
const CommonDemo = (props) => {
return <SchemaInitializerItem title={props.title} />;
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
Component: CommonDemo,
componentProps: {
title: 'componentProps',
},
},
{
name: 'b',
Component: CommonDemo,
useComponentProps() {
return {
title: 'useComponentProps',
};
},
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

32
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-options-item-visible.tsx Normal file
View File

@ -0,0 +1,32 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaInitializer } from '@nocobase/client';
import { appOptions } from './schema-initializer-common';
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
type: 'item',
title: 'Demo A',
},
{
name: 'b',
type: 'item',
title: 'Demo B',
useVisible() {
return false;
},
},
],
});
const app = new Application({
...appOptions,
schemaInitializers: [myInitializer],
});
export default app.getRootComponent();

111
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-popover.tsx Normal file
View File

@ -0,0 +1,111 @@
import React from 'react';
import {
Application,
Plugin,
SchemaComponent,
SchemaInitializer,
useDesignable,
useSchemaInitializerRender,
} from '@nocobase/client';
import { observer, useField, useFieldSchema } from '@formily/react';
import { Field } from '@formily/core';
import { Button } from 'antd';
const Hello = observer(() => {
const field = useField<Field>();
return (
<div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
{field.title}
</div>
);
});
const MyInitializerComponent = () => {
const { insertBeforeEnd } = useDesignable();
return (
<Button
onClick={() =>
insertBeforeEnd({
type: 'void',
title: Math.random(),
'x-component': 'Hello',
})
}
>
Add block
</Button>
);
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
popover: false,
Component: MyInitializerComponent,
});
const AddBlockButton = observer(() => {
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializerRender(fieldSchema['x-initializer']);
return render();
});
const Page = observer(
(props) => {
return (
<div>
{props.children}
<AddBlockButton />
</div>
);
},
{ displayName: 'Page' },
);
const Root = () => {
return (
<div>
<SchemaComponent
components={{ Page, Hello, AddBlockButton }}
schema={{
type: 'void',
name: 'page',
'x-component': 'Page',
'x-initializer': 'MyInitializer',
properties: {
hello1: {
type: 'void',
title: 'Test1',
'x-component': 'Hello',
},
hello2: {
type: 'void',
title: 'Test2',
'x-component': 'Hello',
},
},
}}
></SchemaComponent>
</div>
);
};
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add(myInitializer);
this.app.router.add('root', {
path: '/',
Component: Root,
});
}
}
const app = new Application({
router: {
type: 'memory',
initialEntries: ['/'],
},
plugins: [MyPlugin],
designable: true,
});
export default app.getRootComponent();

127
packages/core/client/docs/en-US/core/ui-schema/demos/schema-initializer-render.tsx Normal file
View File

@ -0,0 +1,127 @@
import React from 'react';
import {
Application,
Plugin,
SchemaComponent,
SchemaInitializer,
SchemaInitializerItem,
useSchemaInitializer,
useSchemaInitializerItem,
useSchemaInitializerRender,
} from '@nocobase/client';
import { observer, useField, useFieldSchema } from '@formily/react';
import { Field } from '@formily/core';
const Hello = observer(() => {
const field = useField<Field>();
return (
<div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
{field.title}
</div>
);
});
function Demo() {
const itemConfig = useSchemaInitializerItem();
// 调用插入功能
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
title: itemConfig.title,
'x-component': 'Hello',
});
};
return <SchemaInitializerItem title={itemConfig.title} onClick={handleClick} />;
}
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Add Block',
// 插入位置
insertPosition: 'beforeEnd',
items: [
{
name: 'a',
title: 'Item A',
Component: Demo,
},
{
name: 'b',
title: 'Item B',
Component: Demo,
},
],
});
const AddBlockButton = observer(() => {
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializerRender(fieldSchema['x-initializer']);
return (
<div>
<div>{render()}</div>
<div>可以进行参数的二次覆盖：{render({ style: { color: 'red' } })}</div>
</div>
);
});
const Page = observer(
(props) => {
return (
<div>
{props.children}
<AddBlockButton />
</div>
);
},
{ displayName: 'Page' },
);
const Root = () => {
return (
<div>
<SchemaComponent
components={{ Page, Hello, AddBlockButton }}
schema={{
type: 'void',
name: 'page',
'x-component': 'Page',
'x-initializer': 'MyInitializer',
properties: {
hello1: {
type: 'void',
title: 'Test1',
'x-component': 'Hello',
},
hello2: {
type: 'void',
title: 'Test2',
'x-component': 'Hello',
},
},
}}
></SchemaComponent>
</div>
);
};
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add(myInitializer);
this.app.router.add('root', {
path: '/',
Component: Root,
});
}
}
const app = new Application({
router: {
type: 'memory',
initialEntries: ['/'],
},
plugins: [MyPlugin],
designable: true,
});
export default app.getRootComponent();

48
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-common.tsx Normal file
View File

@ -0,0 +1,48 @@
import { ApplicationOptions, CardItem, Grid, Plugin, SchemaComponent } from '@nocobase/client';
import React from 'react';
const Hello = () => {
return <h1>Hello, world!</h1>;
};
const HelloPage = () => {
return (
<div>
<SchemaComponent
schema={{
name: 'root',
type: 'void',
'x-component': 'Grid',
properties: {
hello: Grid.wrap({
type: 'void',
'x-settings': 'mySettings',
'x-decorator': 'CardItem',
'x-component': 'Hello',
}),
},
}}
/>
</div>
);
};
class PluginHello extends Plugin {
async load() {
this.router.add('hello', {
path: '/',
Component: HelloPage,
});
}
}
const appOptions: ApplicationOptions = {
router: {
type: 'memory',
},
designable: true,
components: { Grid, CardItem, Hello },
plugins: [PluginHello],
};
export { appOptions };

66
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-action-modal.tsx Normal file
View File

@ -0,0 +1,66 @@
/**
* defaultShowCode: true
*/
import React from 'react';
import {
Application,
FormItem,
Input,
SchemaSettings,
SchemaSettingsActionModalItem,
useDesignable,
} from '@nocobase/client';
import { appOptions } from './schema-settings-common';
import { ISchema, useField } from '@formily/react';
export const SchemaSettingsBlockTitleItem = function BlockTitleItem() {
const filed = useField();
const { patch } = useDesignable();
return (
<SchemaSettingsActionModalItem
title={'Edit block title'}
schema={
{
type: 'object',
title: 'Edit block title',
properties: {
title: {
title: 'Block title',
type: 'string',
default: filed.decoratorProps?.title,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
} as ISchema
}
onSubmit={({ title }) => {
patch({
'x-decorator-props': {
title,
},
});
}}
/>
);
};
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'blockTitle',
Component: SchemaSettingsBlockTitleItem,
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
app.addComponents({ FormItem, Input });
export default app.getRootComponent();

68
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-divider.tsx Normal file
View File

@ -0,0 +1,68 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaSettings } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
type: 'itemGroup',
componentProps: {
title: 'group A',
},
children: [
{
name: 'a1',
type: 'item',
componentProps: {
title: 'A1',
},
},
{
name: 'a2',
type: 'item',
componentProps: {
title: 'A2',
},
},
],
},
{
name: 'divider',
type: 'divider',
},
{
name: 'b',
type: 'itemGroup',
componentProps: {
title: 'group B',
},
children: [
{
name: 'b1',
type: 'item',
componentProps: {
title: 'B1',
},
},
{
name: 'b2',
type: 'item',
componentProps: {
title: 'B2',
},
},
],
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
export default app.getRootComponent();

64
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-group.tsx Normal file
View File

@ -0,0 +1,64 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaSettings } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
type: 'itemGroup',
componentProps: {
title: 'group A',
},
children: [
{
name: 'a1',
type: 'item',
componentProps: {
title: 'A1',
},
},
{
name: 'a2',
type: 'item',
componentProps: {
title: 'A2',
},
},
],
},
{
name: 'b',
type: 'itemGroup',
componentProps: {
title: 'group B',
},
children: [
{
name: 'b1',
type: 'item',
componentProps: {
title: 'B1',
},
},
{
name: 'b2',
type: 'item',
componentProps: {
title: 'B2',
},
},
],
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
export default app.getRootComponent();

76
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-item.tsx Normal file
View File

@ -0,0 +1,76 @@
/**
* defaultShowCode: true
*/
import React, { FC, useState } from 'react';
import { Application, SchemaSettings, SchemaSettingsItem, useDesignable } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
import { observer, useField } from '@formily/react';
import { Button, Input, Space } from 'antd';
const MarkdownEdit = () => {
const field = useField();
return (
<SchemaSettingsItem
title="Edit markdown"
onClick={() => {
field.editable = true;
}}
/>
);
};
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'markdown',
Component: MarkdownEdit,
},
],
});
const Hello: FC<{ content?: string }> = observer((props) => {
const field = useField();
const { content } = props;
const [inputVal, setInputVal] = useState(content);
const { patch } = useDesignable();
return field.editable ? (
<Space>
<Input placeholder="input value" value={inputVal} onChange={(e) => setInputVal(e.target.value)} />
<Space>
<Button
onClick={() => {
field.editable = false;
setInputVal(content);
}}
>
Cancel
</Button>
<Button
type="primary"
onClick={() => {
field.editable = false;
patch({
'x-component-props': {
content: inputVal,
},
});
}}
>
Submit
</Button>
</Space>
</Space>
) : (
<h1>{content}</h1>
);
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
app.addComponents({ Hello });
export default app.getRootComponent();

66
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-modal.tsx Normal file
View File

@ -0,0 +1,66 @@
/**
* defaultShowCode: true
*/
import { ISchema } from '@formily/react';
import {
Application,
FormItem,
Input,
SchemaSettings,
SchemaSettingsModalItem,
useSchemaSettings,
} from '@nocobase/client';
import React from 'react';
import { appOptions } from './schema-settings-common';
export const SchemaSettingsBlockTitleItem = function BlockTitleItem() {
const { dn } = useSchemaSettings();
return (
<SchemaSettingsModalItem
title={'Edit block title'}
schema={
{
type: 'object',
title: 'Edit block title',
properties: {
title: {
title: 'Block title',
type: 'string',
default: dn.getSchemaAttribute('x-decorator-props.title'),
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-compile-omitted': ['default'],
},
},
} as ISchema
}
onSubmit={({ title }) => {
dn.deepMerge({
'x-decorator-props': {
title,
},
});
}}
/>
);
};
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'blockTitle',
Component: SchemaSettingsBlockTitleItem,
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
app.addComponents({ FormItem, Input });
export default app.getRootComponent();

28
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-remove.tsx Normal file
View File

@ -0,0 +1,28 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaSettings } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'remove',
type: 'remove',
componentProps: {
removeParentsIfNoChildren: true,
breakRemoveOn(s) {
return s['x-component'] === 'Grid'; // 其顶级是 Grid，这一层级不能删
},
},
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
export default app.getRootComponent();

82
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-select.tsx Normal file
View File

@ -0,0 +1,82 @@
/**
* defaultShowCode: true
*/
import React, { FC } from 'react';
import { Application, SchemaSettings, SchemaSettingsSelectItem, useDesignable } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
import { observer, useField } from '@formily/react';
import { Table } from 'antd';
const PageSize = () => {
const { patch } = useDesignable();
const filed = useField();
return (
<SchemaSettingsSelectItem
title={'Page Size'}
options={[
{ label: '5', value: 5 },
{ label: '10', value: 10 },
{ label: '15', value: 15 },
]}
value={filed.componentProps?.pageSize || 5}
onChange={(v) => {
patch({
'x-component-props': {
pageSize: v,
},
});
}}
/>
);
};
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'pageSize',
Component: PageSize,
},
],
});
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
const Hello: FC<{ pageSize: number }> = observer((props) => {
return (
<Table
columns={[
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
]}
pagination={{ pageSize: props.pageSize || 5, total: data.length }}
dataSource={data}
/>
);
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
app.addComponents({ Hello });
export default app.getRootComponent();

64
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-sub-menu.tsx Normal file
View File

@ -0,0 +1,64 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaSettings } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
type: 'subMenu',
componentProps: {
title: 'Sub Menu A',
},
children: [
{
name: 'a1',
type: 'item',
componentProps: {
title: 'A1',
},
},
{
name: 'a2',
type: 'item',
componentProps: {
title: 'A2',
},
},
],
},
{
name: 'b',
type: 'subMenu',
componentProps: {
title: 'Sub Menu B',
},
children: [
{
name: 'b1',
type: 'item',
componentProps: {
title: 'B1',
},
},
{
name: 'b2',
type: 'item',
componentProps: {
title: 'B2',
},
},
],
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
export default app.getRootComponent();

74
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-components-switch.tsx Normal file
View File

@ -0,0 +1,74 @@
/**
* defaultShowCode: true
*/
import React, { FC } from 'react';
import { Application, SchemaSettings, SchemaSettingsSwitchItem, useDesignable } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
import { observer, useField } from '@formily/react';
import { Form, Input } from 'antd';
const FormItemRequired = () => {
const { patch } = useDesignable();
const filed = useField();
return (
<SchemaSettingsSwitchItem
title={'Required - 组件方式'}
checked={!!filed.componentProps?.required}
onChange={(v) => {
patch({
'x-component-props': {
required: v,
},
});
}}
/>
);
};
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'required',
Component: FormItemRequired,
},
{
name: 'required2',
type: 'switch',
useComponentProps() {
const { patch } = useDesignable();
const filed = useField();
return {
title: 'Required - type 方式',
checked: !!filed.componentProps?.required,
onChange(v) {
patch({
'x-component-props': {
required: v,
},
});
},
};
},
},
],
});
const Hello: FC<{ required: boolean }> = observer((props) => {
return (
<Form>
<Form.Item name="note" label="Note" rules={[{ required: props.required }]}>
<Input />
</Form.Item>
</Form>
);
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
app.addComponents({ Hello });
export default app.getRootComponent();

68
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-options-item-children.tsx Normal file
View File

@ -0,0 +1,68 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaSettings } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
type: 'itemGroup',
componentProps: {
title: '静态 children',
},
children: [
{
name: 'a1',
type: 'item',
componentProps: {
title: 'A 1',
onClick: () => {
alert('a-1');
},
},
},
{
name: 'a2',
type: 'item',
componentProps: {
title: 'A 2',
},
},
],
},
{
name: 'a',
type: 'itemGroup',
componentProps: {
title: '动态 children',
},
useChildren() {
return [
{
name: 'a1',
type: 'item',
title: 'A 1',
onClick: () => {
alert('a-1');
},
},
{
name: 'a2',
type: 'item',
title: 'A 2',
},
];
},
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
export default app.getRootComponent();

35
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-options-item-define.tsx Normal file
View File

@ -0,0 +1,35 @@
/**
* defaultShowCode: true
*/
import React from 'react';
import { Application, SchemaSettings, SchemaSettingsItem } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
const Demo = () => {
// 最终渲染 `SchemaInitializerItem`
return <SchemaSettingsItem title="Component Demo" />;
};
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
Component: Demo, // 通过 Component 定义
},
{
name: 'b',
type: 'item', // 通过 `type` 定义，底层对应着 `SchemaInitializerItem` 组件
componentProps: {
title: 'type Demo',
},
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
export default app.getRootComponent();

39
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-options-item-props.tsx Normal file
View File

@ -0,0 +1,39 @@
/**
* defaultShowCode: true
*/
import React from 'react';
import { Application, SchemaSettings, SchemaSettingsItem } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
const CommonDemo = (props) => {
return <SchemaSettingsItem title={props.title} />;
};
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
Component: CommonDemo,
componentProps: {
title: 'componentProps',
},
},
{
name: 'b',
Component: CommonDemo,
useComponentProps() {
return {
title: 'useComponentProps',
};
},
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
export default app.getRootComponent();

35
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-options-item-visible.tsx Normal file
View File

@ -0,0 +1,35 @@
/**
* defaultShowCode: true
*/
import { Application, SchemaSettings } from '@nocobase/client';
import { appOptions } from './schema-settings-common';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
type: 'item',
componentProps: {
title: 'Demo A',
},
},
{
name: 'b',
type: 'item',
componentProps: {
title: 'Demo B',
},
useVisible() {
return false;
},
},
],
});
const app = new Application({
...appOptions,
schemaSettings: [mySettings],
});
export default app.getRootComponent();

151
packages/core/client/docs/en-US/core/ui-schema/demos/schema-settings-render.tsx Normal file
View File

@ -0,0 +1,151 @@
import { ISchema, useField, useFieldSchema } from '@formily/react';
import {
Application,
CardItem,
FormItem,
Grid,
Input,
Plugin,
SchemaComponent,
SchemaSettings,
SchemaSettingsModalItem,
createDesignable,
useAPIClient,
useSchemaComponentContext,
useSchemaSettings,
useSchemaSettingsRender,
} from '@nocobase/client';
import React, { useMemo } from 'react';
class PluginHello extends Plugin {
async load() {
this.router.add('hello', {
path: '/',
Component: HelloPage,
});
}
}
export const SchemaSettingsBlockTitleItem = function BlockTitleItem() {
const { dn } = useSchemaSettings();
console.log(dn.current);
return (
<SchemaSettingsModalItem
title={'Edit block title'}
schema={
{
type: 'object',
title: 'Edit block title',
properties: {
title: {
title: 'Block title',
type: 'string',
default: dn.getSchemaAttribute('x-decorator-props.title'),
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-compile-omitted': ['default'],
},
},
} as ISchema
}
onSubmit={({ title }) => {
dn.shallowMerge({
'x-decorator-props': {
title,
},
});
}}
/>
);
};
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'blockTitle',
Component: SchemaSettingsBlockTitleItem,
},
],
});
const Hello = (props) => {
return (
<h1>
Hello, world! <Demo />
{props.children}
</h1>
);
};
const Demo = () => {
const fieldSchema = useFieldSchema();
const field = useField();
const api = useAPIClient();
const { refresh } = useSchemaComponentContext();
const dn = useMemo(
() =>
createDesignable({
current: fieldSchema.parent,
model: field.parent,
api,
refresh,
}),
[],
);
const { render, exists } = useSchemaSettingsRender(fieldSchema['x-settings'], {
fieldSchema: dn.current,
field: dn.model,
dn,
});
return (
<div>
<div>{render()}</div>
<div>可以进行参数的二次覆盖：{render({ style: { color: 'red' } })}</div>
</div>
);
};
const HelloPage = () => {
return (
<div>
<SchemaComponent
schema={{
name: 'root',
type: 'void',
'x-decorator': 'CardItem',
'x-decorator-props': {
title: 'aaa',
},
properties: {
hello1: {
type: 'void',
'x-settings': 'mySettings',
'x-decorator': 'CardItem',
'x-component': 'Hello',
},
hello2: {
type: 'void',
'x-settings': 'mySettings',
'x-decorator': 'CardItem',
'x-component': 'Hello',
},
},
}}
/>
</div>
);
};
const app = new Application({
schemaSettings: [mySettings],
router: {
type: 'memory',
},
designable: true,
components: { FormItem, Input, Grid, CardItem, Hello },
plugins: [PluginHello],
});
export default app.getRootComponent();

791
packages/core/client/docs/en-US/core/ui-schema/designable.md Normal file
View File

@ -0,0 +1,791 @@
# Designable
## Designable
对 Schema 节点进行增、删、改操作，并且提供了事件触发机制，用于将数据同步到服务端。
```tsx | pure
interface Options {
current: Schema;
api?: APIClient;
onSuccess?: any;
refresh?: () => void;
t?: any;
}
interface InsertAdjacentOptions {
wrap?: (s: ISchema) => ISchema;
removeParentsIfNoChildren?: boolean;
breakRemoveOn?: ISchema | BreakFn;
onSuccess?: any;
}
class Designable {
constructor(options: Options ) { }
loadAPIClientEvents(): void;
on(name: 'insertAdjacent' | 'remove' | 'error' | 'patch' | 'batchPatch', listener: any): void
emit(name: 'insertAdjacent' | 'remove' | 'error' | 'patch' | 'batchPatch', ...args: any[]): Promise<any>
refresh(): void
recursiveRemoveIfNoChildren(schema?: Schema, options?: RecursiveRemoveOptions): Schema;
remove(schema?: Schema, options?: RemoveOptions): Promise<any>
removeWithoutEmit(schema?: Schema, options?: RemoveOptions): Schema
insertAdjacent(position: Position, schema: ISchema, options?: InsertAdjacentOptions): void | Promise<any>
insertBeforeBeginOrAfterEnd(schema: ISchema, options?: InsertAdjacentOptions): void
insertBeforeBegin(schema: ISchema, options?: InsertAdjacentOptions): void
insertAfterBegin(schema: ISchema, options?: InsertAdjacentOptions): void
insertBeforeEnd(schema: ISchema, options?: InsertAdjacentOptions): Promise<any>
insertAfterEnd(schema: ISchema, options?: InsertAdjacentOptions): void
}
```
### 构造函数
- 参数讲解
- `current`：需要操作的 Schema 节点
- `api`：用于发起后端请求的 [APIClient](https://docs.nocobase.com/api/sdk) 实例
- `onSuccess`：后端接口请求成功后的回调
- `refresh`：用于更新节点后，刷新页面
- `t`：`useTranslation()` 的返回值
- 示例
```tsx | pure
const schema = new Schema({
type: 'void',
name: 'hello',
'x-component': 'div',
})
const dn = new Designable({ current: schema });
```
### Schema 操作方法
```tsx | pure
const schema = new Schema({
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
}
}
}
}
});
const b = schema.b;
const dn = createDesignable({
current: b,
})
console.log(schema.toJSON());
```
```tsx
import React from 'react';
import { Schema } from '@formily/json-schema';
import { createDesignable } from '@nocobase/client';
const schema = new Schema({
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
},
},
},
},
});
const b = schema.properties['b'];
const dn = createDesignable({
current: b,
});
export default () => <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre>;
```
#### remove
移除当前节点
```tsx | pure
dn.remove();
console.log(schema.toJSON());
```
```tsx
import React from 'react';
import { Schema } from '@formily/json-schema';
import { createDesignable } from '@nocobase/client';
const schema = new Schema({
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
},
},
},
},
});
const b = schema.properties['b'];
const dn = createDesignable({
current: b,
});
dn.remove();
export default () => <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre>;
```
```diff
{
type: 'void',
name: 'a',
properties: {
- b: {
- type: 'void',
- properties: {
- c: {
- type: 'void',
- }
- }
- }
}
}
```
#### insertBeforeBegin
在当前节点的前面插入，并会触发 `insertAdjacent` 事件。
```tsx | pure
dn.insertBeforeBegin({
type: 'void',
name: 'd',
});
console.log(schema.toJSON());
```
```tsx
import React from 'react';
import { Schema } from '@formily/json-schema';
import { createDesignable } from '@nocobase/client';
const schema = new Schema({
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
},
},
},
},
});
const b = schema.properties['b'];
const dn = createDesignable({
current: b,
});
dn.insertBeforeBegin({
type: 'void',
name: 'd',
});
export default () => <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre>;
```
```diff
{
type: 'void',
name: 'a',
properties: {
+ d: {
+ type: 'void',
+ },
b: {
type: 'void',
properties: {
c: {
type: 'void',
}
}
}
}
}
```
#### insertAfterBegin
在当前节点的前面插入，并会触发 `insertAdjacent` 事件。
```tsx | pure
dn.insertAfterBegin({
type: 'void',
name: 'd',
});
console.log(schema.toJSON());
```
```tsx
import React from 'react';
import { Schema } from '@formily/json-schema';
import { createDesignable } from '@nocobase/client';
const schema = new Schema({
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
},
},
},
},
});
const b = schema.properties['b'];
const dn = createDesignable({
current: b,
});
dn.insertAfterBegin({
type: 'void',
name: 'd',
});
export default () => <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre>;
```
```diff
{
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
+ d: {
+ type: 'void',
+ },
c: {
type: 'void',
}
}
}
}
}
```
#### insertBeforeEnd
在当前节点的前面插入，并会触发 `insertAdjacent` 事件。
```tsx | pure
dn.insertBeforeEnd({
type: 'void',
name: 'd',
});
console.log(schema.toJSON());
```
```tsx
import React from 'react';
import { Schema } from '@formily/json-schema';
import { createDesignable } from '@nocobase/client';
const schema = new Schema({
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
},
},
},
},
});
const b = schema.properties['b'];
const dn = createDesignable({
current: b,
});
dn.insertBeforeEnd({
type: 'void',
name: 'd',
});
export default () => <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre>;
```
```diff
{
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
},
+ d: {
+ type: 'void',
+ },
}
}
}
}
```
#### insertAfterEnd
在当前节点的前面插入，并会触发 `insertAdjacent` 事件。
```tsx | pure
dn.insertAfterEnd({
type: 'void',
name: 'd',
});
console.log(schema.toJSON());
```
```tsx
import React from 'react';
import { Schema } from '@formily/json-schema';
import { createDesignable } from '@nocobase/client';
const schema = new Schema({
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
},
},
},
},
});
const b = schema.properties['b'];
const dn = createDesignable({
current: b,
});
dn.insertAfterEnd({
type: 'void',
name: 'd',
});
export default () => <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre>;
```
```diff
{
type: 'void',
name: 'a',
properties: {
b: {
type: 'void',
properties: {
c: {
type: 'void',
}
}
},
+ d: {
+ type: 'void',
+ },
}
}
```
#### insertAdjacent
根据第一个参数决定插入的位置，是前面四个方法的封装。
```tsx | pure
class Designable {
insertAdjacent(position: Position, schema: ISchema, options?: InsertAdjacentOptions): void | Promise<any>
}
```
### 事件监听和 API 请求
- `on` ：添加事件监听的基础方法
- `loadAPIClientEvents`：调用 `on` 方法添加对 `insertAdjacent`、`patch`、`batchPatch`、`remove` 的事件的监听，主要功能是将变更的 Schema 更新到服务端
- `emit`：是根据事件名称，调用之前注册过的方法，具体是由前面讲过的 *插入操作和删除操作* 触发
而 `loadAPIClientEvents()` 并非在初始化时调用，需要手动调用，换而言之，如果不调用 `dn.loadAPIClientEvents()`，则不会将更新发送到服务端，主要是简化在单测或者 DEMO 环境对服务端的 Mock。
## 工具函数
### createDesignable()
对 `new Designable()` 的简单封装。
```tsx | pure
function createDesignable(options: CreateDesignableProps) {
return new Designable(options);
}
```
```tsx | pure
const dn = createDesignable({ current: schema });
```
## Hooks
### useFieldSchema()
用户获取当前节点 Schema JSON 对象，更多信息请参考 [formily useFieldSchema()](https://react.formilyjs.org/api/hooks/use-field-schema)。
- 类型
```tsx | pure
import { Schema } from '@formily/json-schema';
const useFieldSchema: () => Schema;
```
- 示例
```tsx
/**
* defaultShowCode: true
*/
import React from 'react';
import { useFieldSchema } from '@formily/react';
import { Application, Plugin, SchemaComponent } from '@nocobase/client';
const Demo = ({ children }) => {
const fieldSchema = useFieldSchema();
return <div style={{ border: '1px solid red' }}>
<pre>{ JSON.stringify(fieldSchema, null, 2)}</pre>
<div style={{ paddingLeft: 20 }}>{children}</div>
</div>
}
const schema = {
type: 'void',
name: 'hello',
'x-component': 'Demo', // 这里是 Demo 组件
'properties': {
'world': {
'type': 'void',
'x-component': 'Demo', // 这里也是 Demo 组件
},
}
}
const Root = () => {
return <SchemaComponent components={{ Demo }} schema={schema} />
}
const app = new Application({
providers: [Root]
})
export default app.getRootComponent();
```
### useField()
获取当前节点 Schema 实例，更多信息请参考 [formily useField()](https://react.formilyjs.org/api/hooks/use-field)
- 类型
```tsx | pure
import { GeneralField } from '@formily/core';
const useField: <T = GeneralField>() => T;
```
- 示例
```tsx | pure
const Demo = () => {
const field = useField();
console.log('field', field);
return <div></div>
}
const schema = {
type: 'void',
name: 'hello',
'x-component': 'Demo', // 这里是 Demo 组件
'properties': {
'world': {
'type': 'void',
'x-component': 'Demo', // 这里也是 Demo 组件
},
}
}
const Root = () => {
return <SchemaComponent components={{ Hello }} schema={schema} />
}
```
### useDesignable()
对当前 Schema 节点的修改操作。
- 类型
```tsx | pure
interface InsertAdjacentOptions {
wrap?: (s: ISchema) => ISchema;
removeParentsIfNoChildren?: boolean;
breakRemoveOn?: ISchema | BreakFn;
onSuccess?: any;
}
type Position = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd';
function useDesignable(): {
dn: Designable;
designable: boolean;
reset: () => void;
refresh: () => void;
setDesignable: (value: boolean) => void;
findComponent(component: any): any;
patch: (key: ISchema | string, value?: any) => void
on(name: "error" | "insertAdjacent" | "remove" | "patch" | "batchPatch", listener: any): void
remove(schema?: any, options?: RemoveOptions): void
insertAdjacent(position: Position, schema: ISchema, options?: InsertAdjacentOptions): void
insertBeforeBegin(schema: ISchema): void;
insertAfterBegin(schema: ISchema): void;
insertBeforeEnd(schema: ISchema): void;
insertAfterEnd(schema: ISchema): void;
}
```
- 详细解释
- designable、reset、refresh、setDesignable：这些值继承自 [SchemaComponentContext](https://www.baidu.com)
- dn：是 `Designable` 的实例
- findComponent：用于查找 Schema 中字符串对应真正的组件，如果组件未注册则返回 `null`
- remove：内部调用的是 `dn.remove` 方法
- on：内部调用的是 `dn.on` 方法
- insertAdjacent：插入新的 Schema 节点，内部调用的是 `dn.insertAdjacent` 方法
- position：插入位置
- schema：新的 Schema 节点
- Options
- wrap：对 Schema 的二次处理的回调函数
- removeParentsIfNoChildren：当没有子元素时，删除父元素
- breakRemoveOn：停止删除的判断回调
- onSuccess：插入成功的回调
- insertBeforeBegin：内部调用的是 `dn.insertBeforeBegin` 方法
- insertAfterBegin：内部调用的是 `dn.insertAfterBegin` 方法
- insertBeforeEnd：内部调用的是 `dn.insertBeforeEnd` 方法
- insertAfterEnd：内部调用的是 `dn.insertAfterEnd` 方法
- 示例
插入节点。
```tsx
import React from 'react';
import {
SchemaComponentProvider,
SchemaComponent,
useDesignable,
} from '@nocobase/client';
import { observer, Schema, useFieldSchema } from '@formily/react';
import { Button, Space } from 'antd';
import { uid } from '@formily/shared';
const Hello = observer(
(props) => {
const { insertAdjacent } = useDesignable();
const fieldSchema = useFieldSchema();
return (
<div>
<h1>{fieldSchema.name}</h1>
<Space>
<Button
onClick={() => {
insertAdjacent('beforeBegin', {
'x-component': 'Hello',
});
}}
>
before begin
</Button>
<Button
onClick={() => {
insertAdjacent('afterBegin', {
'x-component': 'Hello',
});
}}
>
after begin
</Button>
<Button
onClick={() => {
insertAdjacent('beforeEnd', {
'x-component': 'Hello',
});
}}
>
before end
</Button>
<Button
onClick={() => {
insertAdjacent('afterEnd', {
'x-component': 'Hello',
});
}}
>
after end
</Button>
</Space>
<div style={{ margin: 50 }}>{props.children}</div>
</div>
);
},
{ displayName: 'Hello' },
);
const Page = observer(
(props) => {
return <div>{props.children}</div>;
},
{ displayName: 'Page' },
);
export default () => {
return (
<SchemaComponentProvider components={{ Page, Hello }}>
<SchemaComponent
schema={{
type: 'void',
name: 'page',
'x-component': 'Page',
properties: {
hello1: {
type: 'void',
'x-component': 'Hello',
},
},
}}
/>
</SchemaComponentProvider>
);
};
```
部分更新。
```tsx
import React from 'react';
import {
SchemaComponentProvider,
SchemaComponent,
useDesignable,
} from '@nocobase/client';
import { observer, Schema, useField, useFieldSchema } from '@formily/react';
import { FormItem } from '@formily/antd-v5';
import { Button } from 'antd';
import { uid } from '@formily/shared';
const Hello = observer(
(props) => {
const fieldSchema = useFieldSchema();
const field = useField();
const { dn } = useDesignable();
return (
<div>
<h1>{field.title}</h1>
{ JSON.stringify(props) }
<br/>
{ JSON.stringify(field.componentProps) }
<br/>
{ JSON.stringify(field.decoratorProps) }
<br/>
{ JSON.stringify(fieldSchema.toJSON()) }
<br/>
<Button onClick={() => {
dn.shallowMerge({
title: uid(),
'x-component-props': {a: uid(), },
'x-decorator-props': {b: uid(), },
});
}}>shallowMerge</Button>
<Button onClick={() => {
dn.deepMerge({
title: uid(),
'x-component-props': {c: uid() },
'x-decorator-props': {d: uid(), },
});
}}>deepMerge</Button>
</div>
);
},
{ displayName: 'Hello' },
);
const Page = observer(
(props) => {
return <div>{props.children}</div>;
},
{ displayName: 'Page' },
);
export default () => {
return (
<SchemaComponentProvider components={{ FormItem, Page, Hello }}>
<SchemaComponent
schema={{
type: 'void',
name: 'page',
'x-component': 'Page',
properties: {
hello1: {
type: 'string',
title: 'Title 1',
'x-decorator': 'FormItem',
'x-component': 'Hello',
},
},
}}
/>
</SchemaComponentProvider>
);
};
```

208
packages/core/client/docs/en-US/core/ui-schema/schema-component.md Normal file
View File

@ -0,0 +1,208 @@
# SchemaComponent
## Context
### SchemaComponentContext
```tsx | pure
interface SchemaComponentContext {
scope?: any;
components?: SchemaReactComponents;
refresh?: () => void;
reset?: () => void;
designable?: boolean;
setDesignable?: (value: boolean) => void;
}
```
Schema 渲染的上下文。
- `scope`：Schema 中变量的映射
- `components`: Schema 中组件的映射
- `refresh`：触发 React 重新渲染的工具函数
- `reset`：重置整个 Schema 节点
- `designable`：是否显示设计器，默认 `false`
- `setDesignable`：用于切换 `designable` 的值
## Hooks
### useSchemaComponentContext()
用于获取 `SchemaComponentContext` 的值，是 `useContext(SchemaComponentContext)` 的封装。
## 组件
### SchemaComponentProvider
其是对 `SchemaComponentContext.Provider` 和 [FormProvider ](https://react.formilyjs.org/api/components/form-provider)的封装，并内置在 `Application` 中，并且会将 `app.components` 和 `app.scopes` 传递过去，所以一般情况下 *不需要关注* 此组件。
- props
```tsx | pure
interface SchemaComponentProviderProps {
designable?: boolean;
form?: Form;
scope?: any;
components?: SchemaReactComponents;
}
```
- 详细解释
- `designable`：`SchemaComponentContext` 中 `designable` 的默认值
- `form`：NocoBase 的 Schema 能力是基于 formily 的 `FormProvider` 提供的，form 是其参数，默认为 `createForm()`
- `scope`：Schema 中所用到的变量，会通过 `SchemaComponentContext` 进行传递
- `components`：Schema 中所用到的组件，会通过 `SchemaComponentContext` 进行传递
### SchemaComponent
用于渲染 Schema，此组件必须和 `SchemaComponentProvider` 一起使用，因为 `SchemaComponentProvider` 提供了 [FormProvider](https://react.formilyjs.org/api/components/form-provider) 作为渲染 Schema 的根节点。
- Props
```tsx | pure
type SchemaComponentProps = (ISchemaFieldProps | IRecursionFieldProps) & {
memoized?: boolean;
components?: SchemaReactComponents;
scope?: any;
}
```
- 详细解释
- `memoized`：当为 `true` 时，会对每层的 Schema 使用 `useMemo()` 进行处理
- `components`：同 `SchemaComponentProvider` 的 `components`
- `scope`: 同 `SchemaComponentProvider` 的 `components`
## 综合示例
结合 `SchemaComponentProvider`、 `useSchemaComponentContext()` 和 `SchemaComponent`。
```tsx
/**
* defaultShowCode: true
*/
import { SchemaComponentProvider, useSchemaComponentContext, SchemaComponent, } from '@nocobase/client';
const Hello = () => {
const { designable, setDesignable } = useSchemaComponentContext();
return <div>
<div style={{ padding: 20, border: designable ? '1px solid red' : undefined }} contentEditable={designable}>hello world</div>
<button onClick={() => setDesignable(!designable) }>change designable</button>
</div>;
}
const schema = {
type: 'void',
name: 'hello',
'x-component': 'Hello',
}
const Demo = () => {
return <SchemaComponent schema={schema} />
}
const Root = () => {
return <SchemaComponentProvider components={{ Hello }}>
<Demo />
</SchemaComponentProvider>
}
export default Root;
```
使用 `new Application()` 的方式，其内置了 `SchemaComponentProvider` ，我们可以如下操作：
```tsx
/**
* defaultShowCode: true
*/
import { Application, Plugin, useSchemaComponentContext, SchemaComponent } from '@nocobase/client';
const Hello = () => {
const { designable, setDesignable } = useSchemaComponentContext();
return <div>
<div style={{ padding: 20, border: designable ? '1px solid red' : undefined }} contentEditable={designable}>hello world</div>
<button onClick={() => setDesignable(!designable) }>change designable</button>
</div>;
}
const schema = {
type: 'void',
name: 'hello',
'x-component': 'Hello',
}
const HomePage = () => {
return <SchemaComponent components={{ Hello }} schema={schema} />
}
class MyPlugin extends Plugin {
async load() {
this.app.addComponents({ Hello });
this.app.router.add('home', {
path: '/',
Component: HomePage,
})
}
}
const app = new Application({
router: {
type: 'memory',
initialEntries: ['/'],
},
plugins: [MyPlugin],
})
export default app.getRootComponent();
```
### SchemaComponentOptions
在应用中，会有很多层级的嵌套，每一层都可能提供自己的组件和 scope，此组件就是为了层层传递 Schema 所需的 `components` 和 `scope` 的。
- props
```tsx | pure
interface SchemaComponentOptionsProps {
scope?: any;
components?: SchemaReactComponents;
}
```
- 示例
```tsx
/**
* defaultShowCode: true
*/
import { SchemaComponentProvider, useSchemaComponentContext, SchemaComponent, SchemaComponentOptions } from '@nocobase/client';
const World = () => {
return <div>world</div>
}
const Hello = ({ children }) => {
return <div>
<div>hello</div>
<SchemaComponentOptions components={{ World }}>{ children }</SchemaComponentOptions>
</div>;
}
const schema = {
type: 'void',
name: 'hello',
'x-component': 'Hello',
properties: {
world: {
type: 'void',
'x-component': 'World',
},
},
}
const Root = () => {
return <SchemaComponentProvider components={{ Hello }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
}
export default Root;
```

186
packages/core/client/docs/en-US/core/ui-schema/schema-initializer-manager.md Normal file
View File

@ -0,0 +1,186 @@
# SchemaInitializerManager
## 实例方法
### schemaInitializerManager.add()
添加 SchemaInitializer 实例。
- 类型
```tsx | pure
class SchemaInitializerManager {
add<P1 = any, P2 = any>(...schemaInitializerList: SchemaInitializer<P1, P2>[]): void
}
```
- 示例
```tsx | pure
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Add block',
items: [
{
name: 'demo',
type: 'item',
title: 'Demo'
}
],
});
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.add(myInitializer);
}
}
```
### schemaInitializerManager.get()
获取一个 SchemaInitializer 实例。
- 类型
```tsx | pure
class SchemaInitializerManager {
get<P1 = ButtonProps, P2 = {}>(name: string): SchemaInitializer<P1, P2> | undefined
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const myInitializer = this.app.schemaInitializerManager.get('MyInitializer');
}
}
```
### schemaInitializerManager.getAll()
获取所有的 SchemaInitializer 实例。
- 类型
```tsx | pure
class SchemaInitializerManager {
getAll(): Record<string, SchemaInitializer<any, any>>
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const list = this.app.schemaInitializerManager.getAll();
}
}
```
### app.schemaInitializerManager.has()
判断是否有存在某个 SchemaInitializer 实例。
- 类型
```tsx | pure
class SchemaInitializerManager {
has(name: string): boolean
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const hasMyInitializer = this.app.schemaInitializerManager.has('MyInitializer');
}
}
```
### schemaInitializerManager.remove()
移除 SchemaInitializer 实例。
- 类型
```tsx | pure
class SchemaInitializerManager {
remove(name: string): void
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
this.app.schemaInitializerManager.remove('MyInitializer');
}
}
```
### schemaInitializerManager.addItem()
添加 SchemaInitializer 实例的 Item 项，其和直接 schemaInitializer.add() 方法的区别是，可以确保在实例存在时才会添加。
- 类型
```tsx | pure
class SchemaInitializerManager {
addItem(schemaInitializerName: string, itemName: string, data: Omit<SchemaInitializerItemType, 'name'>): void
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
// 方式1：先获取，再添加子项，需要确保已注册
const myInitializer = this.app.schemaInitializerManager.get('MyInitializer');
if (myInitializer) {
myInitializer.add('b', { type: 'item', title: 'B' })
}
// 方式2：通过 addItem，内部确保在 MyInitializer 注册时才会添加
this.app.schemaInitializerManager.addItem('MyInitializer', 'b', {
type: 'item',
title: 'B'
})
}
}
```
### schemaInitializerManager.removeItem()
移除 实例的 Item 项，其和直接 schemaInitializer.remove() 方法的区别是，可以确保在实例存在时才会移除。
- 类型
```tsx | pure
class SchemaInitializerManager {
removeItem(schemaInitializerName: string, itemName: string): void
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
// 方式1：先获取，再删除子项，需要确保已注册
const myInitializer = this.app.schemaInitializerManager.get('MyInitializer');
if (myInitializer) {
myInitializer.remove('a')
}
// 方式2：通过 addItem，内部确保在 MyInitializer 注册时才会移除
this.app.schemaInitializerManager.remove('MyInitializer', 'a')
}
}
```

704
packages/core/client/docs/en-US/core/ui-schema/schema-initializer.md Normal file
View File

@ -0,0 +1,704 @@
# SchemaInitializer
## new SchemaInitializer(options)
```tsx | pure
interface SchemaInitializerOptions<P1 = ButtonProps, P2 = {}> {
Component?: ComponentType<P1>;
componentProps?: P1;
style?: React.CSSProperties;
title?: string;
icon?: ReactNode;
items?: SchemaInitializerItemType[];
ItemsComponent?: ComponentType<P2>;
itemsComponentProps?: P2;
itemsComponentStyle?: React.CSSProperties;
insertPosition?: 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd';
designable?: boolean;
wrap?: (s: ISchema) => ISchema;
onSuccess?: (data: any) => void;
insert?: InsertType;
useInsert?: () => InsertType;
popover?: boolean;
popoverProps?: PopoverProps;
}
class SchemaInitializer<P1 = ButtonProps, P2 = {}> {
constructor(options: SchemaInitializerOptions<P1, P2> & { name: string }): SchemaInitializer<P1, P2>;
add(name: string, item: Omit<SchemaInitializerItemType, 'name'>): void
get(nestedName: string): SchemaInitializerItemType | undefined
remove(nestedName: string): void
}
```
### 详细解释
![](../static/KTUWb69kioUg8bxYTAMc2ReDnRg.png)
- name：唯一标识，必填
- Component 相关
- Component：触发组件，默认是 `Button` 组件
- componentProps: 组件属性，默认是 `ButtonProps`
- title： 按钮的文本
- icon：按钮的 icon 属性
- style：组件的样式
- Items 相关
- items：列表项配置
- ItemsComponent：默认是渲染成一个列表的形式，可通过此参数自定义 items
- itemsComponentProps：`ItemsComponent` 的属性
- itemsComponentStyle：`ItemsComponent` 的样式
- popover 组件相关
- popover：是否使用 popover，默认为 `true`
- popoverProps：popover 的属性
- Schema 操作相关
- insertPosition：插入位置，参考：[useDesignable()](/core/ui-schema/designable#usedesignable)
- designable：是否显示设计模式，参考：[useDesignable()](/core/ui-schema/designable#usedesignable)
- wrap：对 Schema 的二次处理，参考：[useDesignable()](/core/ui-schema/designable#usedesignable)
- onSuccess：Schema 更新到服务端后的回调，参考：[useDesignable()](/core/ui-schema/designable#usedesignable)
- insert：自定义 Schema 插入逻辑，默认为 [useDesignable()](/core/ui-schema/designable#usedesignable) 的 `insertAdjacent`
- useInsert：当自定义插入 Schema 的逻辑需要用到 Hooks 时，可以使用此参数
### 示例
#### 基础用法
```tsx | pure
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Add Block',
// 插入位置
insertPosition: 'beforeEnd',
items: [
{
name: 'a',
title: 'Item A',
Component: Demo,
},
],
});
```
<code src="./demos/schema-initializer-basic.tsx"></code>
#### 定制化 `Component`
```tsx | pure
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
Component: (props) => (
<Avatar style={{ cursor: 'pointer' }} {...props}>
C
</Avatar>
),
componentProps: {
size: 'large',
},
items: [
{
name: 'a',
title: 'Item A',
Component: Demo,
}
],
});
```
<code src="./demos/schema-initializer-component.tsx"></code>
#### 不使用 Popover
关于 `useDesignable()` 的说明请参考 [useDesignable](/core/ui-schema/designable#usedesignable)。
```tsx | pure
const schema = {
type: 'void',
title: Math.random(),
'x-component': 'Hello',
};
const MyInitializerComponent = () => {
const { insertBeforeEnd } = useDesignable();
return <Button onClick={() => insertBeforeEnd(schema)}>Add block</Button>
}
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Add block',
popover: false,
Component: MyInitializerComponent,
});
```
<code src="./demos/schema-initializer-popover.tsx"></code>
#### 定制化 Items
```tsx | pure
const CustomListGridMenu: FC<SchemaInitializerItemsProps<ButtonProps, ListProps<any>>> = (props) => {
const { items, options, ...others } = props;
return (
<List
{...others}
style={{ marginTop: 20 }}
dataSource={items}
grid={{ gutter: 16, column: 2 }}
renderItem={(item) => (
<List.Item style={{ minWidth: 100, textAlign: 'center' }}>
<SchemaInitializerChild {...item} />
</List.Item>
)}
></List>
);
};
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
ItemsComponent: CustomListGridMenu,
items: [
{
name: 'a',
title: 'Item A',
Component: Demo,
}
],
});
```
<code src="./demos/schema-initializer-items.tsx"></code>
## options.items 配置详解
### 类型
```tsx | pure
interface SchemaInitializerComponentCommonProps {
title?: string;
schema?: ISchema;
style?: React.CSSProperties;
className?: string;
}
interface SchemaInitializerItemBaseType<T = {}> extends SchemaInitializerComponentCommonProps {
name: string;
sort?: number;
type?: string;
Component?: string | ComponentType<T>;
componentProps?: Omit<T, 'children'>;
useComponentProps?: () => Omit<T, 'children'>;
useVisible?: () => boolean;
children?: SchemaInitializerItemType[];
useChildren?: () => SchemaInitializerItemType[];
[index: string]: any;
}
```
### 两种定义方式：`Component` 和 `type`
- 通过 `Component` 定义
```tsx | pure
const Demo = () => {
// 最终渲染 `SchemaInitializerItem`
return <SchemaInitializerItem title='Demo' />
}
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
items: [
{
name: 'a',
Component: Demo, // 通过 Component 定义
}
],
});
```
- 通过 `type` 定义
NocoBase 内置了一些常用的 `type`，例如 `type: 'item'`，相当于 `Component: SchemaInitializerItem`。
更多内置类型，请参考：[内置组件和类型](/core/ui-schema/schema-initializer#%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6%E5%92%8C%E7%B1%BB%E5%9E%8B)
```tsx | pure
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
items: [
{
name: 'a',
type: 'item',
title: 'Demo'
}
],
});
```
<code src="./demos/schema-initializer-options-item-define.tsx"></code>
### `children` 和动态方式 `useChildren`
对于某些组件而言是有子列表项的，例如 `type: 'itemGroup'`，那么我们使用 children 属性，同时考虑到某些场景下 children 是动态的，需要从 Hooks 里面获取，那么就可以通过 `useChildren` 来定义。
<code src="./demos/schema-initializer-options-item-children.tsx"></code>
### 动态显示隐藏 `useVisible`
<code src="./demos/schema-initializer-options-item-visible.tsx"></code>
### 组件属性 `componentProps` 和动态属性 `useComponentProps`
对于一些通用组件，我们可以通过 `componentProps` 来定义组件属性，同时考虑到某些场景下组件属性是动态的，需要从 Hooks 里面获取，那么就可以通过 `useComponentProps` 来定义。
当然也可以不使用这两个属性，直接封装成一个组件，然后通过 `Component` 来定义。
<code src="./demos/schema-initializer-options-item-props.tsx"></code>
### 公共属性和组件属性
```tsx | pure
{
name: 'demo',
title: 'Demo',
foo: 'bar',
Component: Demo,
componentProps: {
zzz: 'xxx',
},
}
```
从上面的示例中我么看到，从配置项中获取组件组件所需的数据有两个方式：
- 组件属性：通过 `componentProps` 来定义，例如 `zzz: 'xxx'`
- 公共属性：将属性直接定义在配置项上，例如 `foo: 'bar'`、`name`、`title`
在获取上
- `componentProps` 定义的数据会被传递给组件的 `props`
- 直接定义在配置项上的数据会则需要通过 [useSchemaInitializerItem()](/core/ui-schema/schema-initializer#useschemainitializeritem) 获取
```tsx | pure
const Demo = (props) => {
console.log(props); // { zzz: 'xxx' }
const { foo } = useSchemaInitializerItem(); // { foo: 'bar' }
}
```
## 实例方法
```tsx | pure
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
title: 'item a',
type: 'itemGroup',
children: [
{
name: 'a1',
title: 'item a1',
}
],
},
],
});
```
```tsx
import { SchemaInitializer, Application, useSchemaInitializerRender } from '@nocobase/client';
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
title: 'item a',
type: 'itemGroup',
children: [
{
name: 'a1',
title: 'item a1',
type: 'item',
}
],
},
],
});
const Root = () => {
const { render } = useSchemaInitializerRender('MyInitializer');
return render();
}
const app = new Application({
schemaInitializers: [myInitializer],
providers: [Root],
designable: true,
});
export default app.getRootComponent();
```
### schemaInitializer.add()
用于新增 Item，另一种添加方式参考 [schemaInitializerManager.addItem()](/core/ui-schema/schema-initializer-manager#schemainitializermanageradditem);
- 类型
```tsx | pure
class SchemaInitializer {
add(name: string, item: Omit<SchemaInitializerItemType, 'name'>): void
}
```
- 参数说明
第一个参数是 name，作为唯一标识，用于增删改查，并且 `name` 支持 `.` 用于分割层级。
- 示例
```tsx | pure
myInitializer.add('b', {
type: 'item',
title: 'item b',
})
myInitializer.add('a.a2', {
type: 'item',
title: 'item a2',
})
```
```tsx
import { SchemaInitializer, Application, useSchemaInitializerRender } from '@nocobase/client';
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
title: 'item a',
type: 'itemGroup',
children: [
{
name: 'a1',
title: 'item a1',
type: 'item',
}
],
},
],
});
myInitializer.add('b', {
type: 'item',
title: 'item b',
})
myInitializer.add('a.a2', {
type: 'item',
title: 'item a2',
})
const Root = () => {
const { render } = useSchemaInitializerRender('MyInitializer');
return render();
}
const app = new Application({
schemaInitializers: [myInitializer],
providers: [Root],
designable: true,
});
export default app.getRootComponent();
```
### schemaInitializer.get()
- 类型
```tsx | pure
class SchemaInitializer {
get(nestedName: string): SchemaInitializerItemType | undefined
}
```
- 示例
```tsx | pure
const itemA = myInitializer.get('a')
const itemA1 = myInitializer.add('a.a1')
```
### schemaInitializer.remove()
另一种移除方式参考 [schemaInitializerManager.addItem()](/core/ui-schema/schema-initializer-manager#schemainitializermanagerremoveitem);
- 类型
```tsx | pure
class SchemaInitializer {
remove(nestedName: string): void
}
```
- 示例
```tsx | pure
myInitializer.remove('a.a1')
myInitializer.remove('a')
```
## Hooks
### useSchemaInitializer()
用于获取 `SchemaInitializer` 上下文内容。
- 类型
```tsx | pure
export type InsertType = (s: ISchema) => void;
const useSchemaInitializer: () => {
insert: InsertType;
options: SchemaInitializerOptions<any>;
visible?: boolean;
setVisible?: (v: boolean) => void;
}
```
- 参数详解
- `insert`：参数是 Schema 对象，用于插入 Schema
- `options`：获取 `new SchemaInitializer(options)` 时 options 配置
- `visible`：popover 是否显示
- `setVisible`：设置 popover 显示状态
- 示例
```tsx | pure
const schema = {
type: 'void',
'x-component': 'Hello',
}
const Demo = () => {
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert(schema);
};
return <SchemaInitializerItem title={'Demo'} onClick={handleClick}></SchemaInitializerItem>;
}
```
### useSchemaInitializerRender()
用于渲染 `SchemaInitializer`。
- 类型
```tsx | pure
function useSchemaInitializerRender(name: string, options?: SchemaInitializerOptions): {
exists: boolean;
render: (props?: SchemaInitializerOptions) => React.FunctionComponentElement;
}
```
- 参数详解
返回的 `render` 方法可以接收一个参数，用于覆盖 `new SchemaInitializer(options)` 的 `options` 配置。
- 示例
```tsx | pure
const Demo = () => {
const filedSchema = useFieldSchema();
const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']);
return <div>
<div>{ render() }</div>
<div>可以进行参数的二次覆盖：{ render({ style: { color: 'red' } }) }</div>
</div>
}
```
<code src="./demos/schema-initializer-render.tsx"></code>
### useSchemaInitializerItem()
用于获取配置项内容的，配置项是指的 `SchemaInitializer` 中的 `items` 中的一项。
- 类型
```tsx | pure
const useSchemaInitializerItem: <T = any>() => T
```
- 示例
```tsx | pure
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'a',
title: 'Item A',
foo: 'bar',
Component: Demo,
},
],
});
/**
* 通过 useSchemaInitializerItem() 获取到的是
* {
* name: 'a',
* title: 'Item A',
* foo: 'bar',
* Component: Demo,
* }
*/
const Demo = () => {
const { title, foo } = useSchemaInitializerItem();
return <div>{ title } - { foo }</div>
}
```
<code src="./demos/schema-initializer-hooks-item.tsx"></code>
## 内置组件和类型
| type | Component | 效果 |
| ----------- | ------------------------------ | ----------------------------------------- |
| item | SchemaInitializerItem | 文本|
| itemGroup | SchemaInitializerItemGroup | 分组，同 antd `Menu` 组件的 `type: 'group'` |
| subMenu | SchemaInitializerSubMenu | 子菜单，同 antd `Menu` 组件的子菜单 |
| divider | SchemaInitializerDivider | 分割线，同 antd `Menu` 组件的 `type: 'divider'` |
| switch | SchemaInitializerSwitch | 开关 |
| actionModal | SchemaInitializerActionModal | 弹窗|
以下每个示例都提供了 2 种[定义方式](/core/ui-schema/schema-initializer#两种定义方式component-和-type)，一种是通过 `Component` 定义，另一种是通过 `type` 定义。
### `type: 'item'` & `SchemaInitializerItem`
文本项。
```tsx | pure
interface SchemaInitializerItemProps {
style?: React.CSSProperties;
className?: string;
name?: string;
icon?: React.ReactNode;
title?: React.ReactNode;
items?: SchemaInitializerItemType[];
onClick?: (args?: any) => any;
}
```
核心参数是 `title`、`icon`、`onClick`、`items`，其中 `onClick` 用于插入 Schema，`items` 用于渲染子列表项。
<code src="./demos/schema-initializer-components-item.tsx"></code>
### `type: 'itemGroup'` & SchemaInitializerItemGroup
分组。
```tsx | pure
interface SchemaInitializerItemGroupProps {
name: string;
title: string;
children?: SchemaInitializerOptions['items'];
divider?: boolean;
}
```
核心参数是 `title`、`children`，其中 `children` 用于渲染子列表项，`divider` 用于渲染分割线。
<code src="./demos/schema-initializer-components-group.tsx"></code>
### `type: 'switch'` & SchemaInitializerSwitch
Switch 切换按钮。
```tsx | pure
interface SchemaInitializerSwitchItemProps extends SchemaInitializerItemProps {
checked?: boolean;
disabled?: boolean;
}
```
核心参数是 `checked`、`onClick`，其中 `onClick` 用于插入或者移除 Schema。
<code src="./demos/schema-initializer-components-switch.tsx"></code>
### `type: 'subMenu'` & SchemaInitializerSubMenu
子菜单。
<code src="./demos/schema-initializer-components-menu.tsx"></code>
### `type: 'divider'` & SchemaInitializerDivider
分割线。
<code src="./demos/schema-initializer-components-divider.tsx"></code>
## 渲染组件
### SchemaInitializerChildren
用于自定义渲染多个列表项。
```tsx | pure
const Demo = ({ children }) => {
// children: [{ name: 'a1', Component: ItemA1 }, { name: 'a2', type: 'item', title: 'ItemA2' }]
return <SchemaInitializerChildren>{ children }</SchemaInitializerChildren>
}
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
items: [
{
name: 'test',
Component: Demo,
children: [
{
name: 'a1',
Component: ItemA1,
},
{
name: 'a2',
type: 'item',
title: 'ItemA2',
}
]
}
],
});
```
### SchemaInitializerChild
用于自定义渲染单个列表项。
```tsx | pure
const Demo = (props) => {
return <SchemaInitializerChild {...props}/>
}
```

188
packages/core/client/docs/en-US/core/ui-schema/schema-settings-manager.md Normal file
View File

@ -0,0 +1,188 @@
# SchemaSettingsManager
## 实例方法
### schemaSettingsManager.add()
添加 SchemaSettings 实例。
- 类型
```tsx | pure
class SchemaSettingsManager {
add<T = any>(...schemaSettingList: SchemaSetting<T>[]): void
}
```
- 示例
```tsx | pure
const mySchemaSettings = new SchemaSetting({
name: 'MySchemaSettings',
title: 'Add block',
items: [
{
name: 'demo',
type: 'item',
componentProps:{
title: 'Demo'
}
}
],
});
class MyPlugin extends Plugin {
async load() {
this.app.schemaSettingsManager.add(mySchemaSettings);
}
}
```
### schemaSettingsManager.get()
获取一个 SchemaSettings 实例。
- 类型
```tsx | pure
class SchemaSettingsManager {
get<T = any>(name: string): SchemaSetting<T> | undefined
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const mySchemaSettings = this.app.schemaSettingsManager.get('MySchemaSettings');
}
}
```
### schemaSettingsManager.getAll()
获取所有的 SchemaSettings 实例。
- 类型
```tsx | pure
class SchemaSettingsManager {
getAll(): Record<string, SchemaInitializer<any, any>>
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const list = this.app.schemaSettingsManager.getAll();
}
}
```
### app.schemaSettingsManager.has()
判断是否有存在某个 SchemaSettings 实例。
- 类型
```tsx | pure
class SchemaSettingsManager {
has(name: string): boolean
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
const hasMySchemaSettings = this.app.schemaSettingsManager.has('MySchemaSettings');
}
}
```
### schemaSettingsManager.remove()
移除 SchemaSettings 实例。
- 类型
```tsx | pure
class SchemaSettingsManager {
remove(name: string): void
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
this.app.schemaSettingsManager.remove('MySchemaSettings');
}
}
```
### schemaSettingsManager.addItem()
添加 SchemaSettings 实例的 Item 项，其和直接 schemaInitializer.add() 方法的区别是，可以确保在实例存在时才会添加。
- 类型
```tsx | pure
class SchemaSettingsManager {
addItem(schemaInitializerName: string, itemName: string, data: Omit<SchemaInitializerItemType, 'name'>): void
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
// 方式1：先获取，再添加子项，需要确保已注册
const mySchemaSettings = this.app.schemaSettingsManager.get('MySchemaSettings');
if (mySchemaSettings) {
mySchemaSettings.add('b', { type: 'item', componentProps:{ title: 'B' } })
}
// 方式2：通过 addItem，内部确保在 mySchemaSettings 注册时才会添加
this.app.schemaSettingsManager.addItem('MySchemaSettings', 'b', {
type: 'item',
componentProps:{ title: 'B' }
})
}
}
```
### schemaSettingsManager.removeItem()
移除 实例的 Item 项，其和直接 schemaInitializer.remove() 方法的区别是，可以确保在实例存在时才会移除。
- 类型
```tsx | pure
class SchemaSettingsManager {
removeItem(schemaInitializerName: string, itemName: string): void
}
```
- 示例
```tsx | pure
class MyPlugin extends Plugin {
async load() {
// 方式1：先获取，再删除子项，需要确保已注册
const mySchemaSettings = this.app.schemaSettingsManager.get('MySchemaSettings');
if (mySchemaSettings) {
mySchemaSettings.remove('a')
}
// 方式2：通过 addItem，内部确保在 mySchemaSettings 注册时才会移除
this.app.schemaSettingsManager.remove('MySchemaSettings', 'a')
}
}
```

467
packages/core/client/docs/en-US/core/ui-schema/schema-settings.md Normal file
View File

@ -0,0 +1,467 @@
# SchemaSettings
## new SchemaSettings(options)
创建一个 SchemaSettings 实例。
```tsx | pure
interface SchemaSettingsOptions<T = {}> {
name: string;
Component?: ComponentType<T>;
componentProps?: T;
style?: React.CSSProperties;
items: SchemaSettingsItemType[];
}
class SchemaSettings<T = {}>{
constructor(options: SchemaSettingsOptions<T>): SchemaSettings<T>;
add(name: string, item: Omit<SchemaSettingsItemType, 'name'>): void
get(nestedName: string): SchemaSettingsItemType | undefined
remove(nestedName: string): void
}
```
### 详细解释
![](../static/VfPGbhWo9os0qTxcITkcHNfin4g.png)
- name：唯一标识，必填
- Component 相关
- Component：触发组件，默认是 `<MenuOutlined />` 组件
- componentProps: 组件属性
- style：组件的样式
- items：列表项配置
### 示例
#### 基础用法
```tsx | pure
const mySchemaSettings = new SchemaSettings({
name: 'MySchemaSettings',
items: [
{
name: 'demo1', // 唯一标识
type: 'item', // 内置类型
componentProps: {
title: 'DEMO1',
onClick() {
alert('DEMO1');
},
},
},
{
name: 'demo2',
Component: () => <SchemaSettings.Item title="DEMO2" onClick={() => alert('DEMO2')} />, // 直接使用 Component 组件
},
],
});
```
#### 定制化 `Component`
```tsx | pure
const mySchemaSettings = new SchemaSettings({
name: 'MySchemaSettings',
Component: Button, // 自定义组件
componentProps: {
type: 'primary',
children: '自定义按钮',
},
// Component: (props) => <Button type='primary' {...props}>自定义按钮</Button>, // 等同于上面效果
items: [
{
name: 'demo1',
type: 'item',
componentProps: {
title: 'DEMO',
},
},
],
});
```
## options.items 配置详解
```tsx | pure
interface SchemaSettingsItemCommon<T = {}> {
name: string;
sort?: number;
type?: string;
Component: string | ComponentType<T>;
useVisible?: () => boolean;
children?: SchemaSettingsItemType[];
useChildren?: () => SchemaSettingsItemType[];
checkChildrenLength?: boolean;
componentProps?: Omit<T, 'children'>;
useComponentProps?: () => Omit<T, 'children'>;
}
```
### 两种定义方式：`Component` 和 `type`
- 通过 `Component` 定义
```tsx | pure
const Demo = () => {
// 最终渲染 `SchemaSettingsItem`
return <SchemaSettingsItem title='Demo' />
}
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
Component: Demo, // 通过 Component 定义
}
],
});
```
- 通过 `type` 定义
NocoBase 内置了一些常用的 `type`，例如 `type: 'item'`，相当于 `Component: SchemaSettingsItem`。
更多内置类型，请参考：[内置组件和类型](/core/ui-schema/schema-settings#%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6%E5%92%8C%E7%B1%BB%E5%9E%8B)
```tsx | pure
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'a',
type: 'item',
componentProps: {
title: 'Demo',
},
}
],
});
```
<code src="./demos/schema-settings-options-item-define.tsx"></code>
### `children` 和动态方式 `useChildren`
对于某些组件而言是有子列表项的，例如 `type: 'itemGroup'`，那么我们使用 children 属性，同时考虑到某些场景下 children 是动态的，需要从 Hooks 里面获取，那么就可以通过 `useChildren` 来定义。
<code src="./demos/schema-settings-options-item-children.tsx"></code>
### 动态显示隐藏 `useVisible`
<code src="./demos/schema-settings-options-item-visible.tsx"></code>
### 组件属性 `componentProps` 和动态属性 `useComponentProps`
对于一些通用组件，我们可以通过 `componentProps` 来定义组件属性，同时考虑到某些场景下组件属性是动态的，需要从 Hooks 里面获取，那么就可以通过 `useComponentProps` 来定义。
当然也可以不使用这两个属性，直接封装成一个组件，然后通过 `Component` 来定义。
<code src="./demos/schema-settings-options-item-props.tsx"></code>
## 实例方法
```tsx | pure
const mySchemaSettings = new SchemaSettings({
name: 'MySchemaSettings',
items: [
{
name: 'a',
type: 'itemGroup',
componentProps: {
title: 'item a'
},
children: [
{
name: 'a1',
title: 'item a1',
}
],
},
],
});
```
### schemaSettings.add()
用于新增 Item。
- 类型
```tsx | pure
class SchemaSettings {
add(name: string, item: Omit<SchemaSettingsItemType, 'name'>): void
}
```
- 参数说明
第一个参数是 name，作为唯一标识，用于增删改查，并且 `name` 支持 `.` 用于分割层级。
- 示例
```tsx | pure
mySchemaSetting.add('b', {
type: 'item',
title: 'item b',
})
mySchemaSetting.add('a.a2', {
type: 'item',
title: 'item a2',
})
```
### schemaSettings.get()
- 类型
```tsx | pure
class SchemaSettings {
get(nestedName: string): SchemaSettingsItemType| undefined
}
```
- 示例
```tsx | pure
const itemA = mySchemaSetting.get('a')
const itemA1 = mySchemaSetting.add('a.a1')
```
### schemaSettings.remove()
- 类型
```tsx | pure
class SchemaSettings {
remove(nestedName: string): void
}
```
- 示例
```tsx | pure
mySchemaSetting.remove('a.a1')
mySchemaSetting.remove('a')
```
## Hooks
### useSchemaSettingsRender()
用于渲染 SchemaInitializer。
- 类型
```tsx | pure
function useSchemaSettingsRender(name: string, options?: SchemaSettingsOptions): {
exists: boolean;
render: (options?: SchemaSettingsRenderOptions) => React.ReactElement;
}
```
- 示例
```tsx | pure
const Demo = () => {
const filedSchema = useFieldSchema();
const { render, exists } = useSchemaSettingsRender(fieldSchema['x-settings'], fieldSchema['x-settings-props'])
return <div>
<div>{ render() }</div>
<div>可以进行参数的二次覆盖：{ render({ style: { color: 'red' } }) }</div>
</div>
}
```
<code src="./demos/schema-settings-render.tsx"></code>
### useSchemaSettings()
获取 schemaSetting 上下文数据。
上下文数据包含了 `schemaSetting` 实例化时的 `options` 以及调用 `useSchemaSettingsRender()` 时传入的 `options`。
- 类型
```tsx | pure
interface UseSchemaSettingsResult<T> extends SchemaSettingsOptions<T> {
dn?: Designable;
field?: GeneralField;
fieldSchema?: Schema;
}
function useSchemaSettings(): UseSchemaSettingsResult;
```
- 示例
```tsx | pure
const { dn } = useSchemaSettings();
```
### useSchemaSettingsItem()
用于获取一个 item 的数据。
- 类型
```tsx | pure
export type SchemaSettingsItemType<T = {}> = {
name: string;
type?: string;
sort?: number;
Component?: string | ComponentType<T>;
componentProps?: T;
useComponentProps?: () => T;
useVisible?: () => boolean;
children?: SchemaSettingsItemType[];
[index]: any;
};
function useSchemaSettingsItem(): SchemaSettingsItemType;
```
- 示例
```tsx | pure
const { name } = useSchemaSettingsItem();
```
## 内置组件和类型
| type | Component | 效果 |
| ----------- | ------------------------------ | ----------------------------------------- |
| item | SchemaSettingsItem | 文本 |
| itemGroup | SchemaSettingsItemGroup | 分组，同 Menu 组件的 `type: 'itemGroup'` |
| subMenu | SchemaSettingsSubMenu | 子菜单，同 Menu 组件的子菜单 |
| divider | SchemaSettingsDivider | 分割线，同 Menu 组件的 `type: 'divider'` |
| remove | SchemaSettingsRemove | 删除，用于删除一个区块 |
| select | SchemaSettingsSelectItem | 下拉选择 |
| cascader | SchemaSettingsCascaderItem | 级联选择 |
| switch | SchemaSettingsSwitchItem | 开关 |
| popup | SchemaSettingsPopupItem | 弹出层 |
| actionModal | SchemaSettingsActionModalItem | 操作弹窗 |
| modal | SchemaSettingsModalItem | 弹窗 |
### SchemaSettingsItem
文本，对应的 `type` 为 `item`。
```tsx | pure
interface SchemaSettingsItemProps extends Omit<MenuItemProps, 'title'> {
title: string;
}
```
核心参数为 `title` 和 `onClick`，可以在 `onClick` 中修改 schema。
<code src="./demos/schema-settings-components-item.tsx"></code>
### SchemaSettingsItemGroup
分组，对应的 `type` 为 `itemGroup`。
核心参数是 `title`。
<code src="./demos/schema-settings-components-group.tsx"></code>
### SchemaSettingsSubMenu
子菜单，对应的 `type` 为 `subMenu`。
核心参数是 `title`。
<code src="./demos/schema-settings-components-sub-menu.tsx"></code>
### SchemaSettingsDivider
分割线，对应的 `type` 为 `divider`。
<code src="./demos/schema-settings-components-divider.tsx"></code>
### SchemaSettingsRemove
删除，对应的 `type` 为 `remove`。
```tsx | pure
interface SchemaSettingsRemoveProps {
confirm?: ModalFuncProps;
removeParentsIfNoChildren?: boolean;
breakRemoveOn?: ISchema | ((s: ISchema) => boolean);
}
```
- `confirm`：删除前的确认弹窗
- `removeParentsIfNoChildren`：如果删除后没有子节点了，是否删除父节点
- `breakRemoveOn`：如果删除的节点满足条件，是否中断删除
<code src="./demos/schema-settings-components-remove.tsx"></code>
### SchemaSettingsSelectItem
选择器，对应的 `type` 为 `select`。
<code src="./demos/schema-settings-components-select.tsx"></code>
### SchemaSettingsCascaderItem
级联选择，对应的 `type` 为 `cascader`。
### SchemaSettingsSwitchItem
开关，对应的 `type` 为 `switch`。
<code src="./demos/schema-settings-components-switch.tsx"></code>
### SchemaSettingsModalItem
弹窗，对应的 `type` 为 `modal`。
```tsx | pure
export interface SchemaSettingsModalItemProps {
title: string;
onSubmit: (values: any) => void;
initialValues?: any;
schema?: ISchema | (() => ISchema);
modalTip?: string;
components?: any;
hidden?: boolean;
scope?: any;
effects?: any;
width?: string | number;
children?: ReactNode;
asyncGetInitialValues?: () => Promise<any>;
eventKey?: string;
hide?: boolean;
}
```
我们可以通过 `schema` 参数来定义弹窗的表单，然后在 `onSubmit` 中获取表单的值，然后修改当前 schema 节点。
<code src="./demos/schema-settings-components-modal.tsx"></code>
### SchemaSettingsActionModalItem
操作弹窗，对应的 `type` 为 `actionModal`。
其和 `modal` 的区别是，`SchemaSettingsModalItem` 弹窗会丢失上下文，而 `SchemaSettingsActionModalItem` 会保留上下文，简单场景下可以使用 `SchemaSettingsModalItem`，复杂场景下可以使用 `SchemaSettingsActionModalItem`。
```tsx | pure
export interface SchemaSettingsActionModalItemProps extends SchemaSettingsModalItemProps, Omit<SchemaSettingsItemProps, 'onSubmit' | 'onClick'> {
uid?: string;
initialSchema?: ISchema;
schema?: ISchema;
beforeOpen?: () => void;
maskClosable?: boolean;
}
```
<code src="./demos/schema-settings-components-action-modal.tsx"></code>

427
packages/core/client/docs/en-US/core/ui-schema/schema-toolbar.md Normal file
View File

@ -0,0 +1,427 @@
# SchemaToolbar
![SchemaToolbar](../static/designer.png)
## 组件
### SchemaToolbar 组件
此为默认的 Toolbar 组件，其内部会自动根据 Schema 的 `x-settings`、`x-initializer` 渲染 `SchemaSettings`、`SchemaInitializer` 和 `Drag` 组件。
Toolbar 具体的渲染规则为：当有 `x-toolbar` 会渲染对应的组件；当无 `x-toolbar` 但是有 `x-settings`、`x-initializer` 会渲染默认的 `SchemaToolbar` 组件。
- 类型
```tsx | pure
interface SchemaToolbarProps {
title?: string;
draggable?: boolean;
initializer?: string | false;
settings?: string | false;
/**
* @default true
*/
showBorder?: boolean;
showBackground?: boolean;
}
```
- 详细解释
- `title`：左上角的标题
- `draggable`：是否可以拖拽，默认为 `true`
- `initializer`：`SchemaInitializer` 的默认值，当 schema 里没有 `x-initializer` 时，会使用此值；当为 `false` 时，不会渲染 `SchemaInitializer`
- `settings`：`SchemaSettings` 的默认值，当 schema 里没有 `x-settings` 时，会使用此值；当为 `false` 时，不会渲染 `SchemaSettings`
- `showBorder`：边框是否变为橘色
- `showBackground`：背景是否变为橘色
- 示例
未指定 `x-toolbar` 时会渲染默认的 `SchemaToolbar` 这个组件。
```tsx
import { useFieldSchema } from '@formily/react';
import {
Application,
CardItem,
Grid,
Plugin,
SchemaComponent,
SchemaInitializer,
SchemaInitializerItem,
SchemaSettings,
useSchemaInitializer,
useSchemaInitializerItem,
} from '@nocobase/client';
import React from 'react';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'remove',
type: 'remove',
componentProps: {
removeParentsIfNoChildren: true,
},
},
],
});
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
wrap: Grid.wrap,
items: [
{
name: 'demo1',
title: 'Demo1',
Component: () => {
const itemConfig = useSchemaInitializerItem();
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
'x-settings': 'mySettings',
'x-decorator': 'CardItem',
'x-component': 'Hello',
});
};
return <SchemaInitializerItem title={itemConfig.title} onClick={handleClick}></SchemaInitializerItem>;
},
},
],
});
const Hello = () => {
const schema = useFieldSchema();
return <h1>Hello, world! {schema.name}</h1>;
};
const hello1 = Grid.wrap({
type: 'void',
// 仅指定了 `x-settings` 但是没有 `x-toolbar`，会使用默认的 `SchemaToolbar` 组件
'x-settings': 'mySettings',
'x-decorator': 'CardItem',
'x-component': 'Hello',
});
const HelloPage = () => {
return (
<div>
<SchemaComponent
schema={{
name: 'root',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'MyInitializer',
properties: {
hello1,
},
}}
/>
</div>
);
};
class PluginHello extends Plugin {
async load() {
this.app.addComponents({ Grid, CardItem, Hello });
this.app.schemaSettingsManager.add(mySettings);
this.app.schemaInitializerManager.add(myInitializer);
this.router.add('hello', {
path: '/',
Component: HelloPage,
});
}
}
const app = new Application({
router: {
type: 'memory',
},
designable: true,
plugins: [PluginHello],
});
export default app.getRootComponent();
```
自定义 Toolbar 组件。
```tsx
import { useFieldSchema } from '@formily/react';
import {
Application,
CardItem,
Grid,
Plugin,
SchemaComponent,
SchemaInitializer,
SchemaInitializerItem,
SchemaSettings,
SchemaToolbar,
useSchemaInitializer,
useSchemaInitializerItem,
} from '@nocobase/client';
import React from 'react';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'remove',
type: 'remove',
componentProps: {
removeParentsIfNoChildren: true,
},
},
],
});
const MyToolbar = () => {
return <SchemaToolbar showBackground title='Test' />
}
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
wrap: Grid.wrap,
items: [
{
name: 'demo1',
title: 'Demo1',
Component: () => {
const itemConfig = useSchemaInitializerItem();
// 调用插入功能
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
// 使用自定义的 Toolbar 组件
'x-toolbar': 'MyToolbar',
'x-settings': 'mySettings',
'x-decorator': 'CardItem',
'x-component': 'Hello',
});
};
return <SchemaInitializerItem title={itemConfig.title} onClick={handleClick}></SchemaInitializerItem>;
},
},
],
});
const Hello = () => {
const schema = useFieldSchema();
return <h1>Hello, world! {schema.name}</h1>;
};
const hello1 = Grid.wrap({
type: 'void',
// 使用自定义的 Toolbar 组件
'x-toolbar': 'MyToolbar',
'x-settings': 'mySettings',
'x-decorator': 'CardItem',
'x-component': 'Hello',
});
const HelloPage = () => {
return (
<div>
<SchemaComponent
schema={{
name: 'root',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'MyInitializer',
properties: {
hello1,
},
}}
/>
</div>
);
};
class PluginHello extends Plugin {
async load() {
this.app.addComponents({ Grid, CardItem, Hello, MyToolbar });
this.app.schemaSettingsManager.add(mySettings);
this.app.schemaInitializerManager.add(myInitializer);
this.router.add('hello', {
path: '/',
Component: HelloPage,
});
}
}
const app = new Application({
router: {
type: 'memory',
},
designable: true,
plugins: [PluginHello],
});
export default app.getRootComponent();
```
## Hooks
### useSchemaToolbarRender()
用于渲染 `SchemaToolbar`。
- 类型
```tsx | pure
const useSchemaToolbarRender: (fieldSchema: ISchema) => {
render(props?: SchemaToolbarProps): React.JSX.Element;
exists: boolean;
}
```
- 详细解释
前面示例中 `'x-decorator': 'CardItem'` 中组件 `CardItem` 里面就调用了 `useSchemaToolbarRender()` 进行渲染。内置的组件还有：`BlockItem`、`CardItem`、`Action`、`FormItem`。
`render()` 支持二次覆盖组件属性。
- 示例
```tsx | pure
const MyDecorator = () => {
const filedSchema = useFieldSchema();
const { render } = useSchemaToolbarRender(filedSchema); // 从 Schema 中读取 Toolbar 组件
return <Card>{ render() }</Card>
}
```
```tsx
import { Card } from 'antd';
import { useFieldSchema } from '@formily/react';
import {
Application,
CardItem,
Grid,
Plugin,
SchemaComponent,
SchemaInitializer,
SchemaInitializerItem,
SchemaSettings,
SchemaToolbar,
useSchemaInitializer,
useSchemaInitializerItem,
useSchemaToolbarRender
} from '@nocobase/client';
import React from 'react';
const mySettings = new SchemaSettings({
name: 'mySettings',
items: [
{
name: 'remove',
type: 'remove',
componentProps: {
removeParentsIfNoChildren: true,
},
},
],
});
const MyToolbar = (props) => {
return <SchemaToolbar showBackground title='Test' {...props} />
}
// 自定义包装器
const MyDecorator = ({children}) => {
const filedSchema = useFieldSchema();
// 使用 `useSchemaToolbarRender()` 获取并渲染内容
const { render } = useSchemaToolbarRender(filedSchema);
return <Card style={{ marginBottom: 10 }}>{ render({ draggable: false }) }{children}</Card>
}
const myInitializer = new SchemaInitializer({
name: 'MyInitializer',
title: 'Button Text',
wrap: Grid.wrap,
items: [
{
name: 'demo1',
title: 'Demo1',
Component: () => {
const itemConfig = useSchemaInitializerItem();
// 调用插入功能
const { insert } = useSchemaInitializer();
const handleClick = () => {
insert({
type: 'void',
// 使用自定义的 Toolbar 组件
'x-toolbar': 'MyToolbar',
'x-settings': 'mySettings',
'x-decorator': 'MyDecorator',
'x-component': 'Hello',
});
};
return <SchemaInitializerItem title={itemConfig.title} onClick={handleClick}></SchemaInitializerItem>;
},
},
],
});
const Hello = () => {
const schema = useFieldSchema();
return <h1>Hello, world! {schema.name}</h1>;
};
const hello1 = Grid.wrap({
type: 'void',
// 使用自定义的 Toolbar 组件
'x-toolbar': 'MyToolbar',
'x-settings': 'mySettings',
'x-decorator': 'MyDecorator',
'x-component': 'Hello',
});
const HelloPage = () => {
return (
<div>
<SchemaComponent
schema={{
name: 'root',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'MyInitializer',
properties: {
hello1,
},
}}
/>
</div>
);
};
class PluginHello extends Plugin {
async load() {
this.app.addComponents({ Grid, CardItem, Hello, MyToolbar, MyDecorator });
this.app.schemaSettingsManager.add(mySettings);
this.app.schemaInitializerManager.add(myInitializer);
this.router.add('hello', {
path: '/',
Component: HelloPage,
});
}
}
const app = new Application({
router: {
type: 'memory',
},
designable: true,
plugins: [PluginHello],
});
export default app.getRootComponent();
```

7
packages/core/client/docs/en-US/core/utils.md Normal file
View File

@ -0,0 +1,7 @@
# Utils
## Function
### tval
用于输出多语言的字符串。

3
packages/core/client/docs/en-US/index.md Normal file
View File

@ -0,0 +1,3 @@
# Index
<Navigate replace to="/core/application/application"></Navigate>

82
packages/core/client/docs/en-US/ui-schema/actions/add-new.md Normal file
View File

@ -0,0 +1,82 @@
# Add new
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-action": "create",
"x-acl-action": "create",
"title": "{{t('Add new')}}",
"x-designer": "Action.Designer",
"x-component": "Action",
"x-decorator": "ACLActionProvider",
"x-component-props": {
"openMode": "drawer",
"type": "primary",
"component": "CreateRecordAction",
"icon": "PlusOutlined"
},
"x-align": "right",
"x-acl-action-props": {
"skipScopeCheck": true
},
"properties": {
"drawer": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{ t(\"Add record\") }}",
"x-component": "Action.Container",
"x-component-props": {
"className": "nb-action-popup"
},
"properties": {
"tabs": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializersForCreateFormBlock",
"properties": {
"tab1": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{t(\"Add new\")}}",
"x-component": "Tabs.TabPane",
"x-designer": "Tabs.Designer",
"x-component-props": {},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "CreateFormBlockInitializers",
"x-uid": "psh2rj6pkab",
"x-async": false,
"x-index": 1
}
},
"x-uid": "3i7grk0aytf",
"x-async": false,
"x-index": 1
}
},
"x-uid": "75s24n1nlkh",
"x-async": false,
"x-index": 1
}
},
"x-uid": "wg1f4xyx7vp",
"x-async": false,
"x-index": 1
}
},
"x-uid": "2hwye7mt2th",
"x-async": false,
"x-index": 1
}
```

1
packages/core/client/docs/en-US/ui-schema/actions/add-record.md Normal file
View File

@ -0,0 +1 @@
# Add record（任意表）

1
packages/core/client/docs/en-US/ui-schema/actions/bulk-edit.md Normal file
View File

@ -0,0 +1 @@
# 批量编辑

1
packages/core/client/docs/en-US/ui-schema/actions/bulk-update.md Normal file
View File

@ -0,0 +1 @@
# 批量更新

88
packages/core/client/docs/en-US/ui-schema/actions/custom-request.md Normal file
View File

@ -0,0 +1,88 @@
# 自定义请求
<Alert type="warning">
x-component 不统一，x-action 也不统一，有三种风格的 schema
</Alert>
## UI Schema
### 表单的自定义请求
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"title": "{{ t(\"Custom request\") }}",
"x-component": "CustomRequestAction",
"x-action": "customize:form:request",
"x-designer": "CustomRequestAction.Designer",
"x-decorator": "CustomRequestAction.Decorator",
"x-action-settings": {
"onSuccess": {
"manualClose": false,
"redirecting": false,
"successMessage": "{{t(\"Request success\")}}"
}
},
"type": "void",
"x-uid": "d1rfalvivfo",
"x-async": false,
"x-index": 2
}
```
### 表格列操作的自定义请求
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"title": "{{ t(\"Custom request\") }}",
"x-component": "Action.Link",
"x-action": "customize:table:request",
"x-designer": "Action.Designer",
"x-action-settings": {
"requestSettings": {},
"onSuccess": {
"manualClose": false,
"redirecting": false,
"successMessage": "{{t(\"Request success\")}}"
}
},
"x-component-props": {
"useProps": "{{ useCustomizeRequestActionProps }}"
},
"x-designer-props": {
"linkageAction": true
},
"type": "void",
"x-uid": "edn0y4fq7xb",
"x-async": false,
"x-index": 1
}
```
### 详情的自定义请求
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"title": "{{ t(\"Custom request\") }}",
"x-component": "CustomRequestAction",
"x-action": "customize:form:request",
"x-designer": "CustomRequestAction.Designer",
"x-decorator": "CustomRequestAction.Decorator",
"x-action-settings": {
"onSuccess": {
"manualClose": false,
"redirecting": false,
"successMessage": "{{t(\"Request success\")}}"
}
},
"type": "void",
"x-uid": "glc5zkr0ke3",
"x-async": false,
"x-index": 1
}
```

1
packages/core/client/docs/en-US/ui-schema/actions/delete.md Normal file
View File

@ -0,0 +1 @@
# 删除

1
packages/core/client/docs/en-US/ui-schema/actions/duplicate.md Normal file
View File

@ -0,0 +1 @@
# 复制

1
packages/core/client/docs/en-US/ui-schema/actions/edit.md Normal file
View File

@ -0,0 +1 @@
# 编辑

1
packages/core/client/docs/en-US/ui-schema/actions/export.md Normal file
View File

@ -0,0 +1 @@
# 导出

1
packages/core/client/docs/en-US/ui-schema/actions/filter.md Normal file
View File

@ -0,0 +1 @@
# 筛选

1
packages/core/client/docs/en-US/ui-schema/actions/import.md Normal file
View File

@ -0,0 +1 @@
# 导入

51
packages/core/client/docs/en-US/ui-schema/actions/index.md Normal file
View File

@ -0,0 +1,51 @@
# 概览
## UI Schema 协议
- `x-action`
- `x-align`
- `x-acl-action`
- `x-acl-action-props`
- `x-action-settings`
## 常规操作
```json
{
"type": "void",
"title": "{{ t(\"Submit\") }}",
"x-component": "Action",
"x-component-props": {
"type": "primary",
"htmlType": "submit",
"useProps": "{{ useCreateActionProps }}"
},
}
```
## 弹窗操作
```json
{
"type": "void",
"title": "{{t('Open drawer')}}",
"x-component": "Action",
"x-component-props": {
"openMode": "drawer",
"type": "primary",
"icon": "PlusOutlined"
},
"x-align": "right",
"properties": {
"drawer": {
"type": "void",
"x-component": "Action.Container",
"x-component-props": {},
"properties": {
},
}
}
}
```
更多示例查看 [Action](/apis/action)

1
packages/core/client/docs/en-US/ui-schema/actions/print.md Normal file
View File

@ -0,0 +1 @@
# 打印

1
packages/core/client/docs/en-US/ui-schema/actions/refresh.md Normal file
View File

@ -0,0 +1 @@
# 刷新

1
packages/core/client/docs/en-US/ui-schema/actions/save-record.md Normal file
View File

@ -0,0 +1 @@
# 保存数据

1
packages/core/client/docs/en-US/ui-schema/actions/submit-to-workflow.md Normal file
View File

@ -0,0 +1 @@
# 提交至工作流

28
packages/core/client/docs/en-US/ui-schema/actions/submit.md Normal file
View File

@ -0,0 +1,28 @@
# 提交
## UI Schema
### 新建数据的提交
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"title": "{{ t(\"Submit\") }}",
"x-action": "submit",
"x-component": "Action",
"x-designer": "Action.Designer",
"x-component-props": {
"type": "primary",
"htmlType": "submit",
"useProps": "{{ useCreateActionProps }}"
},
"x-action-settings": {
"triggerWorkflows": []
},
"type": "void",
"x-uid": "aaxbm1i5xxd",
"x-async": false,
"x-index": 1
}
```

1
packages/core/client/docs/en-US/ui-schema/actions/update-record.md Normal file
View File

@ -0,0 +1 @@
# 更新数据

1
packages/core/client/docs/en-US/ui-schema/actions/view.md Normal file
View File

@ -0,0 +1 @@
# 查看

282
packages/core/client/docs/en-US/ui-schema/blocks/data/calendar.md Normal file
View File

@ -0,0 +1,282 @@
# Calendar
## x-initializer
- CalendarActionInitializers
- TabPaneInitializers
- RecordBlockInitializers
## x-designer
- CalendarV2.Designer
## x-settings
- CalendarSettings
## UI Schema
### 日历区块
```json
{
"type": "void",
"version": "2.0",
"x-designer": "CalendarV2.Designer",
"x-component": "CardItem",
"x-decorator": "CalendarBlockProvider",
"x-acl-action": "users:list",
"x-decorator-props": {
"action": "list",
"params": {
"paginate": false
},
"resource": "users",
"collection": "users",
"fieldNames": {
"id": "id",
"end": ["f_nxqfedh5fd5"],
"start": ["f_nxqfedh5fd5"],
"title": "nickname"
}
},
"_isJSONSchemaObject": true,
"properties": {
"puytl7p5x8o": {
"type": "void",
"version": "2.0",
"x-component": "CalendarV2",
"x-component-props": {
"useProps": "{{ useCalendarBlockProps }}"
},
"_isJSONSchemaObject": true,
"properties": {
"toolBar": {
"type": "void",
"version": "2.0",
"x-component": "CalendarV2.ActionBar",
"x-initializer": "CalendarActionInitializers",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"_isJSONSchemaObject": true,
"x-uid": "494h1j6bxyg",
"x-async": false,
"x-index": 1
},
"event": {
"type": "void",
"version": "2.0",
"x-component": "CalendarV2.Event",
"_isJSONSchemaObject": true,
"properties": {
"drawer": {
"type": "void",
"title": "{{ t(\"View record\") }}",
"version": "2.0",
"x-component": "Action.Drawer",
"x-component-props": {
"className": "nb-action-popup"
},
"_isJSONSchemaObject": true,
"properties": {
"tabs": {
"type": "void",
"version": "2.0",
"x-component": "Tabs",
"x-initializer": "TabPaneInitializers",
"x-component-props": {},
"_isJSONSchemaObject": true,
"x-initializer-props": {
"gridInitializer": "RecordBlockInitializers"
},
"properties": {
"tab1": {
"type": "void",
"title": "{{t(\"Details\")}}",
"version": "2.0",
"x-designer": "Tabs.Designer",
"x-component": "Tabs.TabPane",
"x-component-props": {},
"_isJSONSchemaObject": true,
"properties": {
"grid": {
"type": "void",
"version": "2.0",
"x-component": "Grid",
"x-initializer": "RecordBlockInitializers",
"_isJSONSchemaObject": true,
"x-initializer-props": {
"actionInitializers": "CalendarFormActionInitializers"
},
"x-uid": "yty9wg20qq0",
"x-async": false,
"x-index": 1
}
},
"x-uid": "hcsgenoc3hb",
"x-async": false,
"x-index": 1
}
},
"x-uid": "c5cpptwxw7s",
"x-async": false,
"x-index": 1
}
},
"x-uid": "c5iarcnpefc",
"x-async": false,
"x-index": 1
}
},
"x-uid": "080x8qlpn6s",
"x-async": false,
"x-index": 2
}
},
"x-uid": "pcche4s596p",
"x-async": false,
"x-index": 1
}
},
"x-uid": "gk2jk3gpo9f",
"x-async": false,
"x-index": 1
}
```
### 关系的日历区块
```json
{
"x-uid": "8q0hsbdr9fc",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a.o2m:list",
"x-decorator": "CalendarBlockProvider",
"x-decorator-props": {
"collection": "b",
"resource": "a.o2m",
"action": "list",
"fieldNames": {
"id": "id",
"start": "createdAt",
"title": "f_ex4581dfc0t"
},
"params": {
"paginate": false
},
"association": "a.o2m"
},
"x-designer": "CalendarV2.Designer",
"x-component": "CardItem",
"x-component-props": {
"title": "关系的日历区块"
},
"properties": {
"v3za6qejuz7": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "CalendarV2",
"x-component-props": {
"useProps": "{{ useCalendarBlockProps }}"
},
"properties": {
"toolBar": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "CalendarV2.ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"x-initializer": "CalendarActionInitializers",
"x-uid": "u9ntffsdsrh",
"x-async": false,
"x-index": 1
},
"event": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "CalendarV2.Event",
"properties": {
"drawer": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Action.Drawer",
"x-component-props": {
"className": "nb-action-popup"
},
"title": "{{ t(\"View record\") }}",
"properties": {
"tabs": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializers",
"x-initializer-props": {
"gridInitializer": "RecordBlockInitializers"
},
"properties": {
"tab1": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{t(\"Details\")}}",
"x-component": "Tabs.TabPane",
"x-designer": "Tabs.Designer",
"x-component-props": {},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer-props": {
"actionInitializers": "CalendarFormActionInitializers"
},
"x-initializer": "RecordBlockInitializers",
"x-uid": "2swhiw4lee5",
"x-async": false,
"x-index": 1
}
},
"x-uid": "z6odjfbwnht",
"x-async": false,
"x-index": 1
}
},
"x-uid": "mxr7ikhfc9y",
"x-async": false,
"x-index": 1
}
},
"x-uid": "mfgucnj7ev8",
"x-async": false,
"x-index": 1
}
},
"x-uid": "05l5a2h42pn",
"x-async": false,
"x-index": 2
}
},
"x-uid": "v2jazzvqa85",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```

143
packages/core/client/docs/en-US/ui-schema/blocks/data/charts.md Normal file
View File

@ -0,0 +1,143 @@
# Charts
## UI Schema
### 图表区块
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "CardItem",
"x-component-props": {
"name": "charts"
},
"x-designer": "ChartV2BlockDesigner",
"properties": {
"u8841bjm65y": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-decorator": "ChartV2Block",
"x-initializer": "ChartInitializers",
"x-uid": "j4hzcpzcc3g",
"x-async": false,
"x-index": 1
}
},
"x-uid": "ldc2aokaop2",
"x-async": false,
"x-index": 1
}
```
### 内嵌区块
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "CardItem",
"x-component-props": {
"name": "charts"
},
"x-designer": "ChartV2BlockDesigner",
"properties": {
"g3jq3vkx9fv": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-decorator": "ChartV2Block",
"x-initializer": "ChartInitializers",
"properties": {
"ue7lfigjgm1": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid.Row",
"properties": {
"43ztg8gu03v": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid.Col",
"properties": {
"n47fsb4i2lm": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-decorator": "ChartRendererProvider",
"x-decorator-props": {
"query": {
"measures": [
{
"field": ["id"]
}
],
"dimensions": [],
"filter": {
"$and": []
},
"orders": [],
"cache": {}
},
"config": {
"chartType": "Built-in.line",
"general": {
"xField": "id",
"yField": "id",
"smooth": false,
"isStack": false
}
},
"collection": "a",
"mode": "builder"
},
"x-acl-action": "a:list",
"x-designer": "ChartRenderer.Designer",
"x-component": "CardItem",
"x-component-props": {
"size": "small"
},
"x-initializer": "ChartInitializers",
"properties": {
"y25sgh5pukl": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "ChartRenderer",
"x-component-props": {},
"x-uid": "ma0s07k753t",
"x-async": false,
"x-index": 1
}
},
"x-uid": "k6naqcx59ow",
"x-async": false,
"x-index": 1
}
},
"x-uid": "o8ktlccovml",
"x-async": false,
"x-index": 1
}
},
"x-uid": "mvn9ai9rhx8",
"x-async": false,
"x-index": 1
}
},
"x-uid": "mcbyby93j6n",
"x-async": false,
"x-index": 1
}
},
"x-uid": "sn0lczwtkgm",
"x-async": false,
"x-index": 1
}
```

169
packages/core/client/docs/en-US/ui-schema/blocks/data/details.md Normal file
View File

@ -0,0 +1,169 @@
# Details
## UI Schema
### 详情区块（带分页）
```json
{
"type": "void",
"version": "2.0",
"x-designer": "DetailsDesigner",
"x-component": "CardItem",
"x-decorator": "DetailsBlockProvider",
"x-acl-action": "users:view",
"x-decorator-props": {
"action": "list",
"params": {
"pageSize": 1
},
"rowKey": "id",
"resource": "users",
"collection": "users",
"readPretty": true
},
"_isJSONSchemaObject": true,
"properties": {
"mjad1dcywip": {
"type": "void",
"version": "2.0",
"x-component": "Details",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useDetailsBlockProps }}"
},
"_isJSONSchemaObject": true,
"properties": {
"8avswx6qgyp": {
"type": "void",
"version": "2.0",
"x-component": "ActionBar",
"x-initializer": "DetailsActionInitializers",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"_isJSONSchemaObject": true,
"x-uid": "01w17yleng8",
"x-async": false,
"x-index": 1
},
"grid": {
"type": "void",
"version": "2.0",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"_isJSONSchemaObject": true,
"x-uid": "bgu0ix4lfmc",
"x-async": false,
"x-index": 2
},
"pagination": {
"type": "void",
"version": "2.0",
"x-component": "Pagination",
"x-component-props": {
"useProps": "{{ useDetailsPaginationProps }}"
},
"_isJSONSchemaObject": true,
"x-uid": "6riuxghrz30",
"x-async": false,
"x-index": 3
}
},
"x-uid": "3apkfu8ngrp",
"x-async": false,
"x-index": 1
}
},
"x-uid": "yeodhismy2w",
"x-async": false,
"x-index": 1
}
```
### 对多关系区块
```json
{
"x-uid": "2gm2iw937q5",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a.o2m:view",
"x-decorator": "DetailsBlockProvider",
"x-decorator-props": {
"resource": "a.o2m",
"collection": "b",
"association": "a.o2m",
"readPretty": true,
"action": "list",
"params": {
"pageSize": 1
},
"rowKey": "id"
},
"x-designer": "DetailsDesigner",
"x-component": "CardItem",
"x-component-props": {
"title": "关系区块"
},
"properties": {
"paj8b2noc1g": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Details",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useDetailsBlockProps }}"
},
"properties": {
"3jisjip7503": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "DetailsActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"x-uid": "cbkfxafywtx",
"x-async": false,
"x-index": 1
},
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"x-uid": "d1ls1w6gpzm",
"x-async": false,
"x-index": 2
},
"pagination": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Pagination",
"x-component-props": {
"useProps": "{{ useDetailsPaginationProps }}"
},
"x-uid": "u0rzv8370za",
"x-async": false,
"x-index": 3
}
},
"x-uid": "1hfu8jbzzqw",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```

286
packages/core/client/docs/en-US/ui-schema/blocks/data/form-read-pretty.md Normal file
View File

@ -0,0 +1,286 @@
# Form (Read pretty)
## UI Schema
### 单数据详情
```json
{
"x-uid": "dt4q817fw81",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a:get",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"resource": "a",
"collection": "a",
"readPretty": true,
"action": "get",
"useParams": "{{ useParamsFromRecord }}",
"useSourceId": "{{ useSourceIdFromParentRecord }}"
},
"x-designer": "FormV2.ReadPrettyDesigner",
"x-component": "CardItem",
"x-component-props": {
"title": "Form read pretty"
},
"properties": {
"30qrxij609o": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "ReadPrettyFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"x-uid": "fznn1ygt50o",
"x-async": false,
"x-index": 1
},
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"x-uid": "t3o4t8fi7l7",
"x-async": false,
"x-index": 2
}
},
"x-uid": "6dp2qqoc4s0",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```
### 关系数据详情
```json
{
"x-uid": "jf470wrzdaf",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a.o2oBelongsTo:get",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"resource": "a.o2oBelongsTo",
"collection": "b",
"association": "a.o2oBelongsTo",
"readPretty": true,
"action": "get",
"useParams": "{{ useParamsFromRecord }}",
"useSourceId": "{{ useSourceIdFromParentRecord }}"
},
"x-designer": "FormV2.ReadPrettyDesigner",
"x-component": "CardItem",
"x-component-props": {
"title": "对一关系详情"
},
"properties": {
"uauk2wbj3iq": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "ReadPrettyFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"x-uid": "r3pcykksp8l",
"x-async": false,
"x-index": 1
},
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"x-uid": "vs000etludp",
"x-async": false,
"x-index": 2
}
},
"x-uid": "rt228uhudcf",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```
### 表格详情
```json
{
"x-uid": "lxcjjkkor1m",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a.o2m:get",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"resource": "a.o2m",
"collection": "b",
"association": "a.o2m",
"readPretty": true,
"action": "get",
"useParams": "{{ useParamsFromRecord }}",
"useSourceId": "{{ useSourceIdFromParentRecord }}"
},
"x-designer": "FormV2.ReadPrettyDesigner",
"x-component": "CardItem",
"x-component-props": {
"title": "表格详情"
},
"properties": {
"7pe17tcgtye": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "ReadPrettyFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"x-uid": "wek8nc795ja",
"x-async": false,
"x-index": 1
},
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"x-uid": "5y5u8qm6yvz",
"x-async": false,
"x-index": 2
}
},
"x-uid": "5bpcm982n51",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```
### 查看关系数据
```json
{
"x-uid": "5ymsrq1fv37",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a.o2m:get",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"resource": "a.o2m",
"collection": "b",
"association": "a.o2m",
"readPretty": true,
"action": "get",
"useParams": "{{ useParamsFromRecord }}",
"useSourceId": "{{ useSourceIdFromParentRecord }}"
},
"x-designer": "FormV2.ReadPrettyDesigner",
"x-component": "CardItem",
"x-component-props": {
"title": "查看关系数据"
},
"properties": {
"vehcfr0fsh2": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "ReadPrettyFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"x-uid": "zpuz629u2dg",
"x-async": false,
"x-index": 1
},
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"x-uid": "b8u8e2k5inf",
"x-async": false,
"x-index": 2
}
},
"x-uid": "2rz0u3j14px",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```

418
packages/core/client/docs/en-US/ui-schema/blocks/data/form.md Normal file
View File

@ -0,0 +1,418 @@
# Form
## UI Schema
### 添加表单
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action-props": {
"skipScopeCheck": true
},
"x-acl-action": "a:create",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"resource": "a",
"collection": "a"
},
"x-designer": "FormV2.Designer",
"x-component": "CardItem",
"x-component-props": {},
"properties": {
"23pj9m7ot5a": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "FormItemInitializers",
"x-uid": "0ctuwnatyzd",
"x-async": false,
"x-index": 1
},
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "CreateFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24
}
},
"properties": {
"j7ta88et3mv": {
"_isJSONSchemaObject": true,
"version": "2.0",
"title": "{{ t(\"Submit\") }}",
"x-action": "submit",
"x-component": "Action",
"x-designer": "Action.Designer",
"x-component-props": {
"type": "primary",
"htmlType": "submit",
"useProps": "{{ useCreateActionProps }}"
},
"x-action-settings": {
"triggerWorkflows": []
},
"type": "void",
"x-uid": "ua858zswy37",
"x-async": false,
"x-index": 1
}
},
"x-uid": "o0riryr0ob0",
"x-async": false,
"x-index": 2
}
},
"x-uid": "1ng4hies4yu",
"x-async": false,
"x-index": 1
}
},
"x-uid": "ebiyvziafda",
"x-async": false,
"x-index": 1
}
```
### 编辑表单
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action-props": {
"skipScopeCheck": false
},
"x-acl-action": "a:update",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"useSourceId": "{{ useSourceIdFromParentRecord }}",
"useParams": "{{ useParamsFromRecord }}",
"action": "get",
"resource": "a",
"collection": "a"
},
"x-designer": "FormV2.Designer",
"x-component": "CardItem",
"x-component-props": {},
"properties": {
"w533dipin7p": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "FormItemInitializers",
"x-uid": "otncpmalhjr",
"x-async": false,
"x-index": 1
},
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "UpdateFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24
}
},
"x-uid": "qjjmm1qkapx",
"x-async": false,
"x-index": 2
}
},
"x-uid": "n12zo6qd72g",
"x-async": false,
"x-index": 1
}
},
"x-uid": "zafyvmng9m5",
"x-async": false,
"x-index": 1
}
```
### 关系新增表单
```json
{
"x-uid": "il5q341k4vg",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action-props": {
"skipScopeCheck": true
},
"x-acl-action": "a.o2m:create",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"useSourceId": "{{ useSourceIdFromParentRecord }}",
"useParams": "{{ useParamsFromRecord }}",
"action": null,
"resource": "a.o2m",
"collection": "b",
"association": "a.o2m"
},
"x-designer": "FormV2.Designer",
"x-component": "CardItem",
"x-component-props": {
"title": "关系新增表单"
},
"properties": {
"3357yvwe4je": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "FormItemInitializers",
"x-uid": "88xhnoml321",
"x-async": false,
"x-index": 1
},
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "CreateFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24
}
},
"x-uid": "dhs8o8vpl1h",
"x-async": false,
"x-index": 2
}
},
"x-uid": "h6fhh9ox9ay",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```
### 关系新增（关系表格里的 Add new）
useSourceIdFromParentRecord 和 useParamsFromRecord 参数缺失
```json
{
"x-uid": "6tknohm4ubr",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action-props": {
"skipScopeCheck": true
},
"x-acl-action": "a.o2m:create",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"resource": "a.o2m",
"collection": "b",
"association": "a.o2m"
},
"x-designer": "FormV2.Designer",
"x-component": "CardItem",
"x-component-props": {
"title": "关系新增表单-Table"
},
"properties": {
"o96izt6ez7m": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "FormItemInitializers",
"properties": {
"pk9l1i26yq6": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid.Row",
"properties": {
"32wz2lr9cry": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid.Col",
"properties": {
"id": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "string",
"x-designer": "FormItem.Designer",
"x-component": "CollectionField",
"x-decorator": "FormItem",
"x-collection-field": "b.id",
"x-component-props": {},
"x-read-pretty": true,
"x-uid": "jb09nj4kbfm",
"x-async": false,
"x-index": 1
}
},
"x-uid": "rtx3b0uom75",
"x-async": false,
"x-index": 1
}
},
"x-uid": "5gvd7ks6m0z",
"x-async": false,
"x-index": 1
}
},
"x-uid": "fcw1y2xk6km",
"x-async": false,
"x-index": 1
},
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "CreateFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24
}
},
"x-uid": "msgopb1meoq",
"x-async": false,
"x-index": 2
}
},
"x-uid": "g0mg6fhho4x",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```
### 关系编辑
```json
{
"x-uid": "kzg1tz339ro",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action-props": {
"skipScopeCheck": false
},
"x-acl-action": "a.o2m:update",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"useSourceId": "{{ useSourceIdFromParentRecord }}",
"useParams": "{{ useParamsFromRecord }}",
"action": "get",
"resource": "a.o2m",
"collection": "b",
"association": "a.o2m"
},
"x-designer": "FormV2.Designer",
"x-component": "CardItem",
"x-component-props": {
"title": "关系编辑表单"
},
"properties": {
"3jqysycq8m0": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "FormV2",
"x-component-props": {
"useProps": "{{ useFormBlockProps }}"
},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "FormItemInitializers",
"x-uid": "sy3sjswogh4",
"x-async": false,
"x-index": 1
},
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "UpdateFormActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24
}
},
"x-uid": "xarcyjpypsy",
"x-async": false,
"x-index": 2
}
},
"x-uid": "lepez9684rm",
"x-async": false,
"x-index": 1
}
},
"x-async": false,
"x-index": 1
}
```

185
packages/core/client/docs/en-US/ui-schema/blocks/data/gantt.md Normal file
View File

@ -0,0 +1,185 @@
# Gantt
## UI Schema
### 甘特图区块
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "users:list",
"x-decorator": "GanttBlockProvider",
"x-decorator-props": {
"collection": "users",
"resource": "users",
"action": "list",
"fieldNames": {
"id": "id",
"start": "createdAt",
"range": "day",
"title": "nickname",
"end": "f_46b1u4dp820"
},
"params": {
"paginate": false
}
},
"x-designer": "Gantt.Designer",
"x-component": "CardItem",
"properties": {
"rx21gtpcj3w": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Gantt",
"x-component-props": {
"useProps": "{{ useGanttBlockProps }}"
},
"properties": {
"toolBar": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24
}
},
"x-initializer": "GanttActionInitializers",
"x-uid": "m0uru68ugw9",
"x-async": false,
"x-index": 1
},
"table": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "array",
"x-decorator": "div",
"x-decorator-props": {
"style": {
"float": "left",
"maxWidth": "35%"
}
},
"x-initializer": "TableColumnInitializers",
"x-component": "TableV2",
"x-component-props": {
"rowKey": "id",
"rowSelection": {
"type": "checkbox"
},
"useProps": "{{ useTableBlockProps }}",
"pagination": false
},
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{ t(\"Actions\") }}",
"x-action-column": "actions",
"x-decorator": "TableV2.Column.ActionBar",
"x-component": "TableV2.Column",
"x-designer": "TableV2.ActionColumnDesigner",
"x-initializer": "TableActionColumnInitializers",
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-decorator": "DndContext",
"x-component": "Space",
"x-component-props": {
"split": "|"
},
"x-uid": "z2vnizu7bds",
"x-async": false,
"x-index": 1
}
},
"x-uid": "8gbabo6kdr6",
"x-async": false,
"x-index": 1
}
},
"x-uid": "5c8g2x6rvro",
"x-async": false,
"x-index": 2
},
"detail": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Gantt.Event",
"properties": {
"drawer": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Action.Drawer",
"x-component-props": {
"className": "nb-action-popup"
},
"title": "{{ t(\"View record\") }}",
"properties": {
"tabs": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializers",
"properties": {
"tab1": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{t(\"Details\")}}",
"x-component": "Tabs.TabPane",
"x-designer": "Tabs.Designer",
"x-component-props": {},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "RecordBlockInitializers",
"x-uid": "jr5h3asz6gp",
"x-async": false,
"x-index": 1
}
},
"x-uid": "8uwfpgyok9x",
"x-async": false,
"x-index": 1
}
},
"x-uid": "bjm4sfwxmrx",
"x-async": false,
"x-index": 1
}
},
"x-uid": "7cmwpc0rrwj",
"x-async": false,
"x-index": 1
}
},
"x-uid": "nffb7qbs96o",
"x-async": false,
"x-index": 3
}
},
"x-uid": "hoi2j5lhlho",
"x-async": false,
"x-index": 1
}
},
"x-uid": "e0rdive4xpa",
"x-async": false,
"x-index": 1
}
```

219
packages/core/client/docs/en-US/ui-schema/blocks/data/grid-card.md Normal file
View File

@ -0,0 +1,219 @@
# GridCard
## UI Schema
### 栅格卡片
```json
{
"type": "void",
"version": "2.0",
"x-designer": "GridCard.Designer",
"x-component": "BlockItem",
"x-decorator": "GridCard.Decorator",
"x-acl-action": "users:view",
"x-component-props": {
"useProps": "{{ useGridCardBlockItemProps }}"
},
"x-decorator-props": {
"action": "list",
"params": {
"pageSize": 12
},
"rowKey": "id",
"resource": "users",
"collection": "users",
"readPretty": true,
"runWhenParamsChanged": true
},
"_isJSONSchemaObject": true,
"properties": {
"actionBar": {
"type": "void",
"version": "2.0",
"x-component": "ActionBar",
"x-initializer": "GridCardActionInitializers",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)"
}
},
"_isJSONSchemaObject": true,
"x-uid": "prx9wnlzqb1",
"x-async": false,
"x-index": 1
},
"list": {
"type": "array",
"version": "2.0",
"x-component": "GridCard",
"x-component-props": {
"useProps": "{{ useGridCardBlockProps }}"
},
"_isJSONSchemaObject": true,
"properties": {
"item": {
"type": "object",
"version": "2.0",
"x-component": "GridCard.Item",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useGridCardItemProps }}"
},
"_isJSONSchemaObject": true,
"properties": {
"grid": {
"type": "void",
"version": "2.0",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"_isJSONSchemaObject": true,
"x-initializer-props": {
"useProps": "{{ useGridCardItemInitializerProps }}"
},
"x-uid": "pq895sv6136",
"x-async": false,
"x-index": 1
},
"actionBar": {
"type": "void",
"version": "2.0",
"x-align": "left",
"x-component": "ActionBar",
"x-initializer": "GridCardItemActionInitializers",
"x-component-props": {
"layout": "one-column",
"useProps": "{{ useGridCardActionBarProps }}"
},
"_isJSONSchemaObject": true,
"x-uid": "w2c3qcp4nme",
"x-async": false,
"x-index": 2
}
},
"x-uid": "1ct8yn1jnzn",
"x-async": false,
"x-index": 1
}
},
"x-uid": "pvnkvtc6tte",
"x-async": false,
"x-index": 2
}
},
"x-uid": "phodsqwsifq",
"x-async": false,
"x-index": 1
}
```
### 关系数据的栅格卡片
```json
{
"x-uid": "yr79zvl98lc",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a.o2m:view",
"x-decorator": "GridCard.Decorator",
"x-decorator-props": {
"resource": "a.o2m",
"collection": "b",
"association": "a.o2m",
"readPretty": true,
"action": "list",
"params": {
"pageSize": 12
},
"runWhenParamsChanged": true,
"columnCount": {
"xs": 1,
"md": 12,
"lg": 12,
"xxl": 12
}
},
"x-component": "BlockItem",
"x-component-props": {
"useProps": "{{ useGridCardBlockItemProps }}"
},
"x-designer": "GridCard.Designer",
"properties": {
"actionBar": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "GridCardActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)"
}
},
"x-uid": "u36l44beq6a",
"x-async": false,
"x-index": 1
},
"list": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "array",
"x-component": "GridCard",
"x-component-props": {
"useProps": "{{ useGridCardBlockProps }}"
},
"properties": {
"item": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "object",
"x-component": "GridCard.Item",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useGridCardItemProps }}"
},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"x-initializer-props": {
"useProps": "{{ useGridCardItemInitializerProps }}"
},
"x-uid": "aqxlonv3bpk",
"x-async": false,
"x-index": 1
},
"actionBar": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-align": "left",
"x-initializer": "GridCardItemActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"useProps": "{{ useGridCardActionBarProps }}",
"layout": "one-column"
},
"x-uid": "zxhqo81kdf5",
"x-async": false,
"x-index": 2
}
},
"x-uid": "ed56owlyz1p",
"x-async": false,
"x-index": 1
}
},
"x-uid": "nfpuvrkwkk7",
"x-async": false,
"x-index": 2
}
},
"x-async": false,
"x-index": 1
}
```

255
packages/core/client/docs/en-US/ui-schema/blocks/data/index.md Normal file
View File

@ -0,0 +1,255 @@
# 数据区块概述
数据可能是某个表（collection）的数据，也可能是某个关系（association）的数据
- collection，如 a 表
- association，如 a.b 关系，关系表为 b
collection 示例
```js
{
"collection": "a"
}
```
association 示例
```js
{
"collection": "b",
"association": "a.b"
}
```
数据的操作
```bash
<collection>:<action>
<collection>.<association>:<action>
```
实际的请求参数
```
<GET|POST> /api/<collection>:<action>
<GET|POST> /api/<collection>:<action>/<filterByTk>
<GET|POST> /api/<collection>/<sourceId>/<association>:<action>
<GET|POST> /api/<collection>/<sourceId>/<association>:<action>/<filterByTk>
```
- collection、association、action 是配置里存好的
- sourceId、filterByTk 由上下文提供
## RecordProvider
Record
```ts
class Record {
protected current = {};
protected parent?: Record;
public isNew = false;
constructor(options = {}) {
const { current, parent, isNew } = options;
this.current = current || {};
this.parent = parent;
this.isNew = isNew;
}
}
```
a:list（**list 外层不套空 RecordPicker**）
```jsx | pure
{list.map((item) => {
const record = new Record({ current: item });
return <RecordProvider record={record}></RecordProvider>
})}
```
a:get(view、edit)
```jsx | pure
const record = new Record({ current: item });
<RecordProvider record={item}></RecordProvider>
```
a:create
```jsx | pure
const record = new Record({ current, isNew: true });
<RecordProvider record={record}></RecordProvider>
```
a.b:list
```jsx | pure
<RecordProvider record={recordA}>
{list.map((item) => {
const recordB = new Record({
current: item,
});
return <RecordProvider record={recordB}></RecordProvider>
})}
</RecordProvider>
```
a.b:get
```jsx | pure
const recordA = new Record({
current: itemA,
});
const recordB = new Record({
current: itemB,
parent: recordA,
});
// 或者
recordB.setParent(recordA);
<RecordProvider record={recordA}>
<RecordProvider record={recordB}></RecordProvider>
</RecordProvider>
```
a.b:create
```jsx | pure
const recordA = new Record({
current: itemA,
});
const recordB = new Record({
isNew: true,
parent: recordA,
});
<RecordProvider record={recordA}>
<RecordProvider record={recordB}></RecordProvider>
</RecordProvider>
```
## 区块
以下重要组件说明
- `DataBlockProvider` 数据区块的总称
- `BlockProvider` 区块的各种参数设置
- `CollectionProvider` collection 信息
- `AssociationProvider` association 信息
- `UseRequestProvider` useRequest 的 result
没有当前记录的区块，如表格
```tsx | pure
<DataBlockProvider>
<ActionBar>
<Action type="filter" />
<Action type="create" />
<Action type="delete" />
</ActionBar>
<Table useProps />
<Pagination />
<DataBlockProvider/>
```
DataBlockProvider 内容
```tsx | pure
<BlockProvider>
<CollectionProvider>
<UseRequestProvider>
{props.children}
</UseRequestProvider>
</CollectionProvider>
<BlockProvider>
```
有当前记录的区块，如表单
```tsx | pure
<DataBlockProvider>
<Form useProps />
<DataBlockProvider/>
```
DataBlockProvider 内容
```tsx | pure
<BlockProvider>
<CollectionProvider>
<UseRequestProvider>
<RecordProvider record={recordA}>
{props.children}
</RecordProvider>
</UseRequestProvider>
</CollectionProvider>
</BlockProvider>
```
有当前父级记录的区块，如对多关系的表格区块，区块本身不套 RecordPicker
```tsx | pure
<RecordProvider record={recordA}>
<DataBlockProvider>
<ActionBar>
<Action type="filter" />
<Action type="create" />
<Action type="delete" />
</ActionBar>
<Table useProps />
<Pagination />
</DataBlockProvider>
<DataBlockProvider>
<ActionBar>
<Action type="filter" />
<Action type="create" />
<Action type="delete" />
</ActionBar>
<Table useProps />
<Pagination />
</DataBlockProvider>
</RecordProvider>
```
DataBlockProvider 内容
```tsx | pure
<BlockProvider>
<AssociationProvider>
<CollectionProvider>
<UseRequestProvider>
{props.children}
</UseRequestProvider>
</CollectionProvider>
</AssociationProvider>
</BlockProvider>
```
有父级记录也有当前记录的区块，如关系的表单
```tsx | pure
<RecordProvider record={recordA}>
<DataBlockProvider>
<Form useProps />
</DataBlockProvider>
<DataBlockProvider>
<Form useProps />
</DataBlockProvider>
</RecordProvider>
```
DataBlockProvider 内容
```tsx | pure
<BlockProvider>
<AssociationProvider>
<CollectionProvider>
<UseRequestProvider>
<RecordProvider record={recordA}>
{props.children}
</RecordProvider>
</UseRequestProvider>
</CollectionProvider>
</AssociationProvider>
</BlockProvider>
```

160
packages/core/client/docs/en-US/ui-schema/blocks/data/kanban.md Normal file
View File

@ -0,0 +1,160 @@
# Kanban
## UI Schema
### 看板区块
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "t_ehwqkw0ljw2:list",
"x-decorator": "KanbanBlockProvider",
"x-decorator-props": {
"collection": "t_ehwqkw0ljw2",
"resource": "t_ehwqkw0ljw2",
"action": "list",
"groupField": "f_5h4umwf59lc",
"params": {
"sort": ["f_5h4umwf59lc_sort"],
"paginate": false
}
},
"x-designer": "Kanban.Designer",
"x-component": "CardItem",
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "KanbanActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)"
}
},
"x-uid": "4vh5t2iohwp",
"x-async": false,
"x-index": 1
},
"iwnc45ou960": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "array",
"x-component": "Kanban",
"x-component-props": {
"useProps": "{{ useKanbanBlockProps }}"
},
"properties": {
"card": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-read-pretty": true,
"x-label-disabled": true,
"x-decorator": "BlockItem",
"x-component": "Kanban.Card",
"x-component-props": {
"openMode": "drawer"
},
"x-designer": "Kanban.Card.Designer",
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-component-props": {
"dndContext": false
},
"x-uid": "3v010y09684",
"x-async": false,
"x-index": 1
}
},
"x-uid": "dk9a5cb9d95",
"x-async": false,
"x-index": 1
},
"cardViewer": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{ t(\"View\") }}",
"x-designer": "Action.Designer",
"x-component": "Kanban.CardViewer",
"x-action": "view",
"x-component-props": {
"openMode": "drawer"
},
"properties": {
"drawer": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{ t(\"View record\") }}",
"x-component": "Action.Container",
"x-component-props": {
"className": "nb-action-popup"
},
"properties": {
"tabs": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializers",
"properties": {
"tab1": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{t(\"Details\")}}",
"x-component": "Tabs.TabPane",
"x-designer": "Tabs.Designer",
"x-component-props": {},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "RecordBlockInitializers",
"x-uid": "1lhiyyydpye",
"x-async": false,
"x-index": 1
}
},
"x-uid": "gisuj0zldz1",
"x-async": false,
"x-index": 1
}
},
"x-uid": "ohly2w4gnwp",
"x-async": false,
"x-index": 1
}
},
"x-uid": "29hjrxcfczh",
"x-async": false,
"x-index": 1
}
},
"x-uid": "0k56h1q80xo",
"x-async": false,
"x-index": 2
}
},
"x-uid": "uny2d4n5ry4",
"x-async": false,
"x-index": 2
}
},
"x-uid": "3gga5lop4t6",
"x-async": false,
"x-index": 1
}
```

213
packages/core/client/docs/en-US/ui-schema/blocks/data/list.md Normal file
View File

@ -0,0 +1,213 @@
# List
## UI Schema
### 列表区块
```json
{
"x-uid": "h9mzrnxokk3",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a:view",
"x-decorator": "List.Decorator",
"x-decorator-props": {
"resource": "a",
"collection": "a",
"readPretty": true,
"action": "list",
"params": {
"pageSize": 10
},
"runWhenParamsChanged": true,
"rowKey": "id"
},
"x-component": "CardItem",
"x-designer": "List.Designer",
"x-component-props": {
"title": "List 区块"
},
"properties": {
"actionBar": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "ListActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)"
}
},
"x-uid": "chjgpgd45qz",
"x-async": false,
"x-index": 1
},
"list": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "array",
"x-component": "List",
"x-component-props": {
"props": "{{ useListBlockProps }}"
},
"properties": {
"item": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "object",
"x-component": "List.Item",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useListItemProps }}"
},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"x-initializer-props": {
"useProps": "{{ useListItemInitializerProps }}"
},
"x-uid": "u45nwmwlone",
"x-async": false,
"x-index": 1
},
"actionBar": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-align": "left",
"x-initializer": "ListItemActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"useProps": "{{ useListActionBarProps }}",
"layout": "one-column"
},
"x-uid": "9erso7nhotq",
"x-async": false,
"x-index": 2
}
},
"x-uid": "qkuzlun8frh",
"x-async": false,
"x-index": 1
}
},
"x-uid": "1mfaa48qy5j",
"x-async": false,
"x-index": 2
}
},
"x-async": false,
"x-index": 1
}
```
### 对多关系的列表区块
```json
{
"x-uid": "6tzpnkz60rx",
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "a.o2m:view",
"x-decorator": "List.Decorator",
"x-decorator-props": {
"resource": "a.o2m",
"collection": "b",
"association": "a.o2m",
"readPretty": true,
"action": "list",
"params": {
"pageSize": 10
},
"runWhenParamsChanged": true
},
"x-component": "CardItem",
"x-designer": "List.Designer",
"x-component-props": {
"title": "对多关系的列表区块"
},
"properties": {
"actionBar": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "ListActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)"
}
},
"x-uid": "i05xr7nfs26",
"x-async": false,
"x-index": 1
},
"list": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "array",
"x-component": "List",
"x-component-props": {
"props": "{{ useListBlockProps }}"
},
"properties": {
"item": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "object",
"x-component": "List.Item",
"x-read-pretty": true,
"x-component-props": {
"useProps": "{{ useListItemProps }}"
},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "ReadPrettyFormItemInitializers",
"x-initializer-props": {
"useProps": "{{ useListItemInitializerProps }}"
},
"x-uid": "krerg70a28e",
"x-async": false,
"x-index": 1
},
"actionBar": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-align": "left",
"x-initializer": "ListItemActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"useProps": "{{ useListActionBarProps }}",
"layout": "one-column"
},
"x-uid": "9745q36ltfv",
"x-async": false,
"x-index": 2
}
},
"x-uid": "yxc0lnax9gk",
"x-async": false,
"x-index": 1
}
},
"x-uid": "6mlzb7p6dvn",
"x-async": false,
"x-index": 2
}
},
"x-async": false,
"x-index": 1
}
```

115
packages/core/client/docs/en-US/ui-schema/blocks/data/map.md Normal file
View File

@ -0,0 +1,115 @@
# Map
## UI Schema
### 地图区块
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-acl-action": "t_ddo5bd0swdg:list",
"x-decorator": "MapBlockProvider",
"x-decorator-props": {
"collection": "t_ddo5bd0swdg",
"resource": "t_ddo5bd0swdg",
"action": "list",
"fieldNames": {
"field": ["f_tmhy5bbusr8"]
},
"params": {
"paginate": false
}
},
"x-designer": "MapBlockDesigner",
"x-component": "CardItem",
"x-filter-targets": [],
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "MapActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 16
}
},
"x-uid": "ap0xzy32bms",
"x-async": false,
"x-index": 1
},
"1672zefmplu": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "MapBlock",
"x-component-props": {
"useProps": "{{ useMapBlockProps }}"
},
"properties": {
"drawer": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Action.Drawer",
"x-component-props": {
"className": "nb-action-popup"
},
"title": "{{ t(\"View record\") }}",
"properties": {
"tabs": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializers",
"properties": {
"tab1": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{t(\"Details\")}}",
"x-component": "Tabs.TabPane",
"x-designer": "Tabs.Designer",
"x-component-props": {},
"properties": {
"grid": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-component": "Grid",
"x-initializer": "RecordBlockInitializers",
"x-uid": "vce3u8hfdrf",
"x-async": false,
"x-index": 1
}
},
"x-uid": "waw7z3qw7nn",
"x-async": false,
"x-index": 1
}
},
"x-uid": "szyybarlapl",
"x-async": false,
"x-index": 1
}
},
"x-uid": "83m07ksqbal",
"x-async": false,
"x-index": 1
}
},
"x-uid": "5cquhqq2161",
"x-async": false,
"x-index": 2
}
},
"x-uid": "p42awfpfnbf",
"x-async": false,
"x-index": 1
}
```

193
packages/core/client/docs/en-US/ui-schema/blocks/data/table.md Normal file
View File

@ -0,0 +1,193 @@
# Table
## UI Schema
### 表格区块
```json
{
"type": "void",
"version": "2.0",
"x-designer": "TableBlockDesigner",
"x-component": "CardItem",
"x-decorator": "TableBlockProvider",
"x-acl-action": "users:list",
"x-filter-targets": [],
"x-decorator-props": {
"action": "list",
"params": {
"pageSize": 20
},
"rowKey": "id",
"dragSort": false,
"resource": "users",
"showIndex": true,
"collection": "users",
"disableTemplate": false
},
"_isJSONSchemaObject": true,
"properties": {
"actions": {
"type": "void",
"version": "2.0",
"x-component": "ActionBar",
"x-initializer": "TableActionInitializers",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)"
}
},
"_isJSONSchemaObject": true,
"x-uid": "55tgsn1puqk",
"x-async": false,
"x-index": 1
},
"g22il5nkv67": {
"type": "array",
"version": "2.0",
"x-component": "TableV2",
"x-initializer": "TableColumnInitializers",
"x-component-props": {
"rowKey": "id",
"useProps": "{{ useTableBlockProps }}",
"rowSelection": {
"type": "checkbox"
}
},
"_isJSONSchemaObject": true,
"properties": {
"actions": {
"type": "void",
"title": "{{ t(\"Actions\") }}",
"version": "2.0",
"x-designer": "TableV2.ActionColumnDesigner",
"x-component": "TableV2.Column",
"x-decorator": "TableV2.Column.ActionBar",
"x-initializer": "TableActionColumnInitializers",
"x-action-column": "actions",
"_isJSONSchemaObject": true,
"properties": {
"actions": {
"type": "void",
"version": "2.0",
"x-component": "Space",
"x-decorator": "DndContext",
"x-component-props": {
"split": "|"
},
"_isJSONSchemaObject": true,
"x-uid": "qkcugf5l0h6",
"x-async": false,
"x-index": 1
}
},
"x-uid": "kbgbskxsj3j",
"x-async": false,
"x-index": 1
}
},
"x-uid": "6r8e3mhnuxg",
"x-async": false,
"x-index": 2
}
},
"x-uid": "b87bbc5x0cp",
"x-async": false,
"x-index": 1
}
```
### 对多关系区块
```json
{
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-decorator": "TableBlockProvider",
"x-acl-action": "a.o2m:list",
"x-decorator-props": {
"collection": "b",
"resource": "a.o2m",
"action": "list",
"params": {
"pageSize": 20
},
"showIndex": true,
"dragSort": false,
"disableTemplate": false,
"association": "a.o2m"
},
"x-designer": "TableBlockDesigner",
"x-component": "CardItem",
"x-filter-targets": [],
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-initializer": "TableActionInitializers",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)"
}
},
"x-uid": "0gwze38mzps",
"x-async": false,
"x-index": 1
},
"0wuk1cpy5zp": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "array",
"x-initializer": "TableColumnInitializers",
"x-component": "TableV2",
"x-component-props": {
"rowKey": "id",
"rowSelection": {
"type": "checkbox"
},
"useProps": "{{ useTableBlockProps }}"
},
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"title": "{{ t(\"Actions\") }}",
"x-action-column": "actions",
"x-decorator": "TableV2.Column.ActionBar",
"x-component": "TableV2.Column",
"x-designer": "TableV2.ActionColumnDesigner",
"x-initializer": "TableActionColumnInitializers",
"properties": {
"actions": {
"_isJSONSchemaObject": true,
"version": "2.0",
"type": "void",
"x-decorator": "DndContext",
"x-component": "Space",
"x-component-props": {
"split": "|"
},
"x-uid": "gq0nkc7rf0q",
"x-async": false,
"x-index": 1
}
},
"x-uid": "zx97354nzfq",
"x-async": false,
"x-index": 1
}
},
"x-uid": "nss8uocacdq",
"x-async": false,
"x-index": 2
}
},
"x-uid": "0j5kcrius5z",
"x-async": false,
"x-index": 1
}
```

Some files were not shown because too many files have changed in this diff Show More