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隔离切换适配多终端展示微调自适应参数完成标准化页面搭建。