--- title: '@nocobase/client' order: 6 --- # @nocobase/client 未实现 ## 介绍 提供适配 Ant Design 组件的 NocoBase 客户端。 @nocobase/client 可以用于任意 React 框架中,不过还存在许多难点和细节未解决。 ## Loaders ### TemplateLoader 待完善 - routes:路由表,大杂烩。类型包括:layout、page、redirect、url、menuGroup,**页面就是 type=page 的 route** - templates:模板 - pathname:URL 路径 为了适应无代码需求,提供了一种 URL 和 Template 映射规则,如以下例子: ```ts const routes = [ { type: 'layout', name: 'auth', // 因为 /login、/register 没有统一的前缀,所以这里没有配置 path template: 'AuthLayout', // 用于处理 login、register 等页面的布局 children: [ { type: 'page', name: 'login', path: '/login', template: 'BlockLoader', // 用于解析 blocks 配置参数 blocks: [], }, { type: 'page', name: 'register', path: '/register', template: 'BlockLoader', blocks: [], } ] }, { type: 'layout', name: 'admin', path: '/admin', // /admin 下的任意 uri 都转到这里 template: 'AdminLoader', redirect: '/admin/welcome', // admin layout 提供了 top/left 布局的菜单,菜单由 children 组成 // 通过解析 /admin/:name,找到对应子页面 // 「菜单和页面配置」就是这部分的内容 children: [ { type: 'page', name: 'welcome', template: 'BlockLoader', title: '欢迎', blocks: [], }, { type: 'url', url: 'https://www.nocobase.com/', title: 'xxx', }, { type: 'menuGroup', title: 'xxx', }, ], }, { // 配置跳转 type: 'redirect', path: '/', redirect: '/admin', }, ]; ```

### BlockLoader 未实现 区块驱动器。 ### AdminLoader 待完善 一种 top/left 菜单结构的 Admin 布局。菜单由其对应的 children 组成,通过 `/admin/:name` 映射到对应子页面,「菜单和页面配置」就是这部分的内容。 ### ShareLoader 未实现 分享模块,细节待补充 ## Blocks 将页面内部的各个块元素进行提炼,抽象了 block(区块)的概念。 ### Grid - 布局 ```ts { type: 'grid', span: 12, blocks: [ { 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