前言

Geejing WebBuilder 作为国产化企业级低代码快速开发平台，container、panel、fieldset、tab四大布局容器是搭建所有业务页面的基础载体，表单分区、折叠面板、多标签切换、页面分栏等全部页面结构都依赖容器实现。很多刚上手平台的开发、实施人员，常会出现容器嵌套混乱、参数配置零散、布局适配异常、交互功能不会启用等问题，拉长页面搭建耗时。

本文基于官方完整 Demo 源码，从新建页面、各容器分步实操、参数配置、场景搭配、常见踩坑解决五个维度，手把手讲解容器完整使用流程，配套标准可复制代码片段，零基础人员也能快速掌握标准化页面搭建方式，适用于 2026 年各类台账、审批、档案、综合管理页面开发。

一、页面基础结构：根容器 viewport 规范使用

所有页面最外层必须使用viewport作为根容器，是整个画布的顶层载体，决定页面整体基础排版，固定配置layout: "grid1"实现自上而下单列排布，所有标题、容器、输入控件全部嵌套在 viewport 内部，禁止脱离根容器直接放置组件。

标准根页面基础模板（可直接复制新建模块）

({
  cname: "module",
  cid: "demo_layout_module",
  items : [{
    cname: "viewport",
    cid: "viewport1",
    layout: "grid1",
    items : [
      // 页面标题
      {cname: "label",text:"业务页面标题",cls:"w-title3"},
      {cname: "title",title:"页面分区一"},
      // 各类容器依次放置此处
    ]
  }]
})

使用要点：

1. layout:grid1固定单列，保证页面元素垂直有序排列；
2. 页面大标题使用label搭配样式w-title3，分区小标题统一使用title组件；
3. 根容器不配置边框、间距，统一交由内层 container、panel 控制区块样式。

二、基础布局容器 container 实操教程

container是使用频次最高的基础容器，核心用于实现表单分栏、统一管控内部输入框标签样式，适合人事、客户、采购等常规录入表单。

1. 核心配置参数实操说明

1. layout：两种常用值，grid左右双列并排，grid1单列垂直排列；
2. frame:true：开启灰色边框，区分独立业务区块；
3. labelUp：全局控制内部所有输入框标签置顶；
4. labelAlign：统一标签对齐方式，center 居中 /left 居左 /right 居右；
5. labelSeparator：自定义标签与输入框分隔符，传false隐藏分隔线。

2. 实操示例：双栏混合标签配置容器代码

{
  cname: "container",
  cid: "customerFormCt",
  layout: "grid",
  frame: true,
  // 父容器统一全局标签配置，内部控件自动继承
  labelUp: true,
  labelAlign: "center",
  labelSeparator: "-",
  items : [
    // 左侧单列基础信息区块
    {
      cname: "container",
      cid: "baseCt",
      layout: "grid1",
      frame: true,
      items : [
        {cname: "line",title:"客户基础信息"},
        {cname: "text",cid:"cust_name",text:"客户名称"},
        {cname: "number",cid:"sign_money",text:"签约金额"},
        {cname: "date",cid:"sign_date",text:"签约日期"}
      ]
    },
    // 右侧拓展信息，局部覆盖标签配置
    {
      cname: "container",
      cid: "extendCt",
      layout: "grid1",
      frame: true,
      labelAlign: "left",
      items : [
        {cname: "line",title:"对接拓展信息"},
        {cname: "text",cid:"link_man",text:"对接人"},
        {cname: "text",cid:"address",text:"联系地址",labelSeparator:false}
      ]
    }
  ]
}

3. 实操使用步骤

1. 左侧组件库拖拽container至画布 viewport 内，开启 frame 边框；
2. 根据表单字段数量选择 grid 双列或 grid1 单列布局；
3. 在容器外层统一设置 labelUp、labelAlign、分隔符，无需逐个控件修改；
4. 内层可二次嵌套 container 实现左右分栏混合排版；
5. 拖拽 text、number、date 等输入控件放入内层容器，自动继承标签样式。

4. 适用场景与避坑

适用：短、常规录入表单，无折叠、多操作按钮的基础台账页面； 避坑：不要在 container 内直接嵌套 tab、大型 panel，层级过深会造成移动端排版错乱；统一在父容器设置标签参数，禁止每个输入控件单独配置，减少冗余代码。

