Extension

功能描述

扩展组件支持3种模式:

本地react：组件的实现由项目导出后本地完成，通过 extensionId 注册
远端通用：组件的实现由外部完成通过esm模块default导出，js文件和css文件通过url加载。
远端通用（CETA托管）：与上一个相同，区别是js和css文件由CETA托管。支持发布到组件库，支持充当表单字段。

通过脚手架创建工程（ 远端通用 ）：

npx --registry https://nexus.dev.bizops.com.cn/repository/npm-group/ create-icp-extension@latest

AI 工具系统提示词文件位于：<project>/icp-extension.md

开发阶段可使用远程通用模式，将本地 dev server 地址填入 js url 中，启动项目试运行进行在线 debug。

配置示例

远端通用模式

js和css文件需自行托管。

{
  "component": "Extension",
  "componentProps": {
    "extensionType": "remote-common",
    "extensionJsUrl": "https://example.com/foo.js",
    "extensionCssUrl": "https://example.com/foo.css",
    "extensionParams": {
      "userId": ":context.userProfile.id"
    }
  }
}

// https://example.com/foo.js

export default function mount(element, { params, formApi, messageApi, restApi, i18nApi, routerApi }) {
  console.log(params);
  // print: { userId: 1234 }

  element.innerText = 'Hello World';

  const resizeListener = () => {
    // resize
  }

  window.addEventListener('resize', resizeListener);

  return function unmount() {
    // do cleanup
    window.removeEventListener('resize', resizeListener);
  }
}

远端通用模式 - CETA 托管（推荐）

与上面模式相同，区别是js和css文件由CETA托管。通过表单设计器GUI上传js和css文件。不建议直接修改json配置。

此模式支持发布到组件库，支持充当表单字段。

{
  "component": "Extension",
  "componentProps": {
    "extensionType": "remote-common-ceta-hosted",
    "extensionJs": {
      "filename": "foo.js"
    },
    "extensionCss": {
      "filename": "foo.css"
    },
    "extensionParams": {
      "userId": ":context.userProfile.id"
    }
  }
}

本地react模式

{
  "component": "Extension",
  "componentProps": {
    "extensionType": "local-react",
    "extensionId": "com.example.custom-extension",
    "extensionParams": {
      "userId": ":context.userProfile.id"
    }
  }
}

项目导出后本地实现并注册

import { setup } from '@icp/settings';
import MyCustomExtension from './MyCustomExtension';

setup({
  extensionComponents: {
    'com.example.custom-extension': MyCustomExtension
  }
});

容器属性

所有组件配置的第一层均支持容器属性

组件属性 componentsProps

Name	Type	是否支持 Variable Pattern	Description
className	string	✔️	Root div 的 className
style	object		Root div 的 style
extensionType	'local-react' \| 'remote-common'		模式：本地react 或远端通用
extensionId	string		本地react模式使用，注册时的id
extensionJsUrl	string		远端通用模式使用，js文件地址
extensionCssUrl	string		远端通用模式使用，css文件地址
extensionParams	object	✔️	传入扩展的参数对象

JS API

通过 formApi.getFieldApi() 获取的接口如下：

Name	Type	Description
node	HTML Element	组件的根 DOM 元素

功能描述​

配置示例​

容器属性​

组件属性 componentsProps​

JS API​

功能描述

配置示例

容器属性

组件属性 componentsProps

JS API