界面布局
iBizHUB的界面布局通过动态解析布局模型实现,该模型支持通过ModelingIDE进行自定义配置。当未配置布局模型时,系统将自动加载主题包中预置的默认布局模型。布局模型以树形结构的JSON数据格式定义,主包在解析时按照树形结构的层级关系逐级渲染,确保界面布局的准确性和一致性。
布局清单
iBizHUB采用分层布局架构,将界面系统性地划分为两个层级:
- 视图布局 - 处理具体业务视图的页面组织
- 部件布局 - 管理基础组件的排列与交互
这种模块化设计模式能够有效应对日益复杂的前端开发需求,提升界面的可维护性和扩展性。
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 | 移动端树部件布局布局面板 |