插件基础 ​

当标准化的模型驱动界面无法满足特定业务需求时，iBizHUB插件体系能够无缝接入定制化的UI组件和业务逻辑，这种设计既保持了框架的规范性，又兼顾了业务的灵活性。为进一步拓展标准引擎的能力边界，系统引入插件化机制，支持三大核心扩展场景：

  • 自定义控件注入：可根据个性化需求丰富界面展示形式

  • 业务逻辑块重写：方便开发者针对特定业务场景灵活调整处理逻辑

  • 原生组件替换：能够实现预置组件和逻辑块完整功能替换

远程&本地 ​

iBizHUB插件提供远程模式与本地模式两种加载方式，远程模式适用于需要跨应用共享、动态更新的插件场景，而本地模式则更适合于特定项目内的快速迭代与局部功能扩展。两种模式各具特性与适用场景，合理选择插件模式能够有效提升插件开发效率与应用性能，满足多样化的业务需求，助力构建更具扩展性与稳定性的 iBiz 应用生态。

  • 远程插件采用独立打包、独立部署方案，插件资源托管于资源服务（如：CDN、npm私有库等），依托动态导入机制实现运行时按需加载，通过环境变量统一配置资源路径，资源路径严格遵循unpkg 模块规范，适用于高频迭代、多应用共享、需热更新能力的业务模块，具备显著的动态性与跨应用协同价值。

  • 本地插件则采用编译期集成策略，与前端项目共同构建打包，通过 Vue 插件系统直接挂载，版本与前端项目强绑定，适用于核心基础组件、高性能敏感型控件或深度定制化模块，具备更优的加载性能与部署一致性。

生命周期 ​

插件的生命周期大致包含插件建模（平台化插件定义）、插件开发（标准化开发流程）、插件部署（推送插件成果物）、运行插件（运行环境验证）4个阶段，详情如下图：

插件生命周期关系图

插件建模阶段 ​

  • Modeling平台创建插件：在可视化建模平台中声明新插件，定义插件元数据包括唯一标识符、名称等基础信息

  • 控件、逻辑块绑定插件：将UI控件或者逻辑模块关联到插件，建立插件与界面的关系

插件开发阶段 ​

  • CLI工具初始化：使用官方提供命令行工具快速生成插件项目骨架，包含标准目录结构、构建配置和开发环境设置

  • 插件功能实现：基于框架规范开发具体业务逻辑，包括组件渲染、数据处理、事件交互等核心功能的编码实现

  • 构建与打包：通过构建工具生成符合部署标准的产物，包括代码压缩、资源优化、依赖打包等处理流程

插件部署阶段 ​

  • 资源服务推送：将插件构建产物推送到资源服务器，供前端项目运行使用

  • 参数动态配置：调整插件远程仓库参数、前端项目的插件基础路径参数，实现热更新机制，无需重新部署即可修改插件行为

运行验证阶段 ​

  • Modeling模型发布：在Modeling平台调整后的模型发布到运行环境，供前端项目运行使用

  • 运行时验证：在实际业务场景中验证插件功能，确保插件稳定性和功能完整性

插件类型 ​

iBiz团队针对前端应用架构抽象出涵盖UI控件、逻辑处理等多个关键维度的插件。目前iBizHUB已支持下方列表插件，为复杂企业级应用的开发提供标准化、可复用的功能单元，有效提升开发效率与工程一致性。