三、多功能面板 panel 完整实操指南

panel是高级模块化容器，自带折叠、关闭、最大化、工具栏等高阶交互，适合多模块综合管理页面，支持三种折叠模式、上下操作工具栏。

1. 关键属性实操讲解

1. collapsible：开启折叠，true 普通折叠、tree 树形堆叠、accordion 手风琴（同时仅展开一个面板）；
2. closable/maximizable/minimizable：控制关闭、最大化、最小化按钮；
3. tbar：面板顶部工具栏，bbar面板底部操作栏；
4. plainTitle:true：简约无边框卡片样式，用于首页功能模块。

2. 可折叠带底部工具栏标准实操代码

{
  cname: "panel",
  cid: "contractPanel",
  title: "合同台账管理模块",
  layout: "grid1",
  collapsible: true,
  maximizable: true,
  closable: true,
  // 底部操作工具栏
  bbar: {
    cname: "toolbar",
    justify: "end",
    items : [
      {cname:"item",icon:"add1",text:"新增合同"},
      {cname:"item",icon:"print",text:"导出台账"},
      {cname:"item",icon:"delete",text:"批量删除"}
    ]
  },
  items : [
    {
      cname: "container",
      layout: "grid",
      labelUp: true,
      items : [
        {cname:"text",cid:"contract_code",text:"合同编号"},
        {cname:"date",cid:"valid_date",text:"生效日期"}
      ]
    }
  ]
}

3. 手风琴多面板实操场景代码（超长表单分段）

{
  cname: "container",
  layout: "column",
  frame: true,
  items : [
    {
      cname: "panel",
      title: "基础信息",
      collapsible: "accordion",
      flex: 1,
      items : [{cname:"text",text:"姓名"},{cname:"number",text:"薪资"}]
    },
    {
      cname: "panel",
      title: "财务信息",
      collapsible: "accordion",
      flex: 1,
      collapsed: true,
      items : [{cname:"text",text:"银行卡号"}]
    },
    {
      cname: "panel",
      title: "附件资料",
      collapsible: "accordion",
      flex: 1,
      collapsed: true
    }
  ]
}

4. 实操流程

1. 拖拽 panel 放入页面，填写 title 面板标题；
2. 根据业务需求开启折叠、最大化、关闭功能；
3. 需要操作按钮时，新增tbar顶部工具栏或bbar底部栏，配置图标、文字按钮；
4. 面板内部嵌套 container 放置录入控件；
5. 多分组页面统一使用 accordion 手风琴模式，减少页面滚动长度。

四、表单分组 fieldset 实操用法

fieldset是轻量化语义化分组容器，自带标题边框，专门用于表单内逻辑区块划分，支持折叠，渲染性能优于 panel，纯表单分区优先使用。

标准实操代码

{
  cname: "fieldset",
  cid: "finance_group",
  title: "财务预算信息",
  layout: "grid",
  collapsible: true,
  icon: "money",
  items : [
    {cname: "number",cid:"budget_total",text:"预算总额"},
    {cname: "text",cid:"pay_account",text:"付款账户"},
    {cname: "date",cid:"deadline",text:"付款截止日期"}
  ]
}

使用步骤：

1. 在外层 container 内部拖拽 fieldset；
2. 填写 title 区分分组名称（基础信息、财务信息、资质附件）；
3. 开启 collapsible 实现分组折叠；
4. 内部直接放置输入控件，或嵌套 grid 布局 container 实现双列排版。

适用场景：采购单、报销单、立项申报等长表单内逻辑分区，轻量化无多余交互，加载速度更快。

五、多标签 tab 容器实操步骤

tab 容器用于页面内容过多、分板块切换展示，支持上下左右四种标签位置、自动换行、双击全屏、卡片关闭。

常用标准实操代码

{
  cname: "tab",
  cid: "customer_info_tab",
  height: "12em",
  tabPosition: "top",
  wrapTab: true,
  resizable: true,
  items : [
    {cname: "card",title:"基础档案",icon:"user"},
    {cname: "card",title:"历史合同",icon:"file",closable:true},
    {cname: "card",title:"售后记录",icon:"service"}
  ]
}

