特性
iBizHUB包含很多非常有意思的特性，比如:
企业级工程规范，内置权限体系、国际化多语言方案、动态路由配置等企业级模块
跨应用协同架构，基于模型数据驱动的微前端集成方案，各团队可独立演进各自的产品，由框架层统一处理应用间的服务编排、状态管理和视图集成
模型驱动开发，支持DSL配置到UI组件的自动化映射，实现快速开发与业务定制
多场景融合方案，支持应用菜单、数据关系部件、树部件、界面行为组、表单等场景融合
插件化，啥都能改，支持运行时动态加载/卸载，快速响应复杂业务
场景化最佳实践，覆盖AI/数据可视化/工作流/表单设计/逻辑设计等多个核心场景
......
跨应用协同架构
在大型企业级前端架构演进中，传统单体架构面临模块耦合度高、迭代效率低等工程化挑战。通过对主流微前端方案的深度实践与问题抽象，我们发现现有解决方案普遍存在以下痛点：资源加载冗余、应用切换性能瓶颈、跨应用状态管理复杂、调试链路不透明等。iBizHUB创新性地提出了基于模型驱动的微前端集成范式，通过框架层统一治理应用间的服务编排、状态同步和视图聚合，使开发者能聚焦业务价值实现，最终通过声明式配置完成应用集成。
基于现有微前端方案普遍存在难以规避的架构缺陷，iBizHUB通过模型数据驱动应用组装，在框架层实现了多重突破：首先提供可视化配置工具ModelingIDE实现零侵入式应用集成，消除改造适配成本；其次采用统一组件体系避免资源重复加载，提升应用间切换效率；同时支持子应用覆盖主应用的灵活扩展模式，通过扩展应用机制满足个性化业务定制需求；最终在框架层面统一处理应用隔离问题，确保多应用集成后仍能保持一致的交互体验。
在工程实现层面，开发者仅需在主应用资源初始化完成生命周期中注册子应用元数据，包括：应用名称（唯一）、资源入口路径、API服务基础路径以及插件基础路径，即可实现无缝的应用集成与协同。
ts
import { IApiAppHubService } from '@ibiz-template/runtime';
import { AppHooks } from '@ibiz-template/vue3-util';
AppHooks.appResorceInited.tap((ctx: IApiAppHubService) => {
ctx.microAppConfigCenter.registerMicroApps([
{
name: 'quickstart_b', // 子应用名称（唯一）
entry: 'https://open.ibizlab.cn/quickstart-b', // 子应用资源入口路径
baseUrl: 'quickstart_b_api', // 子应用API服务基础路径
pluginBaseUrl: './plugins', // 子应用插件基础路径
},
// ......
]);
});
runApp([VueTextFormat, gridLayout, ComponentsRegister, UserRegister], {
getAuthGuard: () => new StaticAuthGuard(),
});在子应用元数据注册完成后，iBizHUB框架基于模型驱动引擎，自动完成应用资源的智能编排与生命周期管理。通过动态分析应用模型数据，实现子应用资源的精准按需加载，同时建立跨应用通信机制与状态同步管道，确保各子应用既能独立运行又能无缝协同，最终达成高性能、低耦合的应用集成效果。
应用菜单融合
应用菜单融合是一种动态共享和组合不同应用菜单的技术方案，它允许独立开发的应用在运行时基于用户角色和业务场景，将各自的菜单项无缝整合到统一的导航系统中。与传统的微前端方案不同，该技术无需复杂的模块加载或 iframe 嵌套，也无需侵入各应用的代码或构建流程，而是通过运行时动态组合实现菜单的统一管理。支持应用首页默认菜单、上边栏应用菜单、左边栏应用菜单、右边栏应用菜单、下边栏应用菜单5大场景。
在主应用初始化阶段，子应用将其菜单数据（DSL 模型）注册到中央管理模块（AppHub）。当视图组件需要渲染菜单时，基于AppHub中存储的菜单数据，动态组装最终的菜单 DSL 模型。融合过程根据预设策略对主应用和子应用的菜单项进行匹配、覆盖或追加，最终生成逻辑一致的导航结构。
常规融合
若子应用菜单项的标识（id）与主应用同级菜单项标识相同，则子应用菜单项覆盖主应用对应项
反之，则将子应用菜单项附加到主应用同级菜单的末尾
json
{
"valid": true,
"caption": "多应用融合",
"tooltip": "多应用融合",
"id": "app_federation",
"itemType": "MENUITEM",
"appMenuItems": [
{
"itemType": "MENUITEM",
"valid": true,
"caption": "主应用占位菜单项",
"tooltip": "主应用占位菜单项",
"id": "menuitem142"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "tab_ctrl_federation1",
"valid": true,
"caption": "数据关系部件融合",
"tooltip": "数据关系部件融合",
"id": "menuitem143"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "tree_ctrl_federation",
"valid": true,
"caption": "树部件融合",
"tooltip": "树部件融合",
"id": "menuitem144"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "actions_federation",
"valid": true,
"caption": "界面行为组融合",
"tooltip": "界面行为组融合",
"id": "menuitem145"
}
]
// ......
}json
{
"itemType": "MENUITEM",
"valid": true,
"caption": "多应用融合",
"tooltip": "多应用融合",
"id": "app_federation",
"appMenuItems": [
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_appb",
"valid": true,
"caption": "子应用B同标识替换",
"tooltip": "子应用B同标识替换",
"id": "menuitem142"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_appb_add1",
"valid": true,
"caption": "子应用B追加",
"tooltip": "子应用B追加",
"id": "child_appb_add1"
}
]
// ......
}json
{
"valid": true,
"caption": "多应用融合",
"tooltip": "多应用融合",
"id": "app_federation",
"itemType": "MENUITEM",
"appMenuItems": [
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_appb",
"valid": true,
"caption": "子应用B同标识替换",
"tooltip": "子应用B同标识替换",
"id": "menuitem142"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "tab_ctrl_federation1",
"valid": true,
"caption": "数据关系部件融合",
"tooltip": "数据关系部件融合",
"id": "menuitem143"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "tree_ctrl_federation",
"valid": true,
"caption": "树部件融合",
"tooltip": "树部件融合",
"id": "menuitem144"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "actions_federation",
"valid": true,
"caption": "界面行为组融合",
"tooltip": "界面行为组融合",
"id": "menuitem145"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_appb_add1",
"valid": true,
"caption": "子应用B追加",
"tooltip": "子应用B追加",
"id": "child_appb_add1"
}
]
// ......
}含分割符的融合（主应用有分割符，子应用无）
- 主应用菜单以分割符（SEPERATOR）为界分为两部分，子应用菜单仅与分割符前的部分按常规融合规则进行融合，分割符后的部分保持不变
json
{
"appMenuItems": [
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "sidebar_sys",
"sysImage": {
"cssClass": "fa fa-bank",
"glyph": "xf19c@FontAwesome"
},
"valid": true,
"caption": "系统",
"tooltip": "系统",
"id": "menuitem2"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "sidebar_de",
"sysImage": {
"cssClass": "fa fa-database",
"glyph": "xf1c0@FontAwesome"
},
"openDefault": true,
"valid": true,
"caption": "实体",
"tooltip": "实体",
"id": "menuitem1"
},
{
"itemType": "SEPERATOR",
"spanMode": true,
"valid": true,
"id": "seperator1"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0925155899",
"sysImage": {
"cssClass": "fa fa-cog",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "设置",
"tooltip": "设置",
"id": "menuitem3"
}
],
//......
}json
{
"appMenuItems": [
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_sidebar_sys",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf19c@FontAwesome"
},
"valid": true,
"caption": "子应用菜单项2",
"tooltip": "子应用菜单项2",
"id": "menuitem2"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0926688246",
"sysImage": {
"cssClass": "fa fa-tasks",
"glyph": "xf0ae@FontAwesome"
},
"valid": true,
"caption": "子应用菜单项1",
"tooltip": "子应用菜单项1",
"id": "child_menuitem1"
}
],
//......
}json
{
"appMenuItems": [
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_sidebar_sys",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf19c@FontAwesome"
},
"valid": true,
"caption": "子应用菜单项2",
"tooltip": "子应用菜单项2",
"id": "menuitem2"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "sidebar_de",
"sysImage": {
"cssClass": "fa fa-database",
"glyph": "xf1c0@FontAwesome"
},
"openDefault": true,
"valid": true,
"caption": "实体",
"tooltip": "实体",
"id": "menuitem1"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0926688246",
"sysImage": {
"cssClass": "fa fa-tasks",
"glyph": "xf0ae@FontAwesome"
},
"valid": true,
"caption": "子应用菜单项1",
"tooltip": "子应用菜单项1",
"id": "child_menuitem1"
},
{
"itemType": "SEPERATOR",
"spanMode": true,
"valid": true,
"id": "seperator1"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0925155899",
"sysImage": {
"cssClass": "fa fa-cog",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "设置",
"tooltip": "设置",
"id": "menuitem3"
}
],
//......
}含分割符的融合（主应用和子应用均有分割符）
主应用和子应用菜单各自按分割符拆分为头部和底部两部分
头部菜单按常规融合规则进行融合；底部菜单若子应用菜单项标识与主应用相同则覆盖，否则将子应用菜单项插入到主应用底部菜单的前面
json
{
"appMenuItems": [
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "sidebar_sys",
"sysImage": {
"cssClass": "fa fa-bank",
"glyph": "xf19c@FontAwesome"
},
"valid": true,
"caption": "系统",
"tooltip": "系统",
"id": "menuitem2"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "sidebar_de",
"sysImage": {
"cssClass": "fa fa-database",
"glyph": "xf1c0@FontAwesome"
},
"openDefault": true,
"valid": true,
"caption": "实体",
"tooltip": "实体",
"id": "menuitem1"
},
{
"itemType": "SEPERATOR",
"spanMode": true,
"valid": true,
"id": "seperator1"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0925155899",
"sysImage": {
"cssClass": "fa fa-cog",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "设置",
"tooltip": "设置",
"id": "menuitem3"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0935155810",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "用户信息",
"tooltip": "用户信息",
"id": "menuitem4"
}
],
//......
}json
{
"appMenuItems": [
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_sidebar_sys",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf19c@FontAwesome"
},
"valid": true,
"caption": "子应用菜单项2",
"tooltip": "子应用菜单项2",
"id": "menuitem2"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0926688246",
"sysImage": {
"cssClass": "fa fa-tasks",
"glyph": "xf0ae@FontAwesome"
},
"valid": true,
"caption": "子应用菜单项1",
"tooltip": "子应用菜单项1",
"id": "child_menuitem1"
}
{
"itemType": "SEPERATOR",
"spanMode": true,
"valid": true,
"id": "child_seperator1"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_menuitem4",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "子应用菜单项4",
"tooltip": "子应用菜单项4",
"id": "menuitem4"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_menuitem5",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "子应用菜单项5",
"tooltip": "子应用菜单项5",
"id": "menuitem5"
}
],
//......
}json
{
"appMenuItems": [
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_sidebar_sys",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf19c@FontAwesome"
},
"valid": true,
"caption": "子应用菜单项2",
"tooltip": "子应用菜单项2",
"id": "menuitem2"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "sidebar_de",
"sysImage": {
"cssClass": "fa fa-database",
"glyph": "xf1c0@FontAwesome"
},
"openDefault": true,
"valid": true,
"caption": "实体",
"tooltip": "实体",
"id": "menuitem1"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0926688246",
"sysImage": {
"cssClass": "fa fa-tasks",
"glyph": "xf0ae@FontAwesome"
},
"valid": true,
"caption": "子应用菜单项1",
"tooltip": "子应用菜单项1",
"id": "child_menuitem1"
},
{
"itemType": "SEPERATOR",
"spanMode": true,
"valid": true,
"id": "seperator1"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_menuitem5",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "子应用菜单项5",
"tooltip": "子应用菜单项5",
"id": "menuitem5"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "usrappfunc0925155899",
"sysImage": {
"cssClass": "fa fa-cog",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "设置",
"tooltip": "设置",
"id": "menuitem3"
},
{
"accUserMode": 2,
"itemType": "MENUITEM",
"appFuncId": "child_menuitem4",
"sysImage": {
"cssClass": "fa fa-desktop",
"glyph": "xf013@FontAwesome"
},
"disableClose": true,
"valid": true,
"caption": "子应用菜单项4",
"tooltip": "子应用菜单项4",
"id": "menuitem4"
},
],
//......
}通过上述规则，系统能够在不同场景下灵活组合菜单，确保导航结构的统一性和可扩展性。
提示
子应用应用首页菜单默认菜单菜单标识固定识别为HUBSUBAPP,子应用上边栏应用菜单菜单标识固定识别为HUBSUBAPP_TOP、左边栏应用菜单菜单标识固定识别为HUBSUBAPP_LEFT、右边栏应用菜单菜单标识固定识别为HUBSUBAPP_RIGHT、下边栏应用菜单菜单标识固定识别为HUBSUBAPP_BOTTOM
数据关系部件融合
数据关系部件融合允许不同应用在运行时对数据关系栏、数据关系分页部件中的关系项进行动态替换、附加操作。与静态数据绑定不同，该方案支持跨应用的数据关系动态组合，无需侵入式修改各模块的代码逻辑，从而实现灵活的数据关联管理。
在主应用初始化阶段，子应用将其数据关系部件配置（DSL模型）注册到中央管理模块（AppHub）。当视图渲染数据关系部件时，基于AppHub中存储的数据关系部件数据，按策略动态组装最终的关系项集合。融合过程支持对关系项的替换、追加操作，确保数据关联的灵活性和一致性。
数据关系栏融合
- 实体数据关系栏分组项名称（name）相同替换，没有则附加；实体数据关系项标识（id）相同则替换，没有则附加
json
{
"dedrbarGroups": [
{
"caption": "通用",
"name": "通用",
"id": "usrdrgroup0514095082"
},
{
"caption": "产品",
"name": "产品",
"id": "usrdrgroup0514569929"
}
],
"dedrctrlItems": [
{
"dedrbarGroupId": "usrdrgroup0514569929",
"caption": "产品管理",
"appViewId": "plmweb.product_config_tree_exp_view",
"sysImage": {
"cssClass": "fa fa-th-large",
"glyph": "xf009@FontAwesome"
},
"id": "product"
},
{
"dedrbarGroupId": "usrdrgroup0514569929",
"caption": "项目管理",
"appViewId": "plmweb.project_config_tree_exp_view",
"sysImage": {
"cssClass": "fa fa-file-text-o",
"glyph": "xf0f6@FontAwesome"
},
"id": "project"
},
{
"dedrbarGroupId": "usrdrgroup0514569929",
"caption": "测试管理",
"appViewId": "plmweb.library_config_tree_exp_view",
"sysImage": {
"cssClass": "fa fa-bug",
"glyph": "xf188@FontAwesome"
},
"id": "library"
},
{
"dedrbarGroupId": "usrdrgroup0514569929",
"caption": "知识管理",
"appViewId": "plmweb.space_config_tree_exp_view",
"sysImage": {
"cssClass": "fa fa-book",
"glyph": "xf02d@FontAwesome"
},
"id": "space"
}
],
"dataRelationTag": "config_tab_exp_view_DR",
"modelType": "PSDEDRBAR",
"appDataEntityId": "plmweb.management",
//......
}json
{
"dedrbarGroups": [
{
"caption": "数据迁移",
"name": "数据迁移",
"id": "usrdrgroup1129124532"
}
],
"dedrctrlItems": [
{
"dedrbarGroupId": "usrdrgroup1129124532",
"caption": "禅道迁移设置",
"appViewId": "zentaoimpweb.zt_dts_setting_zentao_tab_exp_view",
"id": "zentaoimp"
}
],
"dataRelationTag": "config_tab_exp_view_DR",
"modelType": "PSDEDRBAR",
"appDataEntityId": "zentaoimpweb.management",
//......
}json
{
"dedrbarGroups": [
{
"caption": "通用",
"name": "通用",
"id": "usrdrgroup0514095082"
},
{
"caption": "产品",
"name": "产品",
"id": "usrdrgroup0514569929"
},
{
"caption": "数据迁移",
"name": "数据迁移",
"id": "usrdrgroup1129124532"
}
],
"dedrctrlItems": [
{
"dedrbarGroupId": "usrdrgroup0514569929",
"caption": "产品管理",
"appViewId": "plmweb.product_config_tree_exp_view",
"sysImage": {
"cssClass": "fa fa-th-large",
"glyph": "xf009@FontAwesome"
},
"id": "product"
},
{
"dedrbarGroupId": "usrdrgroup0514569929",
"caption": "项目管理",
"appViewId": "plmweb.project_config_tree_exp_view",
"sysImage": {
"cssClass": "fa fa-file-text-o",
"glyph": "xf0f6@FontAwesome"
},
"id": "project"
},
{
"dedrbarGroupId": "usrdrgroup0514569929",
"caption": "测试管理",
"appViewId": "plmweb.library_config_tree_exp_view",
"sysImage": {
"cssClass": "fa fa-bug",
"glyph": "xf188@FontAwesome"
},
"id": "library"
},
{
"dedrbarGroupId": "usrdrgroup0514569929",
"caption": "知识管理",
"appViewId": "plmweb.space_config_tree_exp_view",
"sysImage": {
"cssClass": "fa fa-book",
"glyph": "xf02d@FontAwesome"
},
"id": "space"
},
{
"dedrbarGroupId": "usrdrgroup1129124532",
"caption": "禅道迁移设置",
"appViewId": "zentaoimpweb.zt_dts_setting_zentao_tab_exp_view",
"id": "zentaoimp"
}
],
"dataRelationTag": "config_tab_exp_view_DR",
"modelType": "PSDEDRBAR",
"appDataEntityId": "plmweb.management",
//......
}数据关系分页部件融合
- 数据关系分页项标识（id）相同则替换，如果数据关系分页项定义成员标记（格式如：BEFORE/AFTER:目标项id）,则找到目标项，则根据位置在目标项前后附加），没有则附加到尾部
json
{
"dedrtabPages": [
{
"caption": "表格_基础",
"appViewId": "web.master_grid_base",
"id": "pitem1"
},
{
"caption": "主应用分页1",
"appViewId": "web.master_list_base",
"id": "pitem2"
}
],
"dataRelationTag": "DataRelation7",
"appDataEntityId": "web.master",
"modelType": "PSDEDRTAB"
//......
}json
{
"dedrtabPages": [
{
"caption": "子应用B分页2",
"appViewId": "web.master_child_appb_view5",
"id": "appb_item1"
},
{
"caption": "子应用B分页1同标识替换",
"appViewId": "web.master_child_appb_view4",
"id": "pitem1"
}
],
"dataRelationTag": "DataRelation7",
"appDataEntityId": "web.master",
"modelType": "PSDEDRTAB"
//......
}json
{
"dedrtabPages": [
{
"caption": "子应用B分页1同标识替换",
"appViewId": "web.master_child_appb_view4",
"id": "pitem1"
},
{
"caption": "主应用分页1",
"appViewId": "web.master_list_base",
"id": "pitem2"
},
{
"caption": "子应用B分页2",
"appViewId": "web.master_child_appb_view5",
"id": "appb_item1"
}
],
"dataRelationTag": "DataRelation7",
"appDataEntityId": "web.master",
"modelType": "PSDEDRTAB"
//......
}提示
主应用和子应用数据关系部件匹配要求主应用和子应用数据关系部件的应用实体、部件类型和部件标识要保持一致
树部件融合
树部件融合允许不同应用或模块在运行时对树节点和节点关系进行动态组合、关联和调整。该方案支持跨应用的树形数据整合，无需修改各模块的底层逻辑，即可实现树节点的动态插入及关系扩展，适用于复杂层级数据的可视化与管理。
在主应用初始化阶段，子应用将其部件配置（DSL模型）注册到中央管理模块（AppHub）。当视图渲染树部件时，基于AppHub中存储的树部件数据，按预设策略动态组装最终的树结构。融合过程支持对节点的操作，并可扩展节点关系。
融合规则
- 若子应用树节点在主应用树节点集合中不存在（通过树节点标识（id）判断），则附加到主应用树节点集合中；若子应用树节关系在主应用树节点关系集合中不存在（通过树节点关系的父节点标识和子节点标识组合判断），则附加到主应用树节点关系集合中
json
{
"detreeNodeRSs": [
{
"childDETreeNodeId": "node",
"parentAppDEFieldId": "parent_id",
"parentDETreeNodeId": "root",
"parentValueLevel": 1,
"searchMode": 3
},
{
"childDETreeNodeId": "node",
"parentAppDEFieldId": "parent_id",
"parentDETreeNodeId": "node",
"parentValueLevel": 1,
"searchMode": 3
}
],
"detreeNodes": [
{
"text": "默认根节点",
"nodeType": "ROOT",
"treeNodeType": "STATIC",
"hasDETreeNodeRSs": true,
"expanded": true,
"rootNode": true,
"name": "默认根节点",
"id": "root"
},
{
"dataSourceType": "DEDATASET",
"idAppDEFieldId": "id",
"appDEDataSetId": "fetch_default",
"sortDir": "ASC",
"sortAppDEFieldId": "sort",
"textAppDEFieldId": "name",
"navAppViewId": "web.region_info_view",
"nodeType": "node",
"appDataEntityId": "web.region",
"treeNodeType": "DE",
"hasDETreeNodeRSs": true,
"enableQuickSearch": true,
"expanded": true,
"name": "区划",
"id": "node"
}
],
"id": "web.master.tree_ctrl_federation_tree_view"
// ......
}json
{
"detreeNodeRSs": [
{
"childDETreeNodeId": "appc_node",
"parentDETreeNodeId": "root",
"parentValueLevel": 1,
"searchMode": 3,
"name": "默认根节点（ROOT）-子应用C追加节点（appc_node）"
}
],
"detreeNodes": [
{
"text": "默认根节点",
"nodeType": "ROOT",
"treeNodeType": "STATIC",
"hasDETreeNodeRSs": true,
"rootNode": true,
"name": "默认根节点",
"id": "root"
},
{
"text": "子应用C追加节点",
"navAppViewId": "web.master_child_appc_view",
"nodeType": "appc_node",
"treeNodeType": "STATIC",
"name": "子应用C追加节点",
"id": "appc_node"
}
],
"id": "web.master.tree_ctrl_federation_tree_view"
// ......
}json
{
"detreeNodeRSs": [
{
"childDETreeNodeId": "node",
"parentAppDEFieldId": "parent_id",
"parentDETreeNodeId": "root",
"parentValueLevel": 1,
"searchMode": 3
},
{
"childDETreeNodeId": "node",
"parentAppDEFieldId": "parent_id",
"parentDETreeNodeId": "node",
"parentValueLevel": 1,
"searchMode": 3
},
{
"childDETreeNodeId": "appc_node",
"parentDETreeNodeId": "root",
"parentValueLevel": 1,
"searchMode": 3,
"name": "默认根节点（ROOT）-子应用C追加节点（appc_node）"
}
],
"detreeNodes": [
{
"text": "默认根节点",
"nodeType": "ROOT",
"treeNodeType": "STATIC",
"hasDETreeNodeRSs": true,
"expanded": true,
"rootNode": true,
"name": "默认根节点",
"id": "root"
},
{
"dataSourceType": "DEDATASET",
"idAppDEFieldId": "id",
"appDEDataSetId": "fetch_default",
"sortDir": "ASC",
"sortAppDEFieldId": "sort",
"textAppDEFieldId": "name",
"navAppViewId": "web.region_info_view",
"nodeType": "node",
"appDataEntityId": "web.region",
"treeNodeType": "DE",
"hasDETreeNodeRSs": true,
"enableQuickSearch": true,
"expanded": true,
"name": "区划",
"id": "node"
},
{
"text": "子应用C追加节点",
"navAppViewId": "web.master_child_appc_view",
"nodeType": "appc_node",
"treeNodeType": "STATIC",
"name": "子应用C追加节点",
"id": "appc_node"
}
],
"id": "web.master.tree_ctrl_federation_tree_view"
// ......
}提示
主应用和子应用树部件匹配要求主应用和子应用树部件的应用实体、部件类型和部件标识要保持一致
界面行为组融合
界面行为组融合允许对界面按钮组件及其关联事件处理逻辑的动态组合，实现跨应用的界面行为协同，无需修改各模块的底层逻辑，即可实现对界面按钮进行扩展，确保不同应用的交互行为能够无缝集成到统一界面体系中。支持对工具栏、表单、表格列、上下文菜单4大场景绑定的界面行为组进行扩展。
在主应用初始化阶段，子应用将其界面行为组配置（DSL模型）注册到中央管理模块（AppHub）。当视图渲染界面按钮时，基于AppHub中存储的界面行为组数据，按预设策略动态组装最终的界面行为组DSL模型。
融合规则
- 将子应用界面行为组成员对象集合附加到主应用界面行为组成员对象集合中
json
{
"appDataEntityId": "web.master",
"uniqueTag": "master__toolbar_actions_federation",
"name": "界面行为组融合（工具栏）",
"id": "toolbar_actions_federation"
// ......
}json
{
"uiactionGroupDetails": [
{
"actionLevel": 100,
"afterItemType": "NONE",
"beforeItemType": "NONE",
"buttonStyle": "DEFAULT",
"caption": "子应用B追加界面行为",
"detailType": "DEUIACTION",
"uiactionId": "open_child_appb_view@master",
"showCaption": true,
"showIcon": true,
"id": "u353552e"
}
],
"appDataEntityId": "web.master",
"uniqueTag": "master__toolbar_actions_federation",
"name": "子应用B界面行为组融合（工具栏）",
"id": "toolbar_actions_federation"
// ......
}json
{
"uiactionGroupDetails": [
{
"actionLevel": 100,
"afterItemType": "NONE",
"beforeItemType": "NONE",
"buttonStyle": "DEFAULT",
"caption": "子应用B追加界面行为",
"detailType": "DEUIACTION",
"uiactionId": "open_child_appb_view@master",
"showCaption": true,
"showIcon": true,
"id": "u353552e"
}
],
"appDataEntityId": "web.master",
"uniqueTag": "master__toolbar_actions_federation",
"name": "界面行为组融合（工具栏）",
"id": "toolbar_actions_federation"
// ......
}提示
主应用和子应用界面行为组匹配要求主应用和子应用界面行为组的应用实体、界面行为组标识要保持一致
表单融合
表单融合允许跨应用、模块的表单进行动态关联、组合与调整。该方案无需修改各模块的底层逻辑，即可支持异构系统的表单无缝整合，适用于多业务域的数据协作场景。
在主应用初始化阶段，子应用将其部件配置（DSL模型）注册到中央管理模块（AppHub）。当视图渲染表单时，基于AppHub中存储的表单数据，按预设策略动态组装最终的结构，融合过程支持对表单成员的替换、附加至指定位置。
融合规则
- 递归子应用表单结构、根据子应用表单成员的用户标记执行附加或者替换操作，表单成员用户标记格式如：dynamic_overlay:position:targetfield，dynamic_overlay为表单动态融合固定标记，position的可选值包含before（附加至目标之前）、after（附加至目标之后）、inside（附加至目标内部）、replace（替换目标），targetfield表示主应用表单成员标识
json
{
"deformPages": [
{
"deformDetails": [
{
"deformDetails": [
{
"dataType": 25,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "name",
"allowEmpty": true,
"caption": "名称",
"codeName": "name",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "name"
},
{
"dataType": 25,
"enableCond": 3,
"ignoreInput": 3,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "status",
"allowEmpty": true,
"convertToCodeItemText": true,
"caption": "状态",
"codeName": "status",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "status"
},
{
"dataType": 6,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "quantity",
"allowEmpty": true,
"caption": "数量",
"codeName": "quantity",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "quantity"
},
{
"dataType": 25,
"enableCond": 3,
"itemHeight": 200,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "description",
"allowEmpty": true,
"caption": "描述",
"codeName": "description",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "description"
}
],
"caption": "默认分组",
"codeName": "group1",
"detailStyle": "DEFAULT",
"detailType": "GROUPPANEL",
"id": "group1"
}
],
"caption": "基本信息",
"codeName": "formpage1",
"detailStyle": "DEFAULT",
"detailType": "FORMPAGE",
"id": "formpage1"
}
],
"id": "web.master.ctrl_federation"
// ......
}json
{
"deformPages": [
{
"deformDetails": [
{
"deformDetails": [
{
"dataType": 25,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 200,
"noPrivDisplayMode": 1,
"allowEmpty": true,
"caption": "子应用B附加至描述前",
"codeName": "before_description",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"userTag": "dynamic_overlay:before:description",
"id": "before_description"
},
{
"dataType": 25,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 200,
"noPrivDisplayMode": 1,
"allowEmpty": true,
"caption": "子应用B替换状态",
"codeName": "replace_status",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"userTag": "dynamic_overlay:replace:status",
"id": "replace_status"
},
{
"dataType": 25,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 200,
"noPrivDisplayMode": 1,
"allowEmpty": true,
"caption": "子应用B附加至默认分组内部",
"codeName": "inside_group1",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"userTag": "dynamic_overlay:inside:group1",
"id": "inside_group1"
}
],
"caption": "主数据基本信息",
"codeName": "group1",
"detailStyle": "DEFAULT",
"detailType": "GROUPPANEL",
"showCaption": true,
"id": "group1"
}
],
"caption": "基本信息",
"codeName": "formpage1",
"detailStyle": "DEFAULT",
"detailType": "FORMPAGE",
"id": "formpage1"
},
{
"deformDetails": [
{
"deformDetails": [
{
"dataType": 25,
"enableCond": 3,
"ignoreInput": 3,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "create_man",
"caption": "创建人",
"codeName": "create_man",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "create_man"
}
],
"caption": "操作信息",
"codeName": "group2",
"detailStyle": "DEFAULT",
"detailType": "GROUPPANEL",
"showCaption": true,
"id": "group2"
}
],
"caption": "子应用B附加分页",
"codeName": "formpage2",
"detailStyle": "DEFAULT",
"detailType": "FORMPAGE",
"userTag": "dynamic_overlay:after:formpage1",
"id": "formpage2"
}
],
"id": "web.master.ctrl_federation"
// ......
}json
{
"deformPages": [
{
"deformDetails": [
{
"deformDetails": [
{
"dataType": 25,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "name",
"allowEmpty": true,
"caption": "名称",
"codeName": "name",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "name"
},
{
"dataType": 25,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 200,
"noPrivDisplayMode": 1,
"allowEmpty": true,
"caption": "子应用B替换状态",
"codeName": "replace_status",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"userTag": "dynamic_overlay:replace:status",
"id": "replace_status"
},
{
"dataType": 6,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "quantity",
"allowEmpty": true,
"caption": "数量",
"codeName": "quantity",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "quantity"
},
{
"dataType": 25,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 200,
"noPrivDisplayMode": 1,
"allowEmpty": true,
"caption": "子应用B附加至描述前",
"codeName": "before_description",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"userTag": "dynamic_overlay:before:description",
"id": "before_description"
},
{
"dataType": 25,
"enableCond": 3,
"itemHeight": 200,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "description",
"allowEmpty": true,
"caption": "描述",
"codeName": "description",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "description"
},
{
"dataType": 25,
"enableCond": 3,
"labelPos": "LEFT",
"labelWidth": 200,
"noPrivDisplayMode": 1,
"allowEmpty": true,
"caption": "子应用B附加至默认分组内部",
"codeName": "inside_group1",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"userTag": "dynamic_overlay:inside:group1",
"id": "inside_group1"
}
],
"caption": "默认分组",
"codeName": "group1",
"detailStyle": "DEFAULT",
"detailType": "GROUPPANEL",
"id": "group1"
}
],
"caption": "基本信息",
"codeName": "formpage1",
"detailStyle": "DEFAULT",
"detailType": "FORMPAGE",
"id": "formpage1"
},
{
"deformDetails": [
{
"deformDetails": [
{
"dataType": 25,
"enableCond": 3,
"ignoreInput": 3,
"labelPos": "LEFT",
"labelWidth": 130,
"noPrivDisplayMode": 1,
"appDEFieldId": "create_man",
"caption": "创建人",
"codeName": "create_man",
"detailStyle": "DEFAULT",
"detailType": "FORMITEM",
"showCaption": true,
"id": "create_man"
}
],
"caption": "操作信息",
"codeName": "group2",
"detailStyle": "DEFAULT",
"detailType": "GROUPPANEL",
"showCaption": true,
"id": "group2"
}
],
"caption": "子应用B附加分页",
"codeName": "formpage2",
"detailStyle": "DEFAULT",
"detailType": "FORMPAGE",
"userTag": "dynamic_overlay:after:formpage1",
"id": "formpage2"
}
],
"id": "web.master.ctrl_federation"
// ......
}提示
主应用和子应用表单匹配要求主应用和子应用表单的应用实体、表单标识要保持一致
插件生态
iBizHUB的插件化设计体现了现代前端工程化的核心理念，该架构通过插件机制实现了业务逻辑与核心框架的解耦，为复杂业务场景提供了优雅的扩展方案。当标准化的模型驱动界面无法满足特定业务需求时，插件体系能够无缝接入定制化的UI组件和业务逻辑，这种设计既保持了框架的规范性，又兼顾了业务的灵活性。
在插件管理方面，iBizHUB采用了比传统代码复用更先进的解决方案。我们观察到业界常见的两种模式都存在明显缺陷：直接拷贝代码会导致严重的代码腐化和维护困境；而npm包依赖则面临着版本地狱和过度依赖的问题。iBizHUB的创新之处在于建立了应用插件机制，产品团队可以按需选择功能模块，这种去中心化的管理模式显著降低了协作复杂度，使各团队能够自主决策而无需相互牵制。
从技术资产沉淀的角度来看，iBizHUB的插件体系构建了一个可持续演进的技术生态。每个业务套件作为独立插件入库后，不仅实现了代码复用，更形成了团队的知识库和技术资产池。这种机制鼓励开发者贡献标准化解决方案，同时为产品团队提供了丰富的可选组件。随着插件数量的增长，整个体系将呈现出网络效应，新项目可以通过组合现有插件快速搭建，大幅提升交付效率。
这种插件化架构最终推动形成了健康的前端开发生态。一方面，框架维护者可以专注于核心稳定性；另一方面，业务开发者能够自由扩展功能。更重要的是，所有参与者都在共同丰富同一个插件生态，避免了重复造轮子的资源浪费。这种模式特别适合中大型企业前端团队，能够有效平衡标准化与定制化、效率与质量的多重诉求。