插件类型适配器名称
AC_ITEMregisterAcItemProvider自填列表项绘制插件
EDITOR_CUSTOMSTYLEregisterEditorProvider编辑器自定义绘制插件
GRID_COLRENDERregisterGridColumnProvider | registerTreeGridExColumnProvider数据表格列绘制插件
TOOLBAR_ITEMregisterToolbarItemProvider工具栏项绘制插件
UILOGICNODEregisterUILogicNodeProvider界面逻辑节点插件
VIEW_CUSTOMregisterViewProvider实体视图绘制插件
DEMETHODregisterDEMethodProvider应用实体行为插件
APPCOUNTERregisterAppCounterProvider应用计数器插件
DEUIACTIONregisterUIActionProvider应用实体界面行为插件
FORM_USERCONTROLregisterFormDetailProvider表单自定义控件绘制插件
CHART_RENDERregisterControlProvider图表绘制插件
CUSTOMregisterControlProvider自定义部件绘制插件
DATAVIEW_RENDERregisterControlProvider数据视图绘制插件
EDITFORM_RENDERregisterControlProvider编辑表单绘制插件
GRID_RENDERregisterControlProvider数据表格绘制插件
LIST_RENDERregisterControlProvider列表绘制插件
PORTLET_CUSTOMregisterControlProvider自定义门户部件绘制插件
SEARCHFORM_RENDERregisterControlProvider搜索表单绘制插件
TOOLBAR_RENDERregisterControlProvider工具栏绘制插件
TREE_RENDERregisterControlProvider树视图绘制插件
SEARCHBAR_RENDERregisterControlProvider搜索栏绘制插件
WIZARDPANEL_RENDERregisterControlProvider向导面板绘制插件

iBizHUB在应用架构中UI控件、逻辑处理均遵循标准化适配器完成注册，在运行过程中查找适配器完成消费。若发现存在插件根据插件类型、插件标识组成唯一标识获取注册的适配器进而完成功能，反之，则使用iBizHUB内置的默认适配器完成功能。

请求路径 ​

远程插件请求路径严格遵循 unpkg 模块规范，由三部分构成：

  1. 插件基础路径：由前端项目环境参数 pluginBaseUrl 定义；
  2. 运行时插件仓库配置：在 Modeling 建模平台中配置，格式为 @插件名称@插件版本号；
  3. 插件明细资源路径：指向插件构建输出的具体资源文件。

前端项目在运行过程中，首先会根据配置的 pluginBaseUrl 和插件仓库路径动态获取插件的 package.json 文件，解析其中的 system 和 styles 字段，分别加载对应的 JavaScript 脚本与样式文件，完成插件的运行时装配。

package.json 中与插件加载相关的配置属性如下：

属性名说明
system插件构建后的主入口脚本文件
styles插件构建后的样式文件

配置示例如下图所示：

插件请求路径示意图

示例：属性表格插件的加载流程

假设存在如下配置：

  • 前端环境变量 pluginBaseUrl：https://npmjs.ibizlab.cn
  • 运行时插件仓库配置 @ibiz-plugin-example/entity-field-grid@0.0.1

则具体加载流程如下：

  1. 请求 package.json
    拼接路径：
    https://npmjs.ibizlab.cn/@ibiz-plugin-example/entity-field-grid@0.0.1/package.json

  2. 解析并加载资源
    根据 package.json 中定义的 system 和 styles 属性，构造完整资源路径并加载：

    • JavaScript 文件：
      https://npmjs.ibizlab.cn/@ibiz-plugin-example/entity-field-grid@0.0.1/dist/index.legacy.js
    • 样式文件（如存在）：
      https://npmjs.ibizlab.cn/@ibiz-plugin-example/entity-field-grid@0.0.1/dist/style.css

  3. 装配插件
    成功加载脚本与样式后，系统将执行插件逻辑并应用样式，完成插件集成。

提示

  • 若插件为纯逻辑型插件，需将 styles 置空

多层依赖 ​

在插件开发过程中，插件A有时会依赖于另一个插件B运行，在这种情况下，必须在加载插件A之前加载插件B，iBizHUB采用SystemJS实现插件级联加载。

在插件包package.json中添加systemjs-importmap属性，可配置选项如下：

属性名说明
baseUrl指向插件基础路径，不写指向环境里写的插件默认所在目录
packages指向依赖插件的package.json文件
imports指向依赖插件打包后的文件
styles指向依赖插件打包后的样式文件

示例

现有插件@ibiz-template-plugin/antv-x6-design依赖于@ibiz-template-plugin/design-base

在@ibiz-template-plugin/antv-x6-design插件的package.json中添加systemjs-importmap属性:

