跳转到内容

界面布局

iBizHUB的界面布局通过动态解析布局模型实现,该模型支持通过ModelingIDE进行自定义配置。当未配置布局模型时,系统将自动加载主题包中预置的默认布局模型。布局模型以树形结构的JSON数据格式定义,主包在解析时按照树形结构的层级关系逐级渲染,确保界面布局的准确性和一致性。

布局清单

iBizHUB采用分层布局架构,将界面系统性地划分为两个层级:

  1. 视图布局 - 处理具体业务视图的页面组织
  2. 部件布局 - 管理基础组件的排列与交互

这种模块化设计模式能够有效应对日益复杂的前端开发需求,提升界面的可维护性和扩展性。

web端

应用视图布局

文件名说明
app-data-upload-view应用数据导入视图布局面板
app-index-view-layout-blank-mode应用首页视图布局_空白模式
app-index-view-layout-center应用首页视图布局_中间菜单
app-index-view-layout-no-nav应用首页视图布局(无分页)
app-index-view-layout-top-nonav应用首页视图布局_上方菜单(无分页)
app-index-view-layout-top应用首页视图布局_上方菜单
app-index-view-layout应用首页视图布局
app-login-view应用登录视图

实体视图布局

文件名说明
view-layout-model-repository-app-panel-view-layout应用面板视图布局面板布局面板
view-layout-model-repository-de-calendar-exp-view-layout实体数据选择视图(左右关系)布局面板
view-layout-model-repository-de-calendar-view-layout日历导航视图布局面板
view-layout-model-repository-de-chart-exp-view-layout图表导航视图布局面板
view-layout-model-repository-de-chart-view-layout图表视图布局面板
view-layout-model-repository-de-data-view-exp-view-layout实体卡片视图导航视图布局面板
view-layout-model-repository-de-data-view-layout卡片视图布局面
view-layout-model-repository-de-edit-view-2-layout实体编辑视图(左右关系)布局面板布局面板
view-layout-model-repository-de-edit-view-3-layout实体编辑视图(分页关系)布局面板布局面板
view-layout-model-repository-de-edit-view-4-layout实体编辑视图(上下关系)布局面板
view-layout-model-repository-de-edit-view-layout编辑视图布局面板
view-layout-model-repository-de-gantt-view-layout甘特视图布局面板
view-layout-model-repository-de-grid-exp-view-layout表格导航视图布局面板
view-layout-model-repository-de-grid-view-layout表格视图布局
view-layout-model-repository-de-index-pickup-data-view-layout实体索引关系选择数据视图(部件视图)布局面板
view-layout-model-repository-de-index-view-layout实体首页视图布局面板
view-layout-model-repository-de-kanban-view-layout实体看板视图布局面板
view-layout-model-repository-de-list-exp-view-layout实体列表导航视图布局面板
view-layout-model-repository-de-list-view-layout列表视图布局面板
view-layout-model-repository-de-map-view-layout地图视图布局
view-layout-model-repository-de-option-view-layout选项操作视图布局面
view-layout-model-repository-de-panel-view-layout实体面板视图布局面板
view-layout-model-repository-de-pickup-data-view-layout实体选择数据视图布局面板
view-layout-model-repository-de-pickup-grid-view-layout实体选择表格视图布局面板
view-layout-model-repository-de-pickup-tree-view-layout实体选择树视图布局面板
view-layout-model-repository-de-pickup-view-2-layout实体数据选择视图(左右关系)布局面板
view-layout-model-repository-de-pickup-view-layout选择视图布局面板
view-layout-model-repository-de-report-view-layout报表视图布局
view-layout-model-repository-de-tab-exp-view-layout分页导航视图布局面板
view-layout-model-repository-de-tab-search-view-view-layout分页搜索视图布局面板
view-layout-model-repository-de-tree-exp-view-layout实体树导航视图布局面板
view-layout-model-repository-de-tree-grid-ex-view-layout树表格(增强)视图布局面板
view-layout-model-repository-de-tree-grid-view-layout树表格视图布局面板
view-layout-model-repository-de-tree-view-layout树视图布局面板
view-layout-model-repository-de-wizard-view-layout向导视图布局面板
view-layout-model-repository-dem-edit-view-9-layout实体多表单编辑视图(部件视图)布局面板
view-layout-model-repository-dem-pickup-view-2-layout多项选择视图(左右关系)布局面板
view-layout-model-repository-dem-pickup-view-layout多项选择视图布局面板
view-layout-model-repository-dewf-dyna-action-view-layout实体工作流动态操作视图布局面板
view-layout-model-repository-dewf-dyna-edit-view-3-layout实体工作流动态视图(分页关系)布局面板
view-layout-model-repository-dewf-dyna-edit-view-layout实体工作流动态编辑视图布局面板
view-layout-model-repository-dewf-dyna-start-view-layout实体工作流动态启动视图布局面板
view-layout-model-repository-form-pickup-data-view实体表单选择数据视图布局面板

