如何使用 WebBuilder 低代码快速开发平台布局容器？
WebBuilder 低代码平台所有业务页面布局，均依托viewport（根视图）、container（基础容器）、fieldset（表单分组）、panel（功能面板）、tab（标签页）五大标准化容器实现。遵循「先搭根结构、再分区块、最后放控件」的固定流程，可快速搭建统一、适配性强、符合 2026 信创标准化要求的业务页面，以下是从零到一的完整使用方法。
一、必守基础规则（所有布局通用）
- 唯一根节点：所有页面必须以
viewport为顶层容器，固定layout:grid1单列垂直布局，所有组件、子容器必须嵌套在其内部，禁止组件脱离根容器，避免页面排版错乱。 - 分层嵌套原则：
viewport → 各类容器 → 表单控件/按钮/工具栏，嵌套层级控制在 4 层以内，兼顾渲染性能与页面规整度。 - 样式统一管控：优先在外层父容器统一配置标签对齐、分隔符、布局方式，子组件默认继承样式，仅特殊场景局部覆盖，杜绝页面风格碎片化。
二、五大容器分步使用教程（场景 + 配置 + 实操）
1. viewport 根视图（页面地基，必用）
作为页面唯一顶层载体，仅负责全局流式布局，不做具体业务分区，所有页面通用固定模板，无需自定义样式。核心配置：固定layout:grid1，实现页面垂直有序自适应排列。适用场景：所有台账、审批、档案、管理页面的顶层结构搭建。
2. container 基础容器（高频通用，表单核心）
平台最常用基础布局容器，主打表单分栏、全局样式统一管控，轻量化、渲染性能最优，适配 90% 常规录入页面。核心能力
- 双布局切换：
grid左右双列分栏、grid1单列垂直排版； - 全局标签管控：
labelUp（标签置顶）、labelAlign（居中 / 居左 / 居右）、labelSeparator（自定义 / 隐藏分隔符）； - 支持边框开启、无限轻量化嵌套。
实操用法
- 根视图内拖拽新增 container，开启
frame:true显示区块边框，区分业务分区； - 根据表单字段密度选择布局：字段少用单列、字段多用双列；
- 外层统一设置标签样式，内部文本、日期、数字控件自动继承，特殊控件单独覆盖配置即可。
适用场景：客户信息、签约信息、基础台账、审批表单等纯录入类页面。
3. fieldset 表单分组容器（语义化分区，轻量化首选）
专为表单逻辑分区设计，自带标题边框，支持折叠交互，无多余冗余功能，性能优于 panel，是表单分区最优选择。核心能力：独立区块命名、折叠展开、图标配置、局部样式自定义。
实操用法
- 嵌套在 container 内部，作为二级分区；
- 填写分区标题（如基础信息、财务信息、附件资料）；
- 按需开启
collapsible:true实现区块折叠，精简长表单页面。
适用场景：采购单、报销单、立项申报等多区块长表单分区。
4. panel 功能面板（高阶业务，带交互模块）
多功能高级容器，自带窗口级交互与工具栏能力，是复杂业务模块的核心载体，包含 5 种原生形态。核心形态与用法
- 常规可操作面板：开启折叠、关闭、最大化 / 最小化，适配独立功能模块；
- 工具栏面板：配置
tbar顶部工具栏、bbar底部操作栏，实现新增、导出、删除等批量操作； - 树形折叠面板：
collapsible:"tree"，垂直堆叠展示多级分类、菜单台账； - 手风琴面板：
collapsible:"accordion"，多面板互斥展开，解决长页面滚动冗余问题； - 简约卡片面板：
plainTitle:true，无边框轻量化样式，适配首页数据模块展示。
适用场景：台账管理模块、工作台、监控大屏、复杂业务操作区块。
5. tab 标签页容器（多内容切换，解决页面过载）
用于多板块内容隔离切换，避免页面内容堆砌、层级混乱，适配多终端自适应。核心能力
- 四方位布局：支持顶部 / 底部 / 左侧 / 右侧标签排布；
- 移动端适配：
wrapTab:true实现窄屏标签自动换行； - 高阶配置：支持卡片禁用、Loading 加载、文字溢出省略、双击全屏、悬浮提示。
实操用法
- 拖拽 tab 容器，设置固定高度与标签位置；
- 新增多个
card子卡片，分别命名业务板块（基础档案、合同记录、售后记录）； - 每个卡片内独立搭建表单、表格、面板等内容，按需开启自适应、全屏、换行功能。
适用场景：客户档案、设备台账、多维度详情页、多板块管理页面。
三、2026 官方标准化选型公式（直接套用）
- 简单录入表单、常规分区 →container + fieldset（轻量化、样式统一、性能最优）
- 带操作按钮、折叠、窗口交互的复杂模块 →panel（带工具栏、高阶交互）
- 超长多区块表单 →accordion 手风琴 panel（互斥折叠，精简页面）
- 多详情、多板块切换页面 →tab 标签页（隔离内容，避免页面臃肿）
四、高频避坑注意事项
- 禁止多层深度嵌套，最大嵌套层级不超过 4 层，防止移动端排版错乱、页面卡顿；
- 纯表单分区优先用 fieldset，无需冗余交互时不滥用 panel，减少页面性能损耗；
- 页面样式统一在外层父容器配置，禁止单个控件零散设置，保证全站风格标准化；
- 移动端页面务必开启 tab 自动换行、container 单列布局，避免内容溢出、挤压错乱；
- 手风琴折叠必须统一父容器，确保多面板互斥展开，不会同时开启。
五、快速搭建完整页面流程
- 新建页面，搭建
viewport根结构（固定 grid1 布局）； - 用
container划分页面大区块，统一全局标签样式； - 用
fieldset细化表单内部逻辑分区，精简页面结构； - 复杂功能模块嵌入
panel，配置工具栏、折叠交互； - 多板块内容用
tab隔离切换，适配多终端展示； - 微调自适应参数，完成标准化页面搭建。