WebBuilder 布局容器常见应用场景

结合平台标准化开发规范与企业实际业务，对 viewport、container、fieldset、panel、tab 五大布局容器的真实应用场景做统一归纳，所有场景均适配政务、企业、制造、金融低代码项目落地。

一、viewport 根视图（全局唯一场景）

核心场景：所有业务页面顶层结构搭建

作为页面唯一根容器，无独立业务功能，统一承载整页流式布局，适用于台账页、编辑页、详情页、首页、报表页全部页面，是所有布局的基础前置结构。

二、container 基础容器（高频通用场景）

主打表单排版、样式统一、分栏布局，是使用最多的容器

1. 各类新增 / 编辑 / 审批表单页面（客户、人员、合同、物资）
2. 简单台账查询条件分区、筛选栏布局
3. 页面规整双列 / 单列自适应排版
4. 全站统一标签样式、统一间距、统一对齐标准化管控

三、fieldset 表单分组容器（轻量化分区场景）

主打纯表单逻辑区块划分，轻量无冗余交互

1. 长表单多分区拆分：基础信息、财务信息、资质信息、附件信息
2. 申报类、报销类、立项类分层表单页面
3. 无需按钮、无需工具栏的静态表单分区
4. 轻量化展示页面，提升加载速度、适配低配信创终端

四、panel 功能面板（复杂业务模块场景）

主打带交互、带工具栏、带折叠的独立业务模块

1. 系统工作台功能卡片、首页数据展示模块
2. 带新增 / 删除 / 导出按钮的台账功能区块
3. 超长表单手风琴折叠分区（缩短页面长度）
4. 监控大屏分区、统计模块独立容器
5. 可关闭、可最大化的弹窗级业务面板

五、tab 标签页容器（多内容切换场景）

主打内容过多、页面臃肿、多维度信息隔离

1. 档案详情页多板块切换：基础档案、合同记录、跟进记录、售后记录
2. 设备管理：设备信息、维保记录、巡检记录、故障台账
3. 多表单同页展示、分步填报、多维度数据展示
4. 移动端多内容自适应切换，解决页面溢出、滚动过长问题

快速场景选型总结（落地口诀）

• 普通表单排版 → container
• 表单内部分区 → fieldset
• 带操作按钮的功能模块 → panel
• 多内容、多台账切换 → tab
• 所有页面底层架构 → viewport