部件布局

文件名说明
control-layout-model-repository-chart-exp-bar-layout图表导航栏布局面板
control-layout-model-repository-data-view-exp-bar-layout卡片导航栏布局面板
control-layout-model-repository-grid-exp-bar-layout表格导航栏布局面板
control-layout-model-repository-list-exp-bar-layout列表导航栏布局面板
control-layout-model-repository-search-form-layout搜索表单布局面板
control-layout-model-repository-tree-exp-bar-layout树导航栏布局面板
control-layout-model-repository-tree-layout树部件布局面板

移动端

应用视图布局

文件名说明
app-index-view-layout移动端首页视图布局面板
app-login-view移动端应用登录视图
app-index-view-layout-blank-mode移动端应用首页视图布局_空白模式
app-wf-step-trace-view-layout应用流程跟踪视图布局面板

实体视图布局

文件名说明
mob-view-layout-model-repository-de-mob-calendar-view-9-layout实体移动端日历视图(部件视图)布局面板布局面板
mob-view-layout-model-repository-de-mob-calendar-view-layout实体移动端日历视图布局面板
mob-view-layout-model-repository-de-mob-chart-view-9-layout实体移动端图表视图(部件视图)布局面板布局面板
mob-view-layout-model-repository-de-mob-chart-view-layout实体移动端图表视图(部件视图)布局面板布局面板
mob-view-layout-model-repository-de-mob-data-view-layout.ts实体移动端卡片视图布局面板
mob-view-layout-model-repository-de-mob-edit-view-3-layout.ts实体移动端编辑视图分页关系布局面板(预置模型)
mob-view-layout-model-repository-de-mob-edit-view-9-layout.ts实体移动端编辑视图(部件视图)布局面板布局面板
mob-view-layout-model-repository-de-mob-edit-view-layout.ts实体移动端编辑视图布局面板
mob-view-layout-model-repository-de-mob-list-view-layout.ts实体移动端列表视图布局面板
mob-view-layout-model-repository-de-mob-m-pickup-view-layout.ts实体移动端多数据选择视图布局面板
mob-view-layout-model-repository-de-mob-md-view-9-layout.ts实体移动端多数据视图(部件视图)布局面板布局面板
mob-view-layout-model-repository-de-mob-md-view-layout.ts实体移动端多数据视图布局面板
mob-view-layout-model-repository-de-mob-option-view-layout.ts实体移动端操作视图布局面板
mob-view-layout-model-repository-de-mob-pickup-md-view-layout.ts实体移动端选择多数据视图(部件视图)布局面板
mob-view-layout-model-repository-de-mob-pickup-tree-view-layout.ts实体移动端选择树视图(部件视图)布局面板
mob-view-layout-model-repository-de-mob-pickup-view-layout.ts实体移动端数据选择视图布局面板
mob-view-layout-model-repository-de-mob-tab-exp-view-9-layout.ts实体移动端分页导航视图(部件视图)布局面板布局面板
mob-view-layout-model-repository-de-mob-tab-exp-view-layout.ts实体移动端分页导航视图布局面板
mob-view-layout-model-repository-de-mob-tree-exp-view-layout.ts 移动端树导航视图布局面板
mob-view-layout-model-repository-de-mob-tree-view-layout.ts实体移动端树视图布局面板
mob-view-layout-model-repository-de-mob-wf-dyna-action-view-layout.ts实体移动端工作流动态操作视图布局面板(预置模型)
mob-view-layout-model-repository-de-mob-wf-dyna-edit-view-3-layout.ts实体移动端工作流动态编辑视图分页关系布局面板(预置模型)
mob-view-layout-model-repository-de-mob-wf-dyna-edit-view-layout.ts实体移动端工作流动态编辑视图布局面板(预置模型)
mob-view-layout-model-repository-de-mob-wf-dyna-start-view-layout.ts实体移动端工作流动态启动视图布局面板(预置模型)
mob-view-layout-model-repository-de-mob-wizard-view-layout.ts实体移动端向导视图布局面板

部件布局

文件名说明
control-layout-model-repository-mob-tree-exp-bar-layout移动端树导航栏布局面板
control-layout-model-repository-mob-tree-layout移动端树部件布局布局面板
未来已来,立即拥抱应用融合的力量
Released under the MIT License.