docs: update docs
This commit is contained in:
parent
038358ebbc
commit
e3a5dc73b7
@ -7,15 +7,29 @@ order: 6
|
|||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
### 路由
|
提供适配 Ant Design 组件的 NocoBase 客户端。
|
||||||
|
|
||||||
和众多框架类似,NocoBase 也提供了路由,可以根据 URL 找到对应的页面。为了适应无代码需求,NocoBase 提供了一套由服务端配置的 routes 表,routes 是一个大杂烩,如以下例子:
|
<Alert title="注意">
|
||||||
|
|
||||||
|
@nocobase/client 可以用于任意 React 框架中,不过还存在许多难点和细节未解决。
|
||||||
|
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
## Loaders
|
||||||
|
|
||||||
|
### TemplateLoader <Badge>待完善</Badge>
|
||||||
|
|
||||||
|
- routes:路由表,大杂烩。类型包括:layout、page、redirect、url、menuGroup,**页面就是 type=page 的 route**
|
||||||
|
- templates:模板
|
||||||
|
- pathname:URL 路径
|
||||||
|
|
||||||
|
为了适应无代码需求,提供了一种 URL 和 Template 映射规则,如以下例子:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
[
|
const routes = [
|
||||||
{
|
{
|
||||||
type: 'layout',
|
type: 'layout',
|
||||||
name: 'auth', // 因为 /login、/register 没有统一的前缀,所以这里没有配置 path
|
name: 'auth', // 因为 /login、/register 没有统一的前缀,所以这里没有配置 path
|
||||||
template: 'AuthLayout', // 用于处理 login、register 等页面的布局
|
template: 'AuthLayout', // 用于处理 login、register 等页面的布局
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@ -35,7 +49,7 @@ order: 6
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'layout',
|
type: 'layout',
|
||||||
name: 'admin',
|
name: 'admin',
|
||||||
path: '/admin', // /admin 下的任意 uri 都转到这里
|
path: '/admin', // /admin 下的任意 uri 都转到这里
|
||||||
template: 'AdminLoader',
|
template: 'AdminLoader',
|
||||||
@ -44,7 +58,7 @@ order: 6
|
|||||||
// 通过解析 /admin/:name,找到对应子页面
|
// 通过解析 /admin/:name,找到对应子页面
|
||||||
// 「菜单和页面配置」就是这部分的内容
|
// 「菜单和页面配置」就是这部分的内容
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
type: 'page',
|
type: 'page',
|
||||||
name: 'welcome',
|
name: 'welcome',
|
||||||
template: 'BlockLoader',
|
template: 'BlockLoader',
|
||||||
@ -52,7 +66,7 @@ order: 6
|
|||||||
blocks: [],
|
blocks: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'url',
|
type: 'url',
|
||||||
url: 'https://www.nocobase.com/',
|
url: 'https://www.nocobase.com/',
|
||||||
title: 'xxx',
|
title: 'xxx',
|
||||||
},
|
},
|
||||||
@ -68,25 +82,175 @@ order: 6
|
|||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/admin',
|
redirect: '/admin',
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
```
|
```
|
||||||
|
|
||||||
route 类型包括:layout、page、redirect、url、menuGroup,页面就是 type=page 的 route
|
<pre lang="tsx">
|
||||||
|
<TemplateLoader
|
||||||
|
pathname={pathname}
|
||||||
|
routes={routes}
|
||||||
|
templates={{
|
||||||
|
AuthLayout,
|
||||||
|
BlockLoader,
|
||||||
|
AdminLoader,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</pre>
|
||||||
|
|
||||||
NocoBase 会内置几种常用的 template 用于处理特定页面渲染,如果有特殊需求还可以自行扩展。
|
### BlockLoader <Badge type="error">未实现</Badge>
|
||||||
|
|
||||||
### 页面和区块
|
区块驱动器。
|
||||||
|
|
||||||
我们又进一步提炼了页面内部的各个块元素,抽象出 block(区块)的概念,就可以类似以下例子来配置页面和区块了。
|
### AdminLoader <Badge>待完善</Badge>
|
||||||
|
|
||||||
|
一种 top/left 菜单结构的 Admin 布局。菜单由其对应的 children 组成,通过 `/admin/:name` 映射到对应子页面,「菜单和页面配置」就是这部分的内容。
|
||||||
|
|
||||||
|
### ShareLoader <Badge type="error">未实现</Badge>
|
||||||
|
|
||||||
|
分享模块,细节待补充
|
||||||
|
|
||||||
|
## Blocks
|
||||||
|
|
||||||
|
将页面内部的各个块元素进行提炼,抽象了 block(区块)的概念。
|
||||||
|
|
||||||
|
### Grid - 布局
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
{
|
{
|
||||||
type: 'page',
|
type: 'grid',
|
||||||
|
span: 12,
|
||||||
blocks: [
|
blocks: [
|
||||||
{
|
{
|
||||||
type: 'table',
|
col: 1,
|
||||||
}
|
order: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
col: 2,
|
||||||
|
order: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
col: 1,
|
||||||
|
order: 2,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Descriptions - 详情
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
type: 'descriptions',
|
||||||
|
fields: [],
|
||||||
|
actions: [],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Form - 表单
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
type: 'form',
|
||||||
|
fields: [],
|
||||||
|
// 表单提交反馈信息,细节待定
|
||||||
|
returnType,
|
||||||
|
redirect,
|
||||||
|
message,
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Table - 表单
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
type: 'table',
|
||||||
|
defaultPerPage: 20,
|
||||||
|
draggable: false,
|
||||||
|
filter: {},
|
||||||
|
sort: [],
|
||||||
|
detailsOpenMode: 'drawer',
|
||||||
|
actions: [],
|
||||||
|
fields: [],
|
||||||
|
details: [],
|
||||||
|
labelField,
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Calendar - 日历
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
type: 'calendar',
|
||||||
|
filter: {},
|
||||||
|
detailsOpenMode: 'drawer',
|
||||||
|
actions: [],
|
||||||
|
details: [],
|
||||||
|
labelField,
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Kanban - 看板
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
type: 'kanban',
|
||||||
|
groupField,
|
||||||
|
labelField,
|
||||||
|
fields,
|
||||||
|
filter,
|
||||||
|
actions,
|
||||||
|
detailsOpenMode,
|
||||||
|
details,
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Markdown
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
type: 'markdown',
|
||||||
|
content: '',
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Actions
|
||||||
|
|
||||||
|
操作按钮
|
||||||
|
|
||||||
|
### create - 新增
|
||||||
|
|
||||||
|
### update - 编辑
|
||||||
|
|
||||||
|
### destroy - 删除
|
||||||
|
|
||||||
|
### filter - 筛选
|
||||||
|
|
||||||
|
### print - 打印
|
||||||
|
|
||||||
|
### export - 导出
|
||||||
|
|
||||||
|
## Fields
|
||||||
|
|
||||||
|
字段控件
|
||||||
|
|
||||||
|
### boolean
|
||||||
|
### cascader
|
||||||
|
### checkbox
|
||||||
|
### checkboxes
|
||||||
|
### colorSelect
|
||||||
|
### date
|
||||||
|
### drawerSelect
|
||||||
|
### filter
|
||||||
|
### icon
|
||||||
|
### markdown
|
||||||
|
### number
|
||||||
|
### password
|
||||||
|
### percent
|
||||||
|
### radio
|
||||||
|
### remoteSelect
|
||||||
|
### string
|
||||||
|
### select
|
||||||
|
### subTable
|
||||||
|
### textarea
|
||||||
|
### time
|
||||||
|
### upload
|
||||||
|
@ -4,7 +4,7 @@ order: 8
|
|||||||
# toc: menu
|
# toc: menu
|
||||||
---
|
---
|
||||||
|
|
||||||
# @nocobase/migrate <Badge>未实现</Badge>
|
# @nocobase/migrator <Badge>未实现</Badge>
|
||||||
|
|
||||||
NocoBase 的 Database 是基于 Sequelize,Sequelize 虽然提供了 sequelize-cli,包括 migrations 和 seeders 但是并不适用于 NocoBase。
|
NocoBase 的 Database 是基于 Sequelize,Sequelize 虽然提供了 sequelize-cli,包括 migrations 和 seeders 但是并不适用于 NocoBase。
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: '@nocobase/plugin-action-logs'
|
title: '@nocobase/plugin-action-logs'
|
||||||
|
order: 5
|
||||||
group:
|
group:
|
||||||
order: 3
|
order: 3
|
||||||
title: 官方插件
|
title: 官方插件
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: '@nocobase/plugin-automations'
|
title: '@nocobase/plugin-automations'
|
||||||
|
order: 4
|
||||||
---
|
---
|
||||||
|
|
||||||
# @nocobase/plugin-automations
|
# @nocobase/plugin-automations
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: '@nocobase/plugin-collections'
|
title: '@nocobase/plugin-collections'
|
||||||
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
# @nocobase/plugin-collections
|
# @nocobase/plugin-collections
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: '@nocobase/plugin-pages'
|
title: '@nocobase/plugin-pages'
|
||||||
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
# @nocobase/plugin-pages
|
# @nocobase/plugin-pages
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: '@nocobase/plugin-permissions'
|
title: '@nocobase/plugin-permissions'
|
||||||
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
# @nocobase/plugin-permissions
|
# @nocobase/plugin-permissions
|
||||||
|
Loading…
Reference in New Issue
Block a user