核心参数实操说明

1. tabPosition：top 顶部（默认）、bottom 底部、left 左侧、right 右侧；
2. wrapTab:true：窄屏、移动端标签自动换行，避免文字挤压溢出；
3. dblclickFull:true：双击标签栏放大面板；
4. 内部子组件固定使用card，每个 card 对应一个标签页面，card 内可自由放置 container、panel、输入控件。

实操流程：

1. 拖拽 tab 容器到画布，设置高度、标签位置；
2. 新增 card 卡片，填写标签标题、图标；
3. 在 card 内部搭建表单、列表、面板等业务内容；
4. 移动端页面务必开启 wrapTab 自动换行，保证手机端正常展示。

六、四大容器组合搭建完整页面实操完整示例

下面一套完整可直接导入平台的模块代码，融合 viewport、container、fieldset、panel、tab 四种容器，复刻真实企业客户档案页面，可直接复制使用：

({
  cname: "module",
  cid: "customer_full_demo",
  items : [{
    cname: "viewport",
    cid: "viewport1",
    layout: "grid1",
    items : [
      {cname: "label",text:"客户档案管理页面",cls:"w-title3"},
      {cname: "title",title:"基础录入区域"},
      {
        cname: "container",
        layout: "grid",
        frame: true,
        labelUp: true,
        labelAlign: "center",
        items : [
          {
            cname: "fieldset",
            title: "客户基础信息",
            layout: "grid1",
            items : [
              {cname:"text",text:"客户名称"},
              {cname:"text",text:"统一社会信用代码"}
            ]
          },
          {
            cname: "fieldset",
            title: "签约财务信息",
            layout: "grid1",
            collapsible: true,
            items : [
              {cname:"number",text:"年度签约金额"},
              {cname:"date",text:"合作起始日期"}
            ]
          }
        ]
      },
      {cname: "title",title:"客户业务台账模块"},
      {
        cname: "panel",
        title: "合同与跟进记录",
        collapsible: true,
        bbar: {
          cname: "toolbar",
          justify: "end",
          items : [{cname:"item",text:"新增跟进记录",icon:"add1"}]
        },
        items : [
          {
            cname: "tab",
            height: "15em",
            wrapTab: true,
            items : [
              {cname:"card",title:"全部合同"},
              {cname:"card",title:"跟进拜访记录"}
            ]
          }
        ]
      }
    ]
  }]
})

七、实操常见问题与解决办法

1. 标签文字左右错乱、对齐不统一 解决：不要单独修改每个输入框 labelAlign，统一在外层父 container 全局配置，局部特殊控件单独覆盖。
2. 移动端页面排版拥挤、横向溢出 解决：container 优先使用 grid1 单列布局，tab 开启 wrapTab 自动换行，减少多层嵌套，嵌套层级控制在 4 层以内。
3. panel、tab 加载缓慢，页面卡顿 解决：非必要关闭 maximizable、minimizable 交互；大数据量 tab 标签切换使用懒加载；基础表单优先使用 fieldset，不滥用重型 panel。
4. 折叠手风琴 panel 同时展开多个 解决：确认 collapsible 参数值为accordion，同一父容器下多个 panel 共用该模式，自动互斥仅展开一个。
5. 标签文字过长被截断 解决：tab 容器配置clipTabText:true自动省略文字，搭配 tabTip 悬浮提示完整标题。

八、实操使用总结

在 WebBuilder 低代码快速开发平台中，容器的规范使用直接决定页面开发效率、界面美观度与多端适配效果。实操遵循分层选型原则：简单表单分区用container+fieldset、多模块交互页面用panel、多板块切换展示用tab，所有页面以viewport为根容器统一规范结构。

实操时优先在外层容器统一管控标签、间距、布局参数，减少重复配置；控制容器嵌套层级避免渲染异常；根据 PC、移动端场景开启自适应、自动换行配套参数。熟练掌握四大容器搭配写法后，常规台账、审批、档案页面搭建时间可压缩 80%，无需手写 CSS、前端布局代码，真正发挥低代码平台快速开发核心优势，适配 2026 年政企、制造、金融各类信创业务系统搭建需求。