tachybase_todo/docs/cores/packages/client.md

257 lines
4.0 KiB
Markdown
Raw Normal View History

2021-04-20 23:53:37 +08:00
---
title: '@nocobase/client'
order: 6
---
# @nocobase/client <Badge>未实现</Badge>
## 介绍
2021-04-21 23:05:10 +08:00
提供适配 Ant Design 组件的 NocoBase 客户端。
2021-04-20 23:53:37 +08:00
2021-04-21 23:05:10 +08:00
<Alert title="注意">
@nocobase/client 可以用于任意 React 框架中,不过还存在许多难点和细节未解决。
</Alert>
## Loaders
### TemplateLoader <Badge>待完善</Badge>
- routes路由表大杂烩。类型包括layout、page、redirect、url、menuGroup**页面就是 type=page 的 route**
- templates模板
- pathnameURL 路径
为了适应无代码需求,提供了一种 URL 和 Template 映射规则,如以下例子:
2021-04-20 23:53:37 +08:00
```ts
2021-04-21 23:05:10 +08:00
const routes = [
2021-04-20 23:53:37 +08:00
{
type: 'layout',
2021-04-21 23:05:10 +08:00
name: 'auth', // 因为 /login、/register 没有统一的前缀,所以这里没有配置 path
2021-04-20 23:53:37 +08:00
template: 'AuthLayout', // 用于处理 login、register 等页面的布局
children: [
{
type: 'page',
name: 'login',
path: '/login',
template: 'BlockLoader', // 用于解析 blocks 配置参数
blocks: [],
},
{
type: 'page',
name: 'register',
path: '/register',
template: 'BlockLoader',
blocks: [],
}
]
},
{
2021-04-21 23:05:10 +08:00
type: 'layout',
2021-04-20 23:53:37 +08:00
name: 'admin',
path: '/admin', // /admin 下的任意 uri 都转到这里
template: 'AdminLoader',
redirect: '/admin/welcome',
// admin layout 提供了 top/left 布局的菜单,菜单由 children 组成
// 通过解析 /admin/:name找到对应子页面
// 「菜单和页面配置」就是这部分的内容
children: [
2021-04-21 23:05:10 +08:00
{
2021-04-20 23:53:37 +08:00
type: 'page',
name: 'welcome',
template: 'BlockLoader',
title: '欢迎',
blocks: [],
},
{
2021-04-21 23:05:10 +08:00
type: 'url',
2021-04-20 23:53:37 +08:00
url: 'https://www.nocobase.com/',
title: 'xxx',
},
{
type: 'menuGroup',
title: 'xxx',
},
],
},
{
// 配置跳转
type: 'redirect',
path: '/',
redirect: '/admin',
},
2021-04-21 23:05:10 +08:00
];
2021-04-20 23:53:37 +08:00
```
2021-04-21 23:05:10 +08:00
<pre lang="tsx">
<TemplateLoader
pathname={pathname}
routes={routes}
templates={{
AuthLayout,
BlockLoader,
AdminLoader,
}}
/>
</pre>
2021-04-20 23:53:37 +08:00
2021-04-21 23:05:10 +08:00
### BlockLoader <Badge type="error">未实现</Badge>
2021-04-20 23:53:37 +08:00
2021-04-21 23:05:10 +08:00
区块驱动器。
2021-04-20 23:53:37 +08:00
2021-04-21 23:05:10 +08:00
### AdminLoader <Badge>待完善</Badge>
一种 top/left 菜单结构的 Admin 布局。菜单由其对应的 children 组成,通过 `/admin/:name` 映射到对应子页面,「菜单和页面配置」就是这部分的内容。
### ShareLoader <Badge type="error">未实现</Badge>
分享模块,细节待补充
## Blocks
将页面内部的各个块元素进行提炼,抽象了 block区块的概念。
### Grid - 布局
2021-04-20 23:53:37 +08:00
```ts
{
2021-04-21 23:05:10 +08:00
type: 'grid',
span: 12,
2021-04-20 23:53:37 +08:00
blocks: [
{
2021-04-21 23:05:10 +08:00
col: 1,
order: 1,
},
{
col: 2,
order: 1,
},
{
col: 1,
order: 2,
},
2021-04-20 23:53:37 +08:00
],
}
```
2021-04-21 23:05:10 +08:00
### 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