feat: update docs

This commit is contained in:
chenos 2022-10-06 11:38:01 +08:00
parent d805fafbfc
commit 50b184c93e
14 changed files with 484 additions and 57 deletions

View File

@ -20,7 +20,7 @@ export default {
],
},
'/getting-started/upgrading',
'/getting-started/deployment',
// '/getting-started/deployment',
],
'/manual': [
'/manual/functional-zoning',
@ -166,7 +166,11 @@ export default {
{
title: '@nocobase/server',
type: 'subMenu',
children: ['/api/server/application', '/api/server/plugin-manager', '/api/server/plugin'],
children: [
'/api/server/application',
//'/api/server/plugin-manager',
'/api/server/plugin',
],
},
{
title: '@nocobase/database',
@ -210,7 +214,7 @@ export default {
title: '@nocobase/client',
type: 'subMenu',
children: [
'/api/client/index',
// '/api/client/index',
'/api/client/application',
'/api/client/route-switch',
{
@ -228,7 +232,7 @@ export default {
'title.zh-CN': 'Extensions',
type: 'subMenu',
children: [
'/api/client/extensions/schema-component',
// '/api/client/extensions/schema-component',
'/api/client/extensions/collection-manager',
'/api/client/extensions/block-provider',
'/api/client/extensions/acl',

View File

@ -1,5 +1,17 @@
# Application
## 构造函数
### `constructor()`
创建一个应用实例。
**签名**
* `constructor(options: ApplicationOptions)`
**示例**
```ts
const app = new Application({
apiClient: {
@ -11,13 +23,11 @@ const app = new Application({
});
```
## 属性
## 方法
### use()
## Providers
添加 Providers内置 Providers 有:
- APIClientProvider
- I18nextProvider
@ -31,3 +41,22 @@ const app = new Application({
- AntdSchemaComponentProvider
- ACLProvider
- RemoteDocumentTitleProvider
### render()
渲染 App 组件
```ts
import { Application } from '@nocobase/client';
export const app = new Application({
apiClient: {
baseURL: process.env.API_BASE_URL,
},
dynamicImport: (name: string) => {
return import(`../plugins/${name}`);
},
});
export default app.render();
```

View File

@ -1 +1,23 @@
# ACL
## Components
### `<ACLProvider />`
### `<ACLRolesCheckProvider />`
### `<ACLCollectionProvider />`
### `<ACLActionProvider />`
### `<ACLCollectionFieldProvider />`
### `<ACLMenuItemProvider />`
## Hooks
### `useACLContext()`
### `useACLRoleContext()`
### `useRoleRecheck()`

View File

@ -1 +1,25 @@
# BlockProvider
## 内核方法
### `<BlockProvider />`
### `useBlockRequestContext()`
## 内置 BlockProvider 组件
### `<CalendarBlockProvider />`
### `<TableFieldProvider />`
### `<TableBlockProvider />`
### `<TableSelectorProvider />`
### `<FormBlockProvider />`
### `<FormFieldProvider />`
### `<DetailsBlockProvider />`
### `<KanbanBlockProvider />`

View File

@ -1 +1,267 @@
# CollectionManager
## Components
### CollectionManagerProvider
```jsx | pure
<CollectionManagerProvider interfaces={{}} collections={[]}></CollectionManagerProvider>
```
### CollectionProvider
```jsx | pure
const collection = {
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
};
<CollectionProvider collection={collection}></CollectionProvider>
```
如果没有传 collection 参数,从 CollectionManagerProvider 里取对应 name 的 collection。
```jsx | pure
const collections = [
{
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
}
];
<CollectionManagerProvider collections={collections}>
<CollectionProvider name={'tests'}></CollectionProvider>
</CollectionManagerProvider>
```
### CollectionFieldProvider
```jsx | pure
const field = {
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
};
<CollectionFieldProvider field={field}></CollectionFieldProvider>
```
如果没有传 field 参数,从 CollectionProvider 里取对应 name 的 field。
```jsx | pure
const collection = {
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
};
<CollectionProvider collection={collection}>
<CollectionFieldProvider name={'title'}></CollectionFieldProvider>
</CollectionProvider>
```
### CollectionField
万能字段组件,需要与 `<CollectionProvider/>` 搭配使用,仅限于在 Schema 场景使用。从 CollectionProvider 里取对应 name 的 field schema。可通过 CollectionField 所在的 schema 扩展配置。
```ts
{
name: 'title',
'x-decorator': 'FormItem',
'x-decorator-props': {},
'x-component': 'CollectionField',
'x-component-props': {},
properties: {},
}
```
## Hooks
### useCollectionManager()
`<CollectionManagerProvider/>` 搭配使用
```jsx | pure
const { collections, get } = useCollectionManager();
```
### useCollection()
`<CollectionProvider/>` 搭配使用
```jsx | pure
const { name, fields, getField, findField, resource } = useCollection();
```
### useCollectionField()
`<CollectionFieldProvider/>` 搭配使用
```jsx | pure
const { name, uiSchema, resource } = useCollectionField();
```
resource 需要与 `<RecordProvider/>` 搭配使用,用于提供当前数据表行记录的上下文。如:
# CollectionManager
## Components
### CollectionManagerProvider
```jsx | pure
<CollectionManagerProvider interfaces={{}} collections={[]}></CollectionManagerProvider>
```
### CollectionProvider
```jsx | pure
const collection = {
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
};
<CollectionProvider collection={collection}></CollectionProvider>
```
如果没有传 collection 参数,从 CollectionManagerProvider 里取对应 name 的 collection。
```jsx | pure
const collections = [
{
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
}
];
<CollectionManagerProvider collections={collections}>
<CollectionProvider name={'tests'}></CollectionProvider>
</CollectionManagerProvider>
```
### CollectionFieldProvider
```jsx | pure
const field = {
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
};
<CollectionFieldProvider field={field}></CollectionFieldProvider>
```
如果没有传 field 参数,从 CollectionProvider 里取对应 name 的 field。
```jsx | pure
const collection = {
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
};
<CollectionProvider collection={collection}>
<CollectionFieldProvider name={'title'}></CollectionFieldProvider>
</CollectionProvider>
```
### CollectionField
万能字段组件,需要与 `<CollectionProvider/>` 搭配使用,仅限于在 Schema 场景使用。从 CollectionProvider 里取对应 name 的 field schema。可通过 CollectionField 所在的 schema 扩展配置。
```ts
{
name: 'title',
'x-decorator': 'FormItem',
'x-decorator-props': {},
'x-component': 'CollectionField',
'x-component-props': {},
properties: {},
}
```
## Hooks
### useCollectionManager()
`<CollectionManagerProvider/>` 搭配使用
```jsx | pure
const { collections, get } = useCollectionManager();
```
### useCollection()
`<CollectionProvider/>` 搭配使用
```jsx | pure
const { name, fields, getField, findField, resource } = useCollection();
```
### useCollectionField()
`<CollectionFieldProvider/>` 搭配使用
```jsx | pure
const { name, uiSchema, resource } = useCollectionField();
```
resource 需要与 `<RecordProvider/>` 搭配使用,用于提供当前数据表行记录的上下文。

View File

@ -1,12 +1,4 @@
# SchemaComponent
## Core
- SchemaComponentProvider
- SchemaComponent
- createDesignable
- useDesignable
- useCompile
# 适配的 Schema 组件
## Common

View File

@ -1,5 +1,49 @@
# RouteSwitch
## `<RouteSwitchProvider />`
```ts
interface RouteSwitchProviderProps {
components?: ReactComponent;
routes?: RouteRedirectProps[];
}
```
## `<RouteSwitch />`
```ts
interface RouteSwitchProps {
routes?: RouteRedirectProps[];
components?: ReactComponent;
}
type RouteRedirectProps = RedirectProps | RouteProps;
interface RedirectProps {
type: 'redirect';
to: any;
path?: string;
exact?: boolean;
strict?: boolean;
push?: boolean;
from?: string;
[key: string]: any;
}
interface RouteProps {
type: 'route';
path?: string | string[];
exact?: boolean;
strict?: boolean;
sensitive?: boolean;
component?: any;
routes?: RouteProps[];
[key: string]: any;
}
```
## 完整示例
```tsx | pure
import React from 'react';
import { Link, MemoryRouter as Router } from 'react-router-dom';

View File

@ -1,22 +1,13 @@
# SchemaComponent
## Core
## 核心组件
- SchemaComponentProvider
- SchemaComponent
- createDesignable
- useDesignable
- useCompile
### `<SchemaComponentProvider />`
### `<SchemaComponentOptions>`
### `<SchemaComponent>`
## Common
## 核心方法
- DndContext
- SortableItem
## And Design
- Action
- BlockItem
- Calendar
- CardItem
- Cascader
### `createDesignable()`
### `useDesignable()`
### `useCompile()`

View File

@ -1 +1,27 @@
# SchemaInitializer
用于各种 schema 的初始化。新增的 schema 可以插入到某个已有 schema 节点的任意位置,包括:
```ts
{
properties: {
// beforeBegin 在当前节点的前面插入
node1: {
properties: {
// afterBegin 在当前节点的第一个子节点前面插入
// ...
// beforeEnd 在当前节点的最后一个子节点后面
},
},
// afterEnd 在当前节点的后面
},
}
```
SchemaInitializer 的核心包括 `<SchemaInitializer.Button />``<SchemaInitializer.Item />` 两个组件。`<SchemaInitializer.Button />` 用于创建 Schema 的下拉菜单按钮,下拉菜单的菜单项为 `<SchemaInitializer.Item/>`
### `<SchemaInitializerProvider />`
### `<SchemaInitializer.Button />`
### `<SchemaInitializer.Item/>`

View File

@ -1 +1,25 @@
# SchemaSettings
### `<SchemaSettings />`
### `<SchemaSettings.Item />`
### `<SchemaSettings.ItemGroup />`
### `<SchemaSettings.SubMenu />`
### `<SchemaSettings.Divider />`
### `<SchemaSettings.Remove />`
### `<SchemaSettings.SelectItem />`
### `<SchemaSettings.SwitchItem />`
### `<SchemaSettings.ModalItem />`
### `<SchemaSettings.ActionModalItem />`
### `<SchemaSettings.Template />`
### `<SchemaSettings.BlockTitleItem />`

View File

@ -1,11 +1,12 @@
# 概览
## 内置模块列表
| 模块 | 包名 | 描述 |
| --- | --- | --- |
| --------------------------------- | --------------------- | ------------------- |
| [Server](/api/server) | `@nocobase/server` | 服务端应用 |
| [Database](/api/database) | `@nocobase/database` | 数据库访问层 |
| [Resourcer](/api/resourcer) | `@nocobase/resourcer` | 资源与路由映射 |
| [ACL](/api/acl) | `@nocobase/acl` | 访问控制表 |
| [Client](/api/client) | `@nocobase/client` | 客户端应用 |
| [Client](/api/client/application) | `@nocobase/client` | 客户端应用 |
| [CLI](/api/cli) | `@nocobase/cli` | NocoBase 命令行工具 |
| [SDK](/api/sdk) | `@nocobase/sdk` | NocoBase SDK |
| [Actions](/api/actions) | `@nocobase/actions` | 内置常用资源操作 |

View File

@ -124,8 +124,12 @@ NocoBase 默认对 context 注入了以下成员,可以在请求处理函数
### `command()`
自定义 command
### `findCommand()`
查找已定义 command
### `runAsCLI()`
以 CLI 的方式运行。

View File

@ -2,20 +2,20 @@
## 属性
### `name`
只读
### `options`
插件配置信息
### `name`
插件标识,只读
### `model`
插件模型数据
## 实例方法
### `initialize()`
初始化
### `beforeLoad()`
加载前,如事件或类注册

View File

@ -31,4 +31,4 @@ yarn pm remove hello
- 也可以是用于增强或限制 HTTP API 的过滤器、校验器、访问限制等
- 也可以是更底层的数据表、迁移、事件、命令行等功能的增强
不仅如此,更多扩展介绍请查看[扩展点索引]()章节。
不仅如此,更多扩展介绍请查看 [扩展指南 - 概述](/development/guide) 章节。