json
{
    "name": "@ibiz-template-plugin/antv-x6-design",
    "systemjs-importmap": {
        "baseUrl": "http://172.16.240.221(非必填)",
        "packages": {
            "@ibiz-template-plugin/design-base": "@ibiz-template-plugin/design-base@0.0.1-dev.3/package.json"
        },
        "imports": {
            "@ibiz-template-plugin/design-base": "@ibiz-template-plugin/design-base@0.0.1-dev.3/dist/index.system.min.js"
        },
        "styles": {
            "@ibiz-template-plugin/design-base": "@ibiz-template-plugin/design-base@0.0.1-dev.3/dist/index.min.css"
        }
    },
}

静态资源 ​

插件中可能会使用到静态资源，在部署时想要插件的静态资源正常加载，必须在插件的根目录src下创建一个global.ts文件，内容如下：

js
// 文件路径: [插件项目的根目录]/src/global.ts
import { PluginStaticResource } from '@ibiz-template/runtime';
const resource = new PluginStaticResource(import.meta.url);
export { resource };

在组件中通过resource.dir方法引用静态资源文件：

js
// 例：[插件项目的根目录]/public/assets/img/xxx.svg
resource.dir('assets/img/xxx.svg');

插件参数 ​

在远程插件类型的设计中，支持通过参数化配置实现插件行为的灵活定制。iBizHUB 在加载插件时，会将 Modeling 建模平台中配置的插件参数动态注入到插件实例的参数对象中，从而使插件能够依据不同的参数配置表现出多态行为，提升插件的扩展性与适配性。

插件参数配置示意图
  • 插件入口模块
js
import { App } from 'vue';
import './replace-default-demo.scss';
import { registerControlProvider } from '@ibiz-template/runtime';
import { ReplaceDefaultDemo } from './replace-default-demo';
import { ReplaceDefaultDemoProvider } from './replace-default-demo.provider';

export default {
  install(app: App, params: IParams = {}): void {
    // 注册插件组件
    app.component(ReplaceDefaultDemo.name!, ReplaceDefaultDemo);
    
    // 根据参数判断是否全局替换默认表格控件
    if (params.replaceglobal === 'true') {
      registerControlProvider('GRID', () => new ReplaceDefaultDemoProvider());
    }
    
    // 注册当前插件类型的适配器
    // 其中 GRID_RENDER_REPLACE_DEFAULT_DEMO 为插件类型标识
    registerControlProvider(
      'GRID_RENDER_REPLACE_DEFAULT_DEMO',
      () => new ReplaceDefaultDemoProvider(),
    );
  },
};

在上述示例中，插件根据是否配置了 replaceglobal 参数来决定其生效范围：若该参数设置为 'true'，则插件会全局替换系统中预置的表格控件逻辑；否则，插件仅对显式绑定该插件的表格控件生效。这种参数驱动的机制为插件提供了更高的灵活性和复用能力。

全局插件 ​

通常，插件用于针对特定场景进行功能扩展，而全局插件则可视为一个插件集合，内部可封装多个插件模块，并在应用初始化阶段立即执行。全局插件适用于需要统一增强整个应用内某类组件行为或样式的场景，例如调整所有表格视图的布局、全局增强表单交互逻辑等。创建并使用全局插件的步骤如下：

  • 在Modeling建模工具创建全局插件
新建全局插件
  • 在Modeling建模工具应用中绑定上一步创建的全局插件
绑定全局插件
  • 插件入口模块
js
import { App } from 'vue';
import { IViewController } from '@ibiz-template/runtime';
import { GridViewEngine } from './grid-view-engine';
import './index.scss';

export default {
  install(_app: App): void {
    // 注册自定义表格视图引擎，替换标准引擎以实现全局扩展
    ibiz.engine.register(
      'VIEW_GridView',
      (controller: IViewController) => new GridViewEngine(controller),
    );
    // 可在此处注册更多全局扩展逻辑
  },
};

在此示例中，我们在应用初始化时扩展了表格视图引擎，从而实现对应用中所有表格视图的统一扩展。您也可以在该插件中注册其他组件、全局行为、服务等，从而实现更广泛的增强能力。

提示

  • 一个应用内仅一个全局插件，且全局插件标识固定（GLOBAL_APP_UTIL）
未来已来，立即拥抱应用融合的力量
Released under the MIT License.