nocobase/docs/zh-CN/development/client/index.md

概述

NocoBase 客户端的扩展大多以 Provider 的形式提供，无论是内置的 Provider 还是插件的主文件都是 Provider。

内置的 Providers

• APIClientProvider
• I18nextProvider
• AntdConfigProvider
• RemoteRouteSwitchProvider
• SystemSettingsProvider
• PluginManagerProvider
• SchemaComponentProvider
• SchemaInitializerProvider
• BlockSchemaComponentProvider
• AntdSchemaComponentProvider
• DocumentTitleProvider
• ACLProvider

客户端 Provider 模块的注册

静态的 Provider 通过 app.use() 注册，动态的 Provider 通过 dynamicImport 适配。

import React from 'react';
import { Application } from '@nocobase/client';

const app = new Application({
  apiClient: {
    baseURL: process.env.API_BASE_URL,
  },
  dynamicImport: (name: string) => {
    return import(`../plugins/${name}`);
  },
});

// 访问 /hello 页面时，显示 Hello world!
const HelloProvider = React.memo((props) => {
  const location = useLocation();
  if (location.pathname === '/hello') {
    return <div>Hello world!</div>
  }
  return <>{props.children}</>
});

app.use(HelloProvider);

插件的客户端

初始化的空插件，服务端相关目录结构如下：

|- /my-plugin
  |- /src
    |- /client
      |- index.tsx
  |- client.d.ts
  |- client.js

client/index.tsx 内容如下：

import React from 'react';

// 这是一个空的 Provider，只有 children 传递，并未提供自定义的 Context
export default React.memo((props) => {
  return <>{props.children}</>;
});

插件 pm.add 之后，会向 packages/app/client/src/plugins 目录写入 my-plugin.ts 文件