feat: document translation
This commit is contained in:
chenos
parent
14f492f414
commit
08ef78ae8b
@ -3,6 +3,8 @@ import { defineConfig } from 'dumi';
|
||||
const baseUrl = `http://localhost:${process.env.API_PORT || '13001'}/`;
|
||||
console.log('baseUrl', baseUrl);
|
||||
|
||||
process.env.MFSU_AD = 'none';
|
||||
|
||||
export default defineConfig({
|
||||
title: ' ',
|
||||
hash: true,
|
||||
@ -45,6 +47,12 @@ export default defineConfig({
|
||||
top: 150px !important;
|
||||
}
|
||||
}
|
||||
video {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 8px 24px -2px rgb(0 0 0 / 5%);
|
||||
}
|
||||
`,
|
||||
],
|
||||
// mfsu: {},
|
||||
|
||||
@ -8,8 +8,8 @@ nav:
|
||||
|
||||
# Components
|
||||
|
||||
NocoBase 的客户端组件总共有三类：
|
||||
There are a total of three types of client components for NocoBase.
|
||||
|
||||
- 通过 createRouteSwitch 创建的路由组件，如 Layou、Page
|
||||
- 通过 createCollectionField 创建的字段组件，用于扩展字段
|
||||
- 通过 createSchemaComponent 创建的 JSON Schema 组件，可以是任意东西，比如表格、表单、日历、看板等。Schema Component 可用于 Route Component 或 Collection Field 中。
|
||||
- Routing components created by createRouteSwitch, such as Layou, Page
|
||||
- Field components created by createCollectionField, which are used to extend fields
|
||||
- JSON Schema components created by createSchemaComponent, which can be anything, such as tables, forms, calendars, kanban, etc. Schema Component can be used in Route Component or Collection Field.
|
||||
|
||||
@ -6,6 +6,8 @@ nav:
|
||||
order: 4
|
||||
---
|
||||
|
||||
# 组件
|
||||
|
||||
NocoBase 的客户端组件总共有三类：
|
||||
|
||||
- 通过 createRouteSwitch 创建的路由组件，如 Layou、Page
|
||||
|
||||
@ -8,3 +8,5 @@ group:
|
||||
---
|
||||
|
||||
# AdminLayout
|
||||
|
||||
Coming soon...
|
||||
@ -8,3 +8,5 @@ group:
|
||||
---
|
||||
|
||||
# AdminLayout
|
||||
|
||||
待补充...
|
||||
@ -7,3 +7,5 @@ group:
|
||||
---
|
||||
|
||||
# AuthLayout
|
||||
|
||||
Coming soon...
|
||||
@ -5,4 +5,477 @@ group:
|
||||
order: 2
|
||||
---
|
||||
|
||||
# Action
|
||||
# Action - 操作
|
||||
|
||||
## Node Tree
|
||||
|
||||
<pre lang="tsx">
|
||||
////////// 单节点 //////////
|
||||
|
||||
// 常规按钮操作
|
||||
<Action/>
|
||||
// 内链
|
||||
<Action.Link/>
|
||||
// 外链
|
||||
<Action.URL/>
|
||||
|
||||
////////// 弹出层相关操作 //////////
|
||||
|
||||
// 对话框
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Modal title={'对话框标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Modal>
|
||||
</Action>
|
||||
|
||||
// 抽屉
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Drawer title={'抽屉标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Drawer>
|
||||
</Action>
|
||||
|
||||
// 气泡
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Popover title={'气泡标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Popover>
|
||||
</Action>
|
||||
|
||||
// 指定容器
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Container>
|
||||
// 添加其他节点
|
||||
</Action.Container>
|
||||
</Action>
|
||||
|
||||
////////// 操作分组 //////////
|
||||
|
||||
// 下拉操作
|
||||
<Action.Dropdown>
|
||||
<Action/>
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Modal title={'对话框标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Modal>
|
||||
</Action>
|
||||
</Action.Dropdown>
|
||||
</pre>
|
||||
|
||||
## Designable Bar
|
||||
|
||||
- Action.DesignableBar
|
||||
- Action.Modal.DesignableBar
|
||||
- Action.Drawer.DesignableBar
|
||||
- Action.Popover.DesignableBar
|
||||
|
||||
## Examples
|
||||
|
||||
### Action
|
||||
|
||||
```tsx
|
||||
/**
|
||||
* title: 按钮操作
|
||||
* desc: 可以通过配置 `useAction` 来处理操作逻辑
|
||||
*/
|
||||
import React from 'react';
|
||||
// @ts-ignore
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
function useAction() {
|
||||
return {
|
||||
run() {
|
||||
alert('这是自定义的操作逻辑');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
useAction: '{{ useAction }}',
|
||||
tooltip: '提示信息',
|
||||
confirm: {
|
||||
title: 'Do you Want to delete these items?',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
debug={true}
|
||||
scope={{ useAction }}
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Modal
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'ModalForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Drawer
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-component': 'Action.Drawer',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'DrawerForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Drawer',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Dropdown
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '下拉菜单',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
dropdown1: {
|
||||
type: 'void',
|
||||
'x-component': 'Action.Dropdown',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
item1: {
|
||||
type: 'void',
|
||||
title: `操作1`,
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component': 'Menu.Action',
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-component-props': {
|
||||
addNewComponent: 'AddNew.FormItem',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
item2: {
|
||||
type: 'void',
|
||||
title: `操作2`,
|
||||
'x-designable-bar': 'Menu.DesignableBar',
|
||||
'x-component': 'Menu.Action',
|
||||
properties: {
|
||||
modal2: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
debug={true}
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Popover
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-component': 'Action.Popover',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'PopoverForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Popover',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Group
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'group1',
|
||||
'x-component': 'Action.Group',
|
||||
properties: {
|
||||
a1: {
|
||||
type: 'void',
|
||||
title: '按钮1',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {},
|
||||
},
|
||||
a2: {
|
||||
type: 'void',
|
||||
title: '按钮2',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Bar
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'actionbar1',
|
||||
'x-component': 'Action.Bar',
|
||||
'x-designable-bar': 'Action.Bar.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
@ -5,4 +5,477 @@ group:
|
||||
order: 2
|
||||
---
|
||||
|
||||
# Action
|
||||
# Action - 操作
|
||||
|
||||
## Node Tree
|
||||
|
||||
<pre lang="tsx">
|
||||
////////// 单节点 //////////
|
||||
|
||||
// 常规按钮操作
|
||||
<Action/>
|
||||
// 内链
|
||||
<Action.Link/>
|
||||
// 外链
|
||||
<Action.URL/>
|
||||
|
||||
////////// 弹出层相关操作 //////////
|
||||
|
||||
// 对话框
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Modal title={'对话框标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Modal>
|
||||
</Action>
|
||||
|
||||
// 抽屉
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Drawer title={'抽屉标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Drawer>
|
||||
</Action>
|
||||
|
||||
// 气泡
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Popover title={'气泡标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Popover>
|
||||
</Action>
|
||||
|
||||
// 指定容器
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Container>
|
||||
// 添加其他节点
|
||||
</Action.Container>
|
||||
</Action>
|
||||
|
||||
////////// 操作分组 //////////
|
||||
|
||||
// 下拉操作
|
||||
<Action.Dropdown>
|
||||
<Action/>
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Modal title={'对话框标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Modal>
|
||||
</Action>
|
||||
</Action.Dropdown>
|
||||
</pre>
|
||||
|
||||
## Designable Bar
|
||||
|
||||
- Action.DesignableBar
|
||||
- Action.Modal.DesignableBar
|
||||
- Action.Drawer.DesignableBar
|
||||
- Action.Popover.DesignableBar
|
||||
|
||||
## Examples
|
||||
|
||||
### Action
|
||||
|
||||
```tsx
|
||||
/**
|
||||
* title: 按钮操作
|
||||
* desc: 可以通过配置 `useAction` 来处理操作逻辑
|
||||
*/
|
||||
import React from 'react';
|
||||
// @ts-ignore
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
function useAction() {
|
||||
return {
|
||||
run() {
|
||||
alert('这是自定义的操作逻辑');
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
useAction: '{{ useAction }}',
|
||||
tooltip: '提示信息',
|
||||
confirm: {
|
||||
title: 'Do you Want to delete these items?',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
debug={true}
|
||||
scope={{ useAction }}
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Modal
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'ModalForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Drawer
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-component': 'Action.Drawer',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'DrawerForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Drawer',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Dropdown
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '下拉菜单',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
dropdown1: {
|
||||
type: 'void',
|
||||
'x-component': 'Action.Dropdown',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
item1: {
|
||||
type: 'void',
|
||||
title: `操作1`,
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component': 'Menu.Action',
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
'x-designable-bar': 'Input.DesignableBar',
|
||||
},
|
||||
grid: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-component-props': {
|
||||
addNewComponent: 'AddNew.FormItem',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
item2: {
|
||||
type: 'void',
|
||||
title: `操作2`,
|
||||
'x-designable-bar': 'Menu.DesignableBar',
|
||||
'x-component': 'Menu.Action',
|
||||
properties: {
|
||||
modal2: {
|
||||
type: 'void',
|
||||
title: '对话框标题',
|
||||
'x-component': 'Action.Modal',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
debug={true}
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Popover
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { Space } from 'antd';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: '按钮',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-component': 'Action.Popover',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const schema2 = {
|
||||
type: 'void',
|
||||
name: 'action1',
|
||||
title: 'PopoverForm',
|
||||
'x-component': 'Action',
|
||||
'x-designable-bar': 'Action.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
properties: {
|
||||
modal1: {
|
||||
type: 'void',
|
||||
title: '抽屉标题',
|
||||
'x-decorator': 'Form',
|
||||
'x-component': 'Action.Popover',
|
||||
properties: {
|
||||
input: {
|
||||
type: 'string',
|
||||
title: '输入框',
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Space>
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
<SchemaRenderer
|
||||
schema={schema2}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Group
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'group1',
|
||||
'x-component': 'Action.Group',
|
||||
properties: {
|
||||
a1: {
|
||||
type: 'void',
|
||||
title: '按钮1',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {},
|
||||
},
|
||||
a2: {
|
||||
type: 'void',
|
||||
title: '按钮2',
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Action.Bar
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
|
||||
const schema = {
|
||||
type: 'void',
|
||||
name: 'actionbar1',
|
||||
'x-component': 'Action.Bar',
|
||||
'x-designable-bar': 'Action.Bar.DesignableBar',
|
||||
'x-component-props': {
|
||||
},
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<SchemaRenderer
|
||||
schema={schema}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
@ -4,39 +4,32 @@ order: 2
|
||||
|
||||
# Client Components
|
||||
|
||||
为了让更多非开发人员也能参与进来，NocoBase 提供了配套的客户端 —— 无代码的可视化界面。客户端界面非常灵活，由不同组件构成，分为了三类：
|
||||
To allow more non-developers to participate, NocoBase provides a companion client - a visual interface without code. The client interface is very flexible and consists of different components, which are divided into three categories.
|
||||
|
||||
- 通过 createRouteSwitch 创建的路由组件，如 Layout、Page
|
||||
- 通过 createCollectionField 创建的字段组件，用于扩展字段
|
||||
- 通过 createSchemaComponent 创建的 JSON Schema 组件，可以是任意东西，比如表格、表单、日历、看板等
|
||||
- Routing components created by createRouteSwitch, such as Layout, Page
|
||||
- Field components created by createCollectionField, used to extend fields
|
||||
- JSON Schema components created by createSchemaComponent, which can be anything, such as tables, forms, calendars, kanban, etc.
|
||||
|
||||
[更多组件内容，查看组件章节](#)
|
||||
[For more on components, see the section on components](#)
|
||||
|
||||
## 组件树结构
|
||||
## Component tree structure
|
||||
|
||||
界面是由组件构成的组件树，结构如下：
|
||||
The interface is a component tree composed of components with the following structure.
|
||||
|
||||
<pre lang="tsx">
|
||||
// 布局
|
||||
<Layout>
|
||||
// 页面
|
||||
<Page>
|
||||
// 栅格
|
||||
<Grid>
|
||||
// 区块，以表格为例
|
||||
// Block, table
|
||||
<Table>
|
||||
// 配置工具栏
|
||||
<Table.DesignableBar/>
|
||||
// 操作栏
|
||||
<Table.ActionBar>
|
||||
// 操作
|
||||
<Action/>
|
||||
<Action/>
|
||||
</Table.ActionBar>
|
||||
// 内容区
|
||||
<Table.Content>
|
||||
<Table.Column>
|
||||
// 表格列的字段
|
||||
// Fields in table columns
|
||||
<CollectionField />
|
||||
</Table.Column>
|
||||
<Table.Column>
|
||||
@ -50,26 +43,25 @@ order: 2
|
||||
</Layout>
|
||||
</pre>
|
||||
|
||||
注：以上例子只为表达组件树的结构和组件之间的关系，实际代码并不如此。
|
||||
Note: The above example is only for expressing the structure of the component tree and the relationship between components, the actual code does not.
|
||||
|
||||
接下来，我们来详细的介绍各部分的概念。
|
||||
Next, let's introduce the concept of each component in detail.
|
||||
## Layout and pages
|
||||
|
||||
## 布局和页面
|
||||
Pages are web pages that can be accessed by address. Different pages may have the same header, footer and navigation between them, and usually we put these common contents in the layout component. For example, the initialized NocoBase provides two layout components, as shown in
|
||||
|
||||
页面是可以通过地址访问的网页，不同页面之间可能具有相同的页眉、页脚和导航，通常我们会把这些公共的内容放在布局组件里。例如，初始化的 NocoBase 提供了两个布局组件，如图所示：
|
||||
Figure
|
||||
|
||||
图
|
||||
- AuthLayout: accessible without login, usually used to embed login, registration, forgot password, etc. pages.
|
||||
- AdminLayout: requires login and manages all pages of the backend.
|
||||
|
||||
- AuthLayout：无需登录就能访问，一般用于嵌入登录、注册、忘记密码等页面。
|
||||
- AdminLayout：需要登录，管理后台的所有页面。
|
||||
Layout and page components are registered through createRouteSwitch, more extensions are available here.
|
||||
|
||||
布局和页面组件通过 createRouteSwitch 注册，更多扩展内容点此查看。
|
||||
## Page content layout
|
||||
|
||||
## 页面内容排版
|
||||
For developers, the writing of page content is free, but to facilitate the layout of page content, two types of layout are provided.
|
||||
|
||||
对开发者来说，页面内容的编写是自由的，不过为了方便对页面内容进行排版，提供了两种排版方式：
|
||||
|
||||
### 简易的上下结构
|
||||
### Simple top-down structure
|
||||
|
||||
<pre lang="tsx">
|
||||
<Page>
|
||||
@ -79,13 +71,13 @@ order: 2
|
||||
</Page>
|
||||
</pre>
|
||||
|
||||
例子如下：
|
||||
Example
|
||||
|
||||
```js
|
||||
// 示例
|
||||
// coming soon
|
||||
```
|
||||
|
||||
### 可拖拽的栅格
|
||||
### Drag and drop grid
|
||||
|
||||
<pre lang="tsx">
|
||||
<Page>
|
||||
@ -110,25 +102,25 @@ order: 2
|
||||
</Page>
|
||||
</pre>
|
||||
|
||||
栅格组件 Grid 基于行（Grid.Row）和列（Grid.Col）来定义区块的外部框架。例子如下：
|
||||
Grid component defines the outer frame of the block based on rows (Grid.Row) and columns (Grid.Col). Examples are as follows:
|
||||
|
||||
```js
|
||||
// 示例
|
||||
// coming soon
|
||||
```
|
||||
|
||||
## AddNew
|
||||
|
||||
AddNew 是页面可视化配置最重要的操作按钮，更多关于 AddNew 的内容点此查看
|
||||
AddNew is the most important button for visual configuration of the page, more about [AddNew](#) here
|
||||
|
||||
## 区块 - Block
|
||||
## Block
|
||||
|
||||
区块一般放在页面里，可以是任意东西，包括文字、附件、表格、表单、日历、看板等等。一个完整的区块由三部分组成：
|
||||
Blocks are generally placed in pages and can be anything, including text, attachments, tables, forms, calendars, kanban boards, etc. A complete block consists of three parts.
|
||||
|
||||
- 内容区 Content，区块的主体
|
||||
- 操作栏 ActionBar，可以放置各种操作按钮，用于操作区块数据（可选）
|
||||
- 配置工具栏 DesignableBar，操作区块配置的按钮（可选）
|
||||
- Content, the body of the block
|
||||
- ActionBar, where you can place various action buttons to manipulate the block data (optional)
|
||||
- DesignableBar, buttons for operating the block configuration (optional)
|
||||
|
||||
以表格区块为例，组件结构如下：
|
||||
Take the table block as an example, the component structure is as follows:
|
||||
|
||||
<pre lang="tsx">
|
||||
<Table>
|
||||
@ -138,84 +130,83 @@ AddNew 是页面可视化配置最重要的操作按钮，更多关于 AddNew
|
||||
</Table>
|
||||
</pre>
|
||||
|
||||
具体形态：
|
||||
Example
|
||||
|
||||
```js
|
||||
//示例（这里放上一个表示区块结构的示例）
|
||||
// coming soon
|
||||
```
|
||||
|
||||
区块有几种类型：
|
||||
There are several types of blocks.
|
||||
|
||||
- 数据类型，用于展示数据表的数据，如表格、日历、看板、表单、详情等。
|
||||
- 多媒体，用于丰富页面内容，如文本段、附件等。暂时只有一个简易的 Markdown。
|
||||
- 图表，用于展示数据统计。
|
||||
- 模板，可直接将某些成品模板化，直接应用到页面上。
|
||||
- Data types, used to display data from data tables, such as tables, calendars, kanban, forms, details, etc.
|
||||
- Multimedia, for enriching page content, such as text paragraphs, attachments, etc. For now there is only a simple Markdown.
|
||||
- Charts, for displaying data statistics.
|
||||
- Templates, which can directly template certain finished products and apply them directly to the page.
|
||||
|
||||
区块可以任意扩展，如何扩展查看 createSchemaComponent 章节。
|
||||
Blocks can be extended at will, see the [createSchemaComponent](#) chapter for how to do so.
|
||||
|
||||
## 操作栏 - ActionBar
|
||||
## ActionBar
|
||||
|
||||
操作栏是一系列操作的集合，一般用于区块内部。用户发出操作指令，程序做出改变，并将结果响应在区块内容区。
|
||||
An action bar is a collection of actions, typically used inside a block. The user issues an action command, the program makes a change, and responds with the result in the block's content area.
|
||||
|
||||
例如：
|
||||
Example.
|
||||
|
||||
表格，内容区是一个表格，操作区会放置一些操作按钮，如筛选、新增、删除、导出等
|
||||
Form, the content area is a table, and the action area will place some action buttons, such as filter, add, delete, export, etc
|
||||
|
||||
```js
|
||||
// 示例（放一个简易的表格，把操作栏重点突出一下）
|
||||
// coming soon
|
||||
```
|
||||
|
||||
详情，内容区是详情数据，操作区会放置编辑、导出等按钮
|
||||
details, the content area is the details of the data, the operation area will be placed on the edit, export and other buttons
|
||||
|
||||
```js
|
||||
// 示例（放一个简易的详情，把操作栏重点突出一下）
|
||||
// coming soon
|
||||
```
|
||||
|
||||
不同的区块，操作栏的按钮可能不同。操作栏的按钮也是可以自定义的，具体内容查看操作章节。
|
||||
The buttons of the action bar may be different for different blocks. The action bar buttons are also customizable, check the action chapter for details.
|
||||
|
||||
## 操作 - Action
|
||||
## Action
|
||||
|
||||
操作是封装的一段指令，一般需要用户参与。
|
||||
An action is an encapsulated piece of instruction that generally requires user participation.
|
||||
|
||||
例如：
|
||||
For example.
|
||||
|
||||
- 删除数据，需要用户选中待删除数据，再触发删除指令
|
||||
- 筛选数据，需要用户填写筛选项，再触发筛选指令
|
||||
- 新增数据，需要用户填写数据之后提交，触发新增操作指令
|
||||
- 查看详情，用户点击操作按钮，弹窗查看详情或当前窗口打开详情页查看
|
||||
- Delete data, which requires the user to select the data to be deleted, and then trigger the delete command
|
||||
- Filtering data requires the user to fill in the filter items and then triggers the filter command
|
||||
- Add data, the user needs to fill in the data and then submit it, triggering the add operation instruction
|
||||
- View details, the user clicks the operation button, the pop-up window to view the details or the current window to open the details page to view
|
||||
|
||||
最简单的操作，只需要绑定一段指令即可，简单来说就是指定一段函数，无需传参。组件结构如下：
|
||||
The simplest operation, you only need to bind a paragraph of instructions, simply specify a function, no need to pass parameters. The component structure is as follows.
|
||||
|
||||
<pre lang="tsx">
|
||||
<Action useAction={useAction} />
|
||||
</pre>
|
||||
|
||||
大部分的操作指令需要用户提供参数，如新增数据操作，需要用户填写数据，填写数据一般需要弹出表单，用户填写完数据，点击提交，才触发操作指令。组件结构如下：
|
||||
Most of the action instructions require user-supplied parameters, such as the add data action, which requires the user to fill in the data, which usually requires a pop-up form, and the user fills in the data and clicks submit to trigger the action instruction. The component structure is as follows.
|
||||
|
||||
<pre lang="tsx">
|
||||
<Action useAction={useAction}>
|
||||
{/* 这是个弹窗表单，内置提交按钮，点击提交触发操作指令，具体代码省略 */}
|
||||
{/* This is a popup form with a built-in submit button that triggers an action command when clicked, the specific code is omitted */}
|
||||
<Action.Modal x-decorator={'Form'}></Action.Modal>
|
||||
</Action>
|
||||
</pre>
|
||||
|
||||
一个完整的操作大概分为两步：
|
||||
A complete action is roughly divided into two steps.
|
||||
|
||||
- 为 Action 绑定一段指令
|
||||
- 如果指令需要用户提供参数，需要提供交互界面，目前内置的有：
|
||||
- Action.Drawer：抽屉
|
||||
- Action.Modal：对话框
|
||||
- Action.Popover：气泡
|
||||
- Bind a directive to the Action
|
||||
- If the directive requires user-supplied parameters, it needs to provide an interaction interface, which is currently built in as follows
|
||||
- Action.Drawer: drawer
|
||||
- Modal: dialog box
|
||||
- Popover: bubble
|
||||
|
||||
操作是 NocoBase 里非常重要的一个概念，更多详情点此查看
|
||||
Action is a very important concept in NocoBase, more details click here to see
|
||||
|
||||
## 配置工具栏 - DesignableBar
|
||||
## DesignableBar
|
||||
|
||||
所有的 Schema Component 都可以绑定自己的配置工具栏（DesignableBar），用于修改当前组件的 Schema。
|
||||
|
||||
All Schema Components can be bound to their own configuration toolbar (DesignableBar) for modifying the Schema of the current component.
|
||||
|
||||
**什么是 Schema Component？**
|
||||
通过 Schema 协议编写的类 JSON Schema 格式的组件，如：
|
||||
**What is a Schema Component?**
|
||||
A component written in JSON-like Schema format via the Schema protocol, e.g.
|
||||
|
||||
```js
|
||||
{
|
||||
@ -226,9 +217,9 @@ AddNew 是页面可视化配置最重要的操作按钮，更多关于 AddNew
|
||||
}
|
||||
```
|
||||
|
||||
举几个例子，如：
|
||||
To give a few examples, e.g.
|
||||
|
||||
表单字段的 JSON Schema
|
||||
JSON Schema for form fields
|
||||
|
||||
```js
|
||||
const schema = {
|
||||
@ -239,11 +230,11 @@ const schema = {
|
||||
};
|
||||
```
|
||||
|
||||
表单项的配置工具栏 `Form.Field.DesignableBar` 的效果
|
||||
The effect of the form item's configuration toolbar `Form.Field.DesignableBar`
|
||||
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/1ffba32f9a5625760c3fe11e7eb19974.png" style="max-width: 350px;"/>
|
||||
|
||||
表格的 JSON Schema
|
||||
JSON Schema for the form
|
||||
|
||||
```js
|
||||
const schema = {
|
||||
@ -254,11 +245,11 @@ const schema = {
|
||||
};
|
||||
```
|
||||
|
||||
表格配置工具栏 `Table.DesignableBar` 的效果
|
||||
The effect of the table configuration toolbar `Table.DesignableBar`
|
||||
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/dcd762a0444ef55a8515c53d706f7bc4.png" style="max-width: 250px;"/>
|
||||
|
||||
菜单项的 JSON Schema：
|
||||
JSON Schema for the menu item.
|
||||
|
||||
```js
|
||||
const schema = {
|
||||
@ -268,15 +259,15 @@ const schema = {
|
||||
};
|
||||
```
|
||||
|
||||
菜单项配置工具栏 `Menu.Item.DesignableBar` 的效果
|
||||
Effect of menu item configuration toolbar `Menu.Item.DesignableBar`
|
||||
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/984ab6da6a8f72fe790bb9bd18b3eb35.png" style="max-width: 200px;"/>
|
||||
|
||||
更多配置工具栏详情点此查看
|
||||
For more details on the configuration toolbar click here
|
||||
|
||||
## 字段组件 - CollectionField
|
||||
## CollectionField
|
||||
|
||||
字段组件的配置参数可能非常多，在不同数据区块里也可能用到同一个字段组件，为了减少代码重复，NocoBase 里，将字段组件的配置交由数据表统一管理。一处配置，多处使用。数据区块里直接引用字段组件，如果有其他不同参数再另行扩展。
|
||||
The configuration parameters of field components can be very many, and the same field component can be used in different data blocks. In order to reduce code duplication, NocoBase assigns the configuration of field components to the data table for unified management. One configuration, many uses. The field component is directly referenced in the data block, and then extended if there are other different parameters.
|
||||
|
||||
<pre lang="tsx">
|
||||
<Table>
|
||||
@ -302,23 +293,23 @@ const schema = {
|
||||
</Form>
|
||||
</pre>
|
||||
|
||||
字段组件有三种显示状态：
|
||||
The field component has three display states.
|
||||
|
||||
- 可填写 - editable
|
||||
- 不可填写 - disabled
|
||||
- 阅读模式 - read-pretty
|
||||
- fillable - editable
|
||||
- unfillable - disabled
|
||||
- Read mode - read-pretty
|
||||
|
||||
以单行文本（Input）为例：
|
||||
As an example for a single line of text (Input).
|
||||
|
||||
```js
|
||||
// 示例（Input 的三种显示状态）
|
||||
// example (three display states for Input)
|
||||
|
||||
// 示例待补充
|
||||
// example to be added
|
||||
```
|
||||
|
||||
**为什么字段有多种显示状态？**
|
||||
**Why do fields have multiple display states? **
|
||||
|
||||
- 在表单中，一般情况字段为可填写状态（editable），但如果只供查看，这时候就会把字段设置为 disabled 或 read-pretty。
|
||||
- 在表格中，一般情况字段为阅读模式（read-pretty），但如果需要在表格内快捷编辑，又可以动态的将某个字段激活为 editable。
|
||||
- In a form, the field is normally filled in (editable), but if it is for viewing only, the field is set to disabled or read-pretty.
|
||||
- In forms, fields are generally read-pretty, but if you need to edit them quickly within the form, you can dynamically activate a field as editable.
|
||||
|
||||
字段组件可以任意扩展，如何扩展查看 createCollectionField 章节。
|
||||
The field component can be extended in any way, see the createCollectionField section for how to do so.
|
||||
|
||||
@ -241,7 +241,7 @@ const schema = {
|
||||
|
||||
表单项的配置工具栏 `Form.Field.DesignableBar` 的效果
|
||||
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/1ffba32f9a5625760c3fe11e7eb19974.png" style="max-width: 350px;"/>
|
||||
|
||||
表格的 JSON Schema
|
||||
|
||||
@ -256,7 +256,7 @@ const schema = {
|
||||
|
||||
表格配置工具栏 `Table.DesignableBar` 的效果
|
||||
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/dcd762a0444ef55a8515c53d706f7bc4.png" style="max-width: 250px;"/>
|
||||
|
||||
菜单项的 JSON Schema：
|
||||
|
||||
@ -270,7 +270,7 @@ const schema = {
|
||||
|
||||
菜单项配置工具栏 `Menu.Item.DesignableBar` 的效果
|
||||
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/984ab6da6a8f72fe790bb9bd18b3eb35.png" style="max-width: 200px;"/>
|
||||
|
||||
更多配置工具栏详情点此查看
|
||||
|
||||
|
||||
@ -8,11 +8,11 @@ group:
|
||||
|
||||
# Collections & Fields
|
||||
|
||||
NocoBase 的数据表由字段（列）和记录（行）组成。数据表的概念与关系型数据库的数据表概念相近，但是字段的概念并不相同。
|
||||
The data table of NocoBase consists of fields (columns) and records (rows). The concept of a data table is similar to the concept of a relational database data table, but the concept of fields is not the same.
|
||||
|
||||
## 字段
|
||||
## Fields
|
||||
|
||||
NocoBase 里，最常见的字段具有组件形态，如：单行文本、多行文本、单选框。这些组件都有数值（value），可交由用户填写，称为有值组件。结构如下：
|
||||
In NocoBase, the most common fields have component forms, such as: single-line text, multi-line text, and single-select boxes. These components have values, which can be filled in by the user, and are called valued components. The structure is as follows:
|
||||
|
||||
```ts
|
||||
{
|
||||
@ -21,22 +21,22 @@ NocoBase 里，最常见的字段具有组件形态，如：单行文本、多
|
||||
name: 'description',
|
||||
uiSchema: {
|
||||
type: 'string',
|
||||
title: '描述',
|
||||
title: 'Description',
|
||||
'x-component': 'Input.TextArea',
|
||||
'x-decorator': 'FormItem',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
上述是一个描述字段的配置：
|
||||
The above is a description of the field configuration.
|
||||
|
||||
- type 表示字段的存储类型，为 text 长文本类型
|
||||
- uiSchema 为字段的组件参数
|
||||
- uiSchema.type 为字段组件的数值类型
|
||||
- uiSchema.x-component 表示组件类型，为多行输入框
|
||||
- 绑定了组件的字段，都要设置一个 interface，表示当前字段的类型，例子描述字段为多行文本类型
|
||||
- type indicates the field's storage type, which is text long text type
|
||||
- uiSchema is the component parameter of the field
|
||||
- uiSchema.type is the value type of the field's component
|
||||
- uiSchema.x-component indicates the component type, which is a multi-line input box
|
||||
- The fields bound to the component are set with an interface that indicates the type of the current field, the example describes the field as a multi-line text type
|
||||
|
||||
除了常见的绑定了组件的字段以外，还有一些无需绑定组件的字段，如 token 字段，这类组件并不会显示在界面上。无组件字段的结构如下：
|
||||
In addition to the common fields bound to components, there are also fields that do not need to be bound to components, such as token fields, which are not displayed on the interface. The structure of a field without a component is as follows.
|
||||
|
||||
```ts
|
||||
{
|
||||
@ -45,38 +45,38 @@ NocoBase 里，最常见的字段具有组件形态，如：单行文本、多
|
||||
}
|
||||
```
|
||||
|
||||
**为什么字段要区分存储类型和组件类型？**
|
||||
**Why do fields distinguish between storage types and component types? **
|
||||
|
||||
其一：存储类型和组件类型是多对多关系，并不适合合并处理。
|
||||
同一组件的 value 的类型（存储类型）可能并不相同，比如 select 的 value 可能是 string 或者 integer。同一存储类型也可能以不同的组件呈现，如 string 绑定的组件可能是 Input，也可能是 Select。
|
||||
1. Store types and component types are many-to-many relationships and do not lend themselves to merging.
|
||||
The value of the same component may not be of the same type (storage type), e.g., the value of select may be string or integer, and the same storage type may be presented as different components, e.g., the component to which string is bound may be Input or Select.
|
||||
|
||||
其二：有限的存储类型和组件类型可以组合出无数种字段类型。
|
||||
单行文本、电子邮件、网址、手机号这些字段的存储类型和组件类型虽然都相同，但是校验参数并不相同，只需要调整 validate 参数即可创建出无数种字段。
|
||||
2. A limited number of storage types and component types can be combined to create an infinite number of field types.
|
||||
Single line text, email, URL, cell phone number are all the same storage type and component type, but the validation parameters are not the same, so you can create countless fields by simply adjusting the validate parameter.
|
||||
|
||||
## 字段的类型
|
||||
## Field Types
|
||||
|
||||
| 名称 | Interface | Type | Component | 备注 |
|
||||
| :------- | :-------- | :----- | :------------- | :---------------- |
|
||||
| 单行文本 | string | string | Input | |
|
||||
| 多行文本 | textarea | text | Input.TextArea | |
|
||||
| 邮箱 | email | string | Input | validate: 'email' |
|
||||
| 手机号 | phone | string | Input | validate: 'phone' |
|
||||
| Email | email | string | Input | validate: 'email' |
|
||||
| Phone | phone | string | Input | validate: 'phone' |
|
||||
|
||||
## 可以做什么？
|
||||
## What can be done?
|
||||
|
||||
### 快速建模
|
||||
### Fast Modeling
|
||||
|
||||
与专业的建模工具不同，NocoBase 提供了一种更利于普通用户理解的数据表配置方法。
|
||||
Unlike professional modeling tools, NocoBase provides a more user-friendly approach to data table configuration.
|
||||
|
||||
- 可以直接通过 app.collection() 直接写代码里，多用于配置底层系统表。
|
||||
- 也可以通过无代码平台的数据表配置入口配置数据表，多用于配置业务表。
|
||||
- It can be written directly in code via app.collection(), mostly used to configure the underlying system tables.
|
||||
- You can also configure data tables through the data table configuration portal of the no-code platform, which is mostly used to configure business tables.
|
||||
|
||||
### 创建数据区块
|
||||
### Create data blocks
|
||||
|
||||
配置好的数据表可用于创建对应的数据区块，如以表格的形式展示某个数据表的内容。表格里可以选择哪些字段作为表格列显示出来。
|
||||
The configured data table can be used to create corresponding blocks of data, e.g. to display the contents of a particular data table in a table format. The table allows you to select which fields are displayed as table columns.
|
||||
|
||||
更多关于区块的内容可以查看客户端组件章节。
|
||||
More about blocks can be found in the Client-side Components chapter.
|
||||
|
||||
### HTTP API
|
||||
|
||||
跨平台也可以通过 HTTP API 的方式操作数据表（增删改查配置等），更多内容查看 SDK 章节。
|
||||
Cross-platform operation of data tables (add, delete, configure, etc.) is also possible via HTTP API, see the REST API chapter for more details.
|
||||
|
||||
@ -7,14 +7,14 @@ toc: menu
|
||||
|
||||
## Basic process
|
||||
|
||||
- Fork 源码到自己的仓库
|
||||
- 修改源码
|
||||
- 提交 pull request
|
||||
- Fork the source code to your own repository
|
||||
- Modify source code
|
||||
- Submit pull request
|
||||
|
||||
## Installation and start-up
|
||||
|
||||
```bash
|
||||
# 将以下 git 地址换成自己的 repo
|
||||
# Replace the following git address with your own repo
|
||||
git clone https://github.com/nocobase/nocobase.git
|
||||
cd nocobase
|
||||
cp .env.example .env
|
||||
@ -25,17 +25,17 @@ yarn nocobase init --import-demo
|
||||
yarn start
|
||||
```
|
||||
|
||||
浏览器内打开 http://localhost:8000/
|
||||
Open http://localhost:8000/ in your browser
|
||||
|
||||
<Alert title="注意">
|
||||
参与核心代码开发，项目启动打开的是文档页，并非应用的登录页。
|
||||
<Alert title="Note">
|
||||
Involved in core code development, the project starts with a documentation page, not the application's login page.
|
||||
</Alert>
|
||||
|
||||
## Main scripts
|
||||
|
||||
### Startup and reboot
|
||||
|
||||
以上命令只在第一次执行，之后重启项目只需要
|
||||
The above commands are only executed the first time, after that the project is restarted with
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
@ -43,20 +43,20 @@ yarn start
|
||||
|
||||
### Reinstallation
|
||||
|
||||
如果想清空重新安装
|
||||
If you want to clear and reinstall
|
||||
|
||||
```bash
|
||||
# 如果需要导入 demo 数据，可以加上 --import-demo
|
||||
### If you want to import demo data, you can add --import-demo
|
||||
yarn nocobase init --import-demo
|
||||
# 重装之后，也需要重启
|
||||
# After reinstallation, you also need to restart
|
||||
yarn start
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
<Alert title="注意">
|
||||
<Alert title="Note">
|
||||
|
||||
集成测试或全站调试时，涉及以下包的修改需要重新编译打包：
|
||||
For integration testing or site-wide debugging, the following package changes need to be recompiled and repackaged.
|
||||
|
||||
- actions
|
||||
- database
|
||||
@ -65,7 +65,7 @@ yarn start
|
||||
- test
|
||||
- utils
|
||||
|
||||
除了编译的问题，项目的构建还有诸多细节问题未解决。如果你有一些不错的建议，欢迎你前往 [GitHub Discussions](https://github.com/nocobase/nocobase/discussions) 讨论。
|
||||
In addition to the compilation issues, there are many details of the project build that remain unresolved. If you have some good suggestions, you are welcome to discuss them on [GitHub Discussions](https://github.com/nocobase/nocobase/discussions).
|
||||
|
||||
</Alert>
|
||||
|
||||
@ -82,9 +82,9 @@ yarn build <package_name_1> <package_name_2>
|
||||
|
||||
### Testing
|
||||
|
||||
<Alert title="注意">
|
||||
<Alert title="Note">
|
||||
|
||||
升级 v0.5 之后，有部分测试还未修复，测试的 ci 暂时也不能用。代码测试还不够完善，更多测试会阶段性的补充并完善...
|
||||
After upgrading v0.5, some tests have not been fixed yet, and the ci tests are not available yet. The code tests are not perfect yet, more tests will be added and improved in phases...
|
||||
|
||||
</Alert>
|
||||
|
||||
@ -98,29 +98,29 @@ yarn test packages/<name>
|
||||
|
||||
### More scripts
|
||||
|
||||
查看 package.json 的 [scripts](https://github.com/nocobase/nocobase/blob/ff4d432c9fc3faa38cd65ab6d4dad250da02c2fd/package.json#L7)
|
||||
View [scripts](https://github.com/nocobase/nocobase/blob/ff4d432c9fc3faa38cd65ab6d4dad250da02c2fd/package.json#L7) of package.json
|
||||
|
||||
## Document revision and translation
|
||||
|
||||
文档在 [docs](https://github.com/nocobase/nocobase/tree/develop/docs) 目录下，遵循 Markdown 语法，默认为英文，中文以 `.zh-CN.md` 结尾，如：
|
||||
The documentation is in the [docs](https://github.com/nocobase/nocobase/tree/develop/docs) directory and follows Markdown syntax, defaults to English and ends with `.zh-CN.md` in Chinese, e.g.
|
||||
|
||||
```bash
|
||||
|- /docs/
|
||||
|- index.md # 英文文档
|
||||
|- index.zh-CN.md 中文文档，缺失时，显示为 index.md 的内容
|
||||
|- index.md # English document
|
||||
|- index.zh-CN.md # Chinese document, when it is missing, the content of index.md is displayed
|
||||
```
|
||||
|
||||
修改之后，浏览器内打开 http://localhost:8000/ 查看最终效果。
|
||||
After modification, open http://localhost:8000/ in your browser to see the final effect.
|
||||
|
||||
## Back-end
|
||||
|
||||
后端的大部分修改可以通过 test 命令校验。
|
||||
Most of the changes on the back-end can be verified by the test command.
|
||||
|
||||
```bash
|
||||
yarn test packages/<name>
|
||||
```
|
||||
|
||||
当然，如果是新增的内容，需要编写新的测试。`@nocobase/test` 提供了 `mockDatabase` 和 `mockServer` 用于数据库和服务器的测试，如：
|
||||
Of course, if you are adding new content, you will need to write new tests. ``@nocobase/test`` provides ``mockDatabase`` and ``mockServer` for database and server testing, e.g.
|
||||
|
||||
```ts
|
||||
import { mockServer, MockServer } from '@nocobase/test';
|
||||
@ -163,21 +163,21 @@ describe('mock server', () => {
|
||||
|
||||
http://localhost:8000/develop
|
||||
|
||||
为了方便开发者本地调试，全栈的演示也是内嵌的 Demo，可以点击左下角新标签页内全屏打开。
|
||||
To facilitate local debugging for developers, the full-stack demo is also an embedded demo, which can be opened full-screen by clicking on the new tab in the bottom left corner.
|
||||
|
||||
## Client components
|
||||
|
||||
<Alert title="注意">
|
||||
组件库还在整理中...
|
||||
<Alert title="Note">
|
||||
The component library is still being organized...
|
||||
</Alert>
|
||||
|
||||
各组件是独立的，方便调试和使用。组件列表查看 http://localhost:8000/components
|
||||
Each component is independent, easy to debug and use. See the component list at http://localhost:8000/components
|
||||
|
||||
## Provide more examples
|
||||
|
||||
<Alert title="注意">
|
||||
示例还在整理中...
|
||||
<Alert title="Note">
|
||||
Examples are still being compiled...
|
||||
</Alert>
|
||||
|
||||
示例查看 http://localhost:8000/examples
|
||||
Examples are available at http://localhost:8000/examples
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 3
|
||||
|
||||
hide: true
|
||||
---
|
||||
|
||||
# Deployment
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
order: 3
|
||||
hide: true
|
||||
---
|
||||
|
||||
# 部署
|
||||
|
||||
@ -4,7 +4,7 @@ order: 2
|
||||
|
||||
# Client-side Kernel
|
||||
|
||||
为了让更多非开发人员也能参与进来，NocoBase 提供了配套的客户端插件 —— 无代码的可视化配置界面。这部分的核心就是 @nocobase/client，理想状态可以用在任意前端构建工具或框架内，如：
|
||||
To allow more non-developers to participate, NocoBase provides a companion client-side plugin -- a visual configuration interface with no code. The core of this part is @nocobase/client, which ideally can be used within any front-end build tool or framework, e.g.
|
||||
|
||||
- umijs
|
||||
- create-react-app
|
||||
@ -12,13 +12,13 @@ order: 2
|
||||
- vite
|
||||
- snowpack
|
||||
- nextjs
|
||||
- 其他
|
||||
- Other
|
||||
|
||||
暂时只支持 umijs（打包编译还有些问题），未来会逐步支持以上罗列的各个框架。
|
||||
For the time being only support umijs (packaging compilation is still some problems), the future will gradually support the above-listed frameworks.
|
||||
|
||||
客户端主要的组成部分包括：
|
||||
The main components of the client include.
|
||||
|
||||
## 请求
|
||||
## Request
|
||||
|
||||
- API Client
|
||||
- Request Hook
|
||||
@ -34,10 +34,10 @@ api.post();
|
||||
api.resource('collections').create();
|
||||
api.resource('collections').findOne({});
|
||||
api.resource('collections').findMany({});
|
||||
api.resource('collections').relation('fields').of(1).create();
|
||||
api.resource('collections').relationship('fields').of(1).create();
|
||||
```
|
||||
|
||||
以下细节待定，特殊的资源
|
||||
The following details are TBD, special resources
|
||||
|
||||
```js
|
||||
api.collections.create();
|
||||
@ -52,7 +52,7 @@ Request Hook
|
||||
const { data } = useRequest(() => api.resource('users').findMany());
|
||||
```
|
||||
|
||||
## 路由
|
||||
## Routing
|
||||
|
||||
- createRouteSwitch
|
||||
|
||||
@ -64,7 +64,7 @@ const RouteSwitch = createRouteSwitch({
|
||||
<RouteSwitch routes={[]} />
|
||||
```
|
||||
|
||||
## Schema 组件
|
||||
## Schema component
|
||||
|
||||
- createSchemaComponent
|
||||
|
||||
@ -88,7 +88,7 @@ const schema = {
|
||||
<SchemaComponent schema={schema} />
|
||||
```
|
||||
|
||||
## 怎么组装起来？
|
||||
## How do you assemble it?
|
||||
|
||||
<pre lang="tsx">
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
@ -128,9 +128,9 @@ const routes = [
|
||||
];
|
||||
|
||||
function AntdProvider(props) {
|
||||
// 可以根据 i18next 的情况动态处理这里的 locale
|
||||
// The locale here can be handled dynamically depending on the i18next
|
||||
return (
|
||||
<ConfigProvider locale={locale}>{props.children}</ConfigProvider>
|
||||
<ConfigProvider locale={locale}>{props.children}</ConfigProvider
|
||||
);
|
||||
}
|
||||
|
||||
@ -138,8 +138,8 @@ const App = () => {
|
||||
return (
|
||||
<APIClientProvider client={apiClient}>
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<AntdProvider>
|
||||
<Router>
|
||||
<AntdProvider
|
||||
<Router
|
||||
<RouteSwitch routes=[routes]/>
|
||||
</Router>
|
||||
</AntdProvider>
|
||||
@ -149,10 +149,10 @@ const App = () => {
|
||||
}
|
||||
</pre>
|
||||
|
||||
- APIClientProvider：提供 APIClient
|
||||
- I18nextProvider：国际化
|
||||
- AntdProvider：处理 antd 组件的国际化，需要放在 I18nextProvider 里
|
||||
- Router：路由驱动
|
||||
- RouteSwitch：路由分发
|
||||
- APIClientProvider: provides the APIClient
|
||||
- I18nextProvider: internationalization
|
||||
- AntdProvider: handles the internationalization of antd components, which needs to be placed in I18nextProvider
|
||||
- Router: route driver
|
||||
- RouteSwitch: route distribution
|
||||
|
||||
上面代码看似有些啰嗦，实际各部分的功能和作用并不一样，不适合过度封装。如果需要可以根据实际情况，再进一步封装。
|
||||
The above code may seem a bit verbose, but the actual function and role of each part is not the same, so it is not suitable for over-encapsulation. If needed, it can be further encapsulated according to the actual situation.
|
||||
@ -10,4 +10,4 @@ group:
|
||||
|
||||
<img src="../../images/NocoBase.png" style="max-width: 800px; width: 100%;">
|
||||
|
||||
NocoBase 采用微内核架构，各类功能以插件形式扩展，所以微内核架构也叫插件化架构，由内核和插件两部分组成。内核提供了最小功能的 WEB 服务器，还提供了各种插件化接口；插件是按功能划分的各种独立模块，通过接口适配，具有可插拔的特点。插件化的设计降低了模块之间的耦合度，提高了复用率。随着插件库的不断扩充，常见的场景只需要组合插件即可完成基础搭建，这种设计理念非常适合无代码平台。
|
||||
NocoBase adopts microkernel architecture, and various functions are extended in the form of plug-ins, so the microkernel architecture is also called plug-in architecture, which consists of two parts: kernel and plug-ins. The kernel provides the minimum functional WEB server and various plug-in interfaces; plug-ins are various independent modules divided by functions, which are pluggable through interface adaptation. The plug-in design reduces the coupling between modules and improves the reuse rate. With the continuous expansion of the plug-in library, common scenarios only need to combine plug-ins to complete the basic construction, and this design concept is ideal for codeless platforms.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -4,13 +4,12 @@ order: 3
|
||||
|
||||
# Client-side Plugin
|
||||
|
||||
客户端插件的目录结构
|
||||
The directory structure of the client-side plugins
|
||||
|
||||
```bash
|
||||
|- /src/
|
||||
|- /api/ # 服务端扩展
|
||||
|- /components/ # 客户端组件
|
||||
|- /api/ # Server-side extensions
|
||||
|- /components/ # Client-side components
|
||||
|- index.ts
|
||||
|- package.json
|
||||
```
|
||||
|
||||
|
||||
@ -4,51 +4,51 @@ order: 4
|
||||
|
||||
# Internationalization
|
||||
|
||||
NocoBase 使用 i18next 做国际化支持，前后端统一，支持 namespace，非常适合 NocoBase 的插件系统。
|
||||
NocoBase uses i18next for internationalization support, unified front and back end, namespace support, perfect for NocoBase plugin system.
|
||||
|
||||
## 服务端
|
||||
## Server side
|
||||
|
||||
初始化 i18n
|
||||
Initialize i18n
|
||||
|
||||
```ts
|
||||
const app = new Application({
|
||||
i18n: {},
|
||||
});
|
||||
|
||||
// 翻译
|
||||
// Translate
|
||||
app.i18n.t('hello');
|
||||
```
|
||||
|
||||
在中间件中使用
|
||||
In middleware using
|
||||
|
||||
```ts
|
||||
async (ctx, next) => {
|
||||
ctx.body = ctx.t('hello');
|
||||
// 在中间件中 i18n 是 cloneInstance
|
||||
// In middleware i18n is cloneInstance
|
||||
ctx.i18n.changeLanguage('zh-CN')
|
||||
}
|
||||
```
|
||||
|
||||
如何在插件中使用
|
||||
How to use the
|
||||
|
||||
```ts
|
||||
// 添加插件的语言资源
|
||||
// Add the plugin's language resources
|
||||
app.i18n.addResources('zh-CN', 'nocobase-plugin-xxx', {
|
||||
hello: '你好 plugin-xxx',
|
||||
hello: 'hello plugin-xxx',
|
||||
});
|
||||
|
||||
// 需要指定 ns，如：
|
||||
// need to specify ns, e.g.
|
||||
app.i18n.t('hello', { ns: 'nocobase-plugin-xxx' });
|
||||
|
||||
// 中间件
|
||||
// middleware
|
||||
async (ctx, next) => {
|
||||
ctx.body = ctx.t('hello', { ns: 'nocobase-plugin-xxx' });
|
||||
}
|
||||
```
|
||||
|
||||
## 客户端
|
||||
## Client
|
||||
|
||||
在组件中使用，通过 `useTranslation` hook 的方式：
|
||||
To use in a component, by way of the `useTranslation` hook.
|
||||
|
||||
```js
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@ -73,12 +73,12 @@ export default () => {
|
||||
cn
|
||||
</button>
|
||||
<p>{t('hello')}</p>
|
||||
</div>
|
||||
</div
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
在 Schema 中使用，将 t 注入给 scope
|
||||
Used in Schema to inject t into scope
|
||||
|
||||
```js
|
||||
import { i18n, createSchemaComponent } from '@nocobase/client';
|
||||
@ -102,6 +102,6 @@ export default () => {
|
||||
}
|
||||
```
|
||||
|
||||
## 示例
|
||||
## Example
|
||||
|
||||
[点此查看完整的示例](#)
|
||||
[click here for the full example](#)
|
||||
|
||||
@ -9,15 +9,15 @@ group:
|
||||
|
||||
# What is a Plugin?
|
||||
|
||||
插件是按功能划分的可插拔的独立模块。
|
||||
Plugins are pluggable, standalone modules divided by function.
|
||||
|
||||
## Why Write Plugins?
|
||||
|
||||
NocoBase 提供了丰富的 API 用于应用开发，即使不写插件也是可以实现功能扩展。之所以写成插件，是为了降低耦合，以及更好的复用。做到一处编写，随处使用。当然有些业务联系非常紧密，也没有必要过分的插件化拆分。
|
||||
NocoBase provides a rich API for application development and can be extended even without writing plugins. The reason for writing plugins is to reduce coupling and better reuse. To do a place to write, use anywhere. Of course, some business links are very close, there is no need to overly plug-in split.
|
||||
|
||||
## How to Write a Plugin?
|
||||
|
||||
例如，添加一个 ratelimit 中间件，可以这样写：
|
||||
For example, to add a ratelimit middleware, you can write it like this.
|
||||
|
||||
```ts
|
||||
import ratelimit from 'koa-ratelimit';
|
||||
@ -44,7 +44,7 @@ app.use(ratelimit({
|
||||
}));
|
||||
```
|
||||
|
||||
但是这种写法，只能开发处理，不能动态移除。为此，NocoBase 提供了可插拔的 `app.plugin()` 接口，用于实现中间件的添加和移除。改造之后，代码如下：
|
||||
But with this kind of writing, it can only be handled by development, not dynamically removed. For this reason, NocoBase provides a pluggable `app.plugin()` interface for adding and removing middleware. After the modification, the code is as follows.
|
||||
|
||||
```ts
|
||||
import ratelimit from 'koa-ratelimit';
|
||||
@ -90,27 +90,27 @@ app.plugin(RateLimitPlugin, {
|
||||
});
|
||||
```
|
||||
|
||||
- 将 ratelimit 的参数提炼出来，更进一步可以把参数配置交给插件管理面板
|
||||
- 当插件激活时，执行 plugin.enable()，把 ratelimit 添加进来
|
||||
- 当插件禁用时，执行 plugin.disable()，把 ratelimit 移除
|
||||
- Distilling the parameters of ratelimit goes a step further by giving the parameter configuration to the plugin management panel
|
||||
- When the plugin is active, execute plugin.enable() to add ratelimit to it
|
||||
- When the plugin is disabled, execute plugin.disable() to remove ratelimit
|
||||
|
||||
以上就是插件的核心内容了，任何功能扩展都可以这样处理。只要两步：
|
||||
The above is the core content of the plugin, any functional extension can be handled in this way. Just two steps.
|
||||
|
||||
- 实现插件的 enable 接口，用于添加功能；
|
||||
- 再实现 disable 接口，用于移除功能模块。
|
||||
- Implement the enable interface of the plugin for adding functionality.
|
||||
- Then implement the disable interface for removing the function module.
|
||||
|
||||
```ts
|
||||
class MyPlugin extends Plugin {
|
||||
enable() {
|
||||
// 添加的逻辑
|
||||
// Logic for adding
|
||||
}
|
||||
|
||||
disable() {
|
||||
// 移除的逻辑
|
||||
// Logic to remove
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**不实现 disable 可不可以？**
|
||||
**Is it possible not to implement disable? **
|
||||
|
||||
disable 接口是为了实现插件的热插拔，应用不需要重启就能实现插件的激活和禁用。如果某个插件不需要被禁用，也可以只实现 enable 接口。
|
||||
The disable interface is designed to enable hot-plugging of plugins so that applications can activate and disable plugins without rebooting. If a plugin does not need to be disabled, you can also just implement the enable interface.
|
||||
|
||||
@ -3,43 +3,41 @@ order: 2
|
||||
---
|
||||
# Pluggable Interfaces
|
||||
|
||||
插件是按功能划分的可插拔的独立模块，为了以插件的方式扩展功能，需要实现扩展功能的添加和删除方法。
|
||||
NocoBase 的插件化接口主要有：
|
||||
Plugins are pluggable independent modules divided by functionality. In order to extend the functionality in the way of plugins, it is necessary to implement methods to add and remove extended functionality.
|
||||
The main pluggable interfaces of NocoBase are.
|
||||
|
||||
## 中间件
|
||||
## Middleware
|
||||
|
||||
- 添加：app.use()
|
||||
- 删除：app.unuse() 暂未实现，可以直接操作 app.middleware 数组来移除
|
||||
- add: app.use()
|
||||
- remove: app.unuse() is not yet implemented, you can directly manipulate the app.middleware array to remove
|
||||
|
||||
## 事件
|
||||
## Events
|
||||
|
||||
- 添加：app.on()
|
||||
- 删除：app.removeListener()
|
||||
- Add: app.on()
|
||||
- Remove: app.removeListener()
|
||||
|
||||
## 资源
|
||||
## Resources
|
||||
|
||||
- 添加：app.resource()
|
||||
- 删除：暂无
|
||||
- Add: app.resource()
|
||||
- Remove: None
|
||||
|
||||
## 操作
|
||||
## Actions
|
||||
|
||||
- 添加：app.actions()
|
||||
- 删除：暂无
|
||||
- Add: app.actions()
|
||||
- Delete: None
|
||||
|
||||
## 数据表
|
||||
## Data Tables
|
||||
|
||||
- 添加：app.collection()
|
||||
- 删除：暂无
|
||||
- Add: app.collection()
|
||||
- Delete: None
|
||||
|
||||
## 组件（前端）
|
||||
## Components (front-end)
|
||||
|
||||
- 添加 createRouteSwitch、createCollectionField、createSchemaComponent
|
||||
- 删除：暂无
|
||||
- Add createRouteSwitch, createCollectionField, createSchemaComponent
|
||||
- Remove: None at this time
|
||||
|
||||
<Alert title="注意">
|
||||
<Alert title="Note">
|
||||
|
||||
目前 NocoBase 的插件化机制还不完善，不能完全实现热插拔。前端的扩展还得依赖开发手动处理再重新构建。
|
||||
Currently, NocoBase's plug-in mechanism is not perfect and cannot fully implement hot-plugging. Front-end extensions have to be manually handled by developers and then rebuilt.
|
||||
|
||||
</Alert>
|
||||
|
||||
|
||||
|
||||
@ -5,42 +5,36 @@ toc: menu
|
||||
|
||||
# Quick Start
|
||||
|
||||
本篇文章将帮助你快速安装并启动 NocoBase，并介绍基本的使用方法。
|
||||
This article will help you quickly install and start NocoBase, and introduce the basic usage.
|
||||
|
||||
## 1. Requirements
|
||||
|
||||
请确保你的系统已经安装了 Node.js 12.x 或以上版本。
|
||||
Please make sure your system has installed Node.js 12.x or above.
|
||||
|
||||
```bash
|
||||
$ node -v
|
||||
v12.13.1
|
||||
```
|
||||
|
||||
如果你没有安装 Node.js 可以从官网下载并安装[最新的 LTS 版本](https://nodejs.org/en/download/)。如果你打算长期与 Node.js 打交道，推荐使用 [nvm](https://github.com/nvm-sh/nvm)（Win 系统可以使用 [nvm-windows](https://github.com/coreybutler/nvm-windows) ）来管理 Node.js 版本。
|
||||
If you don't have Node.js installed you can download and install [the latest LTS version](https://nodejs.org/en/download/) from the official website. If you plan to work with Node.js for a long time, it is recommended to use [nvm](https://github.com/nvm-sh/nvm) (for Win systems you can use [nvm-windows](https://github.com/coreybutler/nvm-windows)) to manage Node.js version.
|
||||
|
||||
另外，推荐使用 yarn 包管理器。
|
||||
Also, it is recommended to use the yarn package manager.
|
||||
|
||||
```bash
|
||||
$ npm install --global yarn
|
||||
```
|
||||
|
||||
由于国内网络环境的原因，强烈建议你更换国内镜像。
|
||||
|
||||
```bash
|
||||
$ yarn config set registry https://registry.npm.taobao.org/
|
||||
```
|
||||
|
||||
环境准备就绪，下一步我们来安装一个 NocoBase 应用。
|
||||
With the environment ready, the next step is to install a NocoBase application.
|
||||
|
||||
## 2. Installation and Start-up
|
||||
|
||||
为了方便新人快速的安装并启动， NocoBase 提供了一行非常简单的命令：
|
||||
To make it easier for newcomers to install and start quickly, NocoBase provides a very simple command line.
|
||||
|
||||
```bash
|
||||
$ yarn create nocobase-app my-nocobase-app --quickstart
|
||||
```
|
||||
|
||||
上面这行命令会帮助你快速的下载、安装并启动 NocoBase 应用。如果你喜欢分步执行，也可以这样：
|
||||
The above command will help you quickly download, install and start the NocoBase application. If you prefer to perform step by step, you can also do this:
|
||||
|
||||
```bash
|
||||
# 1. 创建项目
|
||||
@ -56,55 +50,57 @@ $ yarn nocobase init --import-demo
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
分步执行有助于理解整个流程，也更易于排查安装过程中出现的问题。如果出现问题，你也无法自行解决，请将终端输出的错误日志贴在 [GitHub Issue](https://github.com/nocobase/nocobase/issues) 上，大家会一起帮你解决问题。
|
||||
Executing it step-by-step will help you understand the process and make it easier to troubleshoot issues that arise during the installation. If a problem arises and you can't fix it yourself, please post the error log from the terminal output on [GitHub Issue](https://github.com/nocobase/nocobase/issues) and we'll all work together to help you fix it.
|
||||
|
||||
当你看到下面内容，说明你刚才创建的 NocoBase 已经安装并启动了。
|
||||
When you see the following, it means that the NocoBase you just created has been installed and started.
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/07aef612d4162970f813352ef31a9dba.png" style="max-width: 800px;" />
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/c77012649cab2677117c7628fd11960a.jpg" style="max-width: 800px; width: 100%; box-shadow: 0 8px 24px -2px rgb(0 0 0 / 5%); border-radius: 15px;">
|
||||
|
||||
## 3. Log in to NocoBase
|
||||
|
||||
使用浏览器打开 http://localhost:8000 ，你会看到 NocoBase 的登录页面，初始的账号为 `admin@nocobase.com`，密码为 `admin`。
|
||||
Use a browser to open http://localhost:8000 and you will see the login page of NocoBase. The initial account is `admin@nocobase.com` and the password is `admin`.
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/172457b0a93b608cff2c9d119d42a02f.png" style="max-width: 800px;" >
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/158b580706930486132d1f927a71691a.jpg" style="max-width: 800px; width: 100%; box-shadow: 0 8px 24px -2px rgb(0 0 0 / 5%); border-radius: 10px;">
|
||||
|
||||
## 4. Create Collections and Fields
|
||||
|
||||
NocoBase 提供了一个全局的数据表配置面板，方便用户快速的创建数据表和字段。
|
||||
NocoBase provides a global data table configuration panel to facilitate users to quickly create collections and fields.
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/335883d6d91d505195b7a857ac6df161.gif" style="max-width: 800px;" />
|
||||
<video src="https://nocobase.oss-cn-beijing.aliyuncs.com/6e2df7073bf3ea23a10c5d4620dc2be0.m4v" style="max-width: 800px; width: 100%; border-radius: 5px;" controls="controls">
|
||||
your browser does not support the video tag
|
||||
</video>
|
||||
|
||||
按照视频的提示，创建文章（posts）和标签（tags）两张数据表和若干字段。
|
||||
Follow the instructions in the video to create the posts and tags tables and several fields.
|
||||
|
||||
## 5. Configure Menus and Pages
|
||||
|
||||
接着，添加新的菜单分组和页面用于管理刚才创建的文章和标签数据。
|
||||
Next, add new menu groups and pages to manage the article and tag data you just created.
|
||||
|
||||
```ts
|
||||
// 视频
|
||||
```
|
||||
<video src="https://nocobase.oss-cn-beijing.aliyuncs.com/405d1d3a6d8db31d247e06f5af18de4b.m4v" style="max-width: 800px; width: 100%; border-radius: 5px;" controls="controls">
|
||||
your browser does not support the video tag
|
||||
</video>
|
||||
|
||||
## 6. Create Blocks to Pages
|
||||
|
||||
在上一步配置的页面里创建文章和标签的表格区块，并启用需要开放的操作。
|
||||
Create table blocks of articles and labels in the page configured in the previous step, and enable the actions that need to be opened.
|
||||
|
||||
```ts
|
||||
// 视频
|
||||
// coming soon
|
||||
```
|
||||
|
||||
## 7. Add Data
|
||||
|
||||
现在可以添加文章和标签了。
|
||||
Now you can add posts and tags.
|
||||
|
||||
```ts
|
||||
// 视频
|
||||
// coming soon
|
||||
```
|
||||
|
||||
## 8. Connect to the API
|
||||
|
||||
除了可视化界面以外，也可以通过 NocoBase 提供的 [REST API](/zh-CN/api/rest-api) 访问数据资源。
|
||||
In addition to the visual interface, data resources can also be accessed through the [REST API](/zh-CN/api/rest-api) provided by NocoBase.
|
||||
|
||||
- 文章资源：http://localhost:8000/api/posts
|
||||
- 标签资源：http://localhost:8000/api/tags
|
||||
- post resorce：http://localhost:8000/api/posts
|
||||
- user resource ：http://localhost:8000/api/tags
|
||||
|
||||
你可以直接点击打开上面 API 地址，或者使用类似 Postman 的工具访问。NocoBase 也提供了更贴合的 API Client（JavaScript SDK）来管理 NocoBase 数据资源，更多内容请查看 [API Client](/zh-CN/api/client#apiclient) 章节。
|
||||
You can directly click to open the above API address, or use a tool like Postman to access it. NocoBase also provides a more suitable API Client (JavaScript SDK) to manage NocoBase data resources. For more information, please refer to the [API Client](/zh-CN/api/client#apiclient) chapter.
|
||||
@ -60,19 +60,21 @@ $ yarn start
|
||||
|
||||
当你看到下面内容，说明你刚才创建的 NocoBase 已经安装并启动了。
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/07aef612d4162970f813352ef31a9dba.png" style="max-width: 800px;" />
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/c77012649cab2677117c7628fd11960a.jpg" style="max-width: 800px; width: 100%; box-shadow: 0 8px 24px -2px rgb(0 0 0 / 5%); border-radius: 15px;">
|
||||
|
||||
## 3. 登录 NocoBase
|
||||
|
||||
使用浏览器打开 http://localhost:8000 ，你会看到 NocoBase 的登录页面，初始的账号为 `admin@nocobase.com`，密码为 `admin`。
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/172457b0a93b608cff2c9d119d42a02f.png" style="max-width: 800px;" >
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/158b580706930486132d1f927a71691a.jpg" style="max-width: 800px; width: 100%; box-shadow: 0 8px 24px -2px rgb(0 0 0 / 5%); border-radius: 10px;">
|
||||
|
||||
## 4. 创建数据表和字段
|
||||
|
||||
NocoBase 提供了一个全局的数据表配置面板，方便用户快速的创建数据表和字段。
|
||||
|
||||
<img src="https://nocobase.oss-cn-beijing.aliyuncs.com/335883d6d91d505195b7a857ac6df161.gif" style="max-width: 800px;" />
|
||||
<video src="https://nocobase.oss-cn-beijing.aliyuncs.com/6e2df7073bf3ea23a10c5d4620dc2be0.m4v" style="max-width: 800px; width: 100%; border-radius: 5px;" controls="controls">
|
||||
your browser does not support the video tag
|
||||
</video>
|
||||
|
||||
按照视频的提示，创建文章（posts）和标签（tags）两张数据表和若干字段。
|
||||
|
||||
@ -80,9 +82,9 @@ NocoBase 提供了一个全局的数据表配置面板，方便用户快速的
|
||||
|
||||
接着，添加新的菜单分组和页面用于管理刚才创建的文章和标签数据。
|
||||
|
||||
```ts
|
||||
// 视频
|
||||
```
|
||||
<video src="https://nocobase.oss-cn-beijing.aliyuncs.com/405d1d3a6d8db31d247e06f5af18de4b.m4v" style="max-width: 800px; width: 100%; border-radius: 5px;" controls="controls">
|
||||
your browser does not support the video tag
|
||||
</video>
|
||||
|
||||
## 6. 在页面内布置区块
|
||||
|
||||
|
||||
@ -6,83 +6,85 @@ nav:
|
||||
order: 4
|
||||
---
|
||||
|
||||
## 插件管理器
|
||||
# Plugins
|
||||
|
||||
开发可以通过命令行下载、激活、禁用、移除插件，对应的命令行有：
|
||||
## Plugin Manager
|
||||
|
||||
Development can download, activate, disable, and remove plugins via the command line, which corresponds to
|
||||
|
||||
```bash
|
||||
# 下载插件，可以通过 --enable 参数快速激活
|
||||
## Download plugins, which can be activated quickly with the --enable parameter
|
||||
yarn nocobase pm:download <plugin-name> --enable
|
||||
# 激活插件
|
||||
# Activate the plugin
|
||||
yarn nocobase pm:enable <plugin-name>
|
||||
# 禁用插件
|
||||
# Disable the plugin
|
||||
yarn nocobase pm:disable <plugin-name>
|
||||
# 移除插件
|
||||
# Remove the plugin
|
||||
yarn nocobase pm:remove <plugin-name>
|
||||
```
|
||||
|
||||
## 已有的插件列表
|
||||
## List of existing plugins
|
||||
|
||||
### @nocobase/plugin-collections 数据表配置
|
||||
### @nocobase/plugin-collections datasheet configuration
|
||||
|
||||
提供 HTTP API 的方式管理数据表和字段
|
||||
Provides an HTTP API for managing data tables and fields
|
||||
|
||||
### @nocobase/plugin-permissions
|
||||
|
||||
权限模块
|
||||
Permissions module
|
||||
|
||||
### @nocobase/plugin-users
|
||||
|
||||
用户模块
|
||||
User module
|
||||
|
||||
### @nocobase/plugin-system-settings
|
||||
|
||||
站点信息配置
|
||||
Site information configuration
|
||||
|
||||
### @nocobase/plugin-china-region
|
||||
|
||||
字段扩展，中国行政区
|
||||
Field extension, China region
|
||||
|
||||
### @nocobase/plugin-file-manager
|
||||
|
||||
字段扩展，附件字段
|
||||
Field extension, attachment field
|
||||
|
||||
### @nocobase/plugin-action-logs
|
||||
|
||||
操作日志
|
||||
Action logs
|
||||
|
||||
### @nocobase/plugin-multi-apps
|
||||
|
||||
动态多应用，一个简易的 SaaS
|
||||
Dynamic multi-apps, a simple SaaS
|
||||
|
||||
### @nocobase/plugin-export
|
||||
|
||||
操作扩展，导出
|
||||
Operation extensions, export
|
||||
|
||||
### @nocobase/plugin-notifications
|
||||
|
||||
通知模块（半成品），暂时只支持邮件发送，没有可视化界面
|
||||
Notifications module (half-baked), only supports emailing for now, no visual interface
|
||||
|
||||
### @nocobase/plugin-automations
|
||||
|
||||
自动化（暂不可用）
|
||||
Automation (not available at the moment)
|
||||
|
||||
### @nocobase/plugin-client
|
||||
|
||||
客户端插件，为 nocobase 提供可视化配置的支持。依赖的插件有：
|
||||
Client-side plugin that provides visual configuration support for nocobase. Dependent plugins are.
|
||||
|
||||
- @nocobase/plugin-collections（必须）
|
||||
- @nocobase/plugin-permissions（必须）
|
||||
- @nocobase/plugin-users（必须）
|
||||
- @nocobase/plugin-system-settings（必须）
|
||||
- @nocobase/plugin-file-manager（必须）
|
||||
- @nocobase/plugin-china-region（可选）
|
||||
- @nocobase/plugin-action-logs（可选）
|
||||
- @nocobase/plugin-collections (required)
|
||||
- @nocobase/plugin-permissions (required)
|
||||
- @nocobase/plugin-users (required)
|
||||
- @nocobase/plugin-system-settings (required)
|
||||
- @nocobase/plugin-file-manager (required)
|
||||
- @nocobase/plugin-china-region (optional)
|
||||
- @nocobase/plugin-action-logs (optional)
|
||||
|
||||
包括几部分内容：
|
||||
Several components are included.
|
||||
|
||||
- 将客户端 ui-schema 存储在服务端，以实现按需动态输出
|
||||
- 将客户端 ui-router 存储在服务端，以实现按需动态输出
|
||||
- 提供 app dist 的 static server 支持，可以配置 app 的 dist 路径
|
||||
- 为 nocobase 安装提供初始化 demo 数据导入的支持，可通过 importData 配置
|
||||
- 提供 collections 可视化支持
|
||||
- Store client ui-schema on the server side for on-demand dynamic output
|
||||
- Store client-side ui-router on the server side for on-demand dynamic output
|
||||
- Provide static server support for app dist, allowing configuration of app dist paths
|
||||
- Provide initial demo data import support for nocobase installation, configurable via importData
|
||||
- Provide visualization support for collections
|
||||
|
||||
@ -6,6 +6,8 @@ nav:
|
||||
order: 4
|
||||
---
|
||||
|
||||
# 插件
|
||||
|
||||
## 插件管理器
|
||||
|
||||
开发可以通过命令行下载、激活、禁用、移除插件，对应的命令行有：
|
||||
|
||||
@ -6,6 +6,8 @@ dotenv.config({
|
||||
path: path.resolve(__dirname, './.env'),
|
||||
});
|
||||
|
||||
process.env.MFSU_AD = 'none';
|
||||
|
||||
export default defineConfig({
|
||||
favicon: '/favicon.png',
|
||||
nodeModulesTransform: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user