nocobase/docs/cores/packages/client.md

title	order
@nocobase/client	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 映射规则，如以下例子：

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 - 布局

{
  type: 'grid',
  span: 12,
  blocks: [
    {
      col: 1,
      order: 1,
    },
    {
      col: 2,
      order: 1,
    },
    {
      col: 1,
      order: 2,
    },
  ],
}

Descriptions - 详情

{
  type: 'descriptions',
  fields: [],
  actions: [],
}

Form - 表单

{
  type: 'form',
  fields: [],
  // 表单提交反馈信息，细节待定
  returnType,
  redirect,
  message,
}

Table - 表单

{
  type: 'table',
  defaultPerPage: 20,
  draggable: false,
  filter: {},
  sort: [],
  detailsOpenMode: 'drawer',
  actions: [],
  fields: [],
  details: [],
  labelField,
}

Calendar - 日历

{
  type: 'calendar',
  filter: {},
  detailsOpenMode: 'drawer',
  actions: [],
  details: [],
  labelField,
}

Kanban - 看板

{
  type: 'kanban',
  groupField,
  labelField,
  fields,
  filter,
  actions,
  detailsOpenMode,
  details,
}

Markdown

{
  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