Skip to main content

平台页面

平台页面是应用面向用户的前端展示单元，通过可视化布局器（LayoutEditor）拖拽组件、配置数据与交互，即可搭建列表页、详情页、表单页、仪表盘等业务界面。

概述​

在 开发中心 → 应用管理 → 进入应用工作区 → 平台页面 中可以管理该应用下的所有页面。页面属于应用，一个应用下可以有多个页面，每个页面由一份布局配置（Layout）和一组全局属性构成。页面通过左侧组件面板拖拽组装，支持布局容器、元数据组件、图表组件、UI 组件与其他组件五大类。

页面管理列表包含以下能力：

操作说明
查看详情以抽屉展示页面的全部属性
编辑修改页面名称、页面标题与描述
复制基于当前页面复制一个全新的页面，包含完整布局
预览在新窗口打开用户态页面进行预览，部分依赖数据 ID 的页面（如详情页）无法正常预览
新增页面填写名称、页面标题、描述后创建，创建成功后自动在新窗口打开布局器

页面列表默认按最近修改时间倒序排列，仅展示当前应用下的页面。

页面数据模型​

一个平台页面在数据层由页面实体与布局组件树两部分组成：

  • 页面实体（MetaPage）：一行页面记录，保存页面名称、标题、描述、容器与间距等全局属性，以及布局配置本身。全局属性的完整字段与存储格式见 页面全局属性。
  • 布局组件树（Layout：WidgetItem[]）：页面的界面由一棵组件树描述，树中的每个节点都是一个 WidgetItem，包含 widgetType（组件类型）、meta（组件属性）、children（子组件）等字段。从左侧组件面板拖拽组件，本质上就是向这棵树插入节点。组件的全部配置都存放在节点的 meta 中，且 meta 的各值统一以字符串形式存储。

页面组件按侧边栏分为布局组件、元数据组件、图表组件、UI 组件与其他组件五大类（清单见下节），每个组件的文档都给出该组件的全部 meta 键与完整的 WidgetItem 存储示例。布局树的字段定义与整体存储结构详见 布局器，可直接用于人工配置或由 AI 辅助生成页面布局。

布局器与页面组装​

点击页面名称进入布局器（LayoutEditor），布局器采用「左侧组件面板 + 中间画布」的结构：

  • 从左侧拖拽组件到画布即可添加组件，支持拖拽排序、嵌套与调整列宽。
  • 选中组件后，通过组件工具栏打开右侧属性抽屉，配置该组件的属性。
  • 关闭「编辑模式」开关即可切换到用户态预览效果。
  • 顶部工具栏提供页面设置、加载模板、菜单配置、授权、预览与保存布局等操作。

详细的布局器操作说明参见 布局器。

组件分类​

布局器支持的组件按侧边栏分类组织，分类与组件清单如下：

分类组件文档
布局组件基础容器（Row）、Tab 容器、Step 容器、分段控制器基础容器、Tab 容器、Step 容器、分段控制器
元数据组件视图、表单、数据详情、数据详情（表单模式）、审批流、审批流操作视图、表单、数据详情、数据详情（表单模式）、审批流、审批流操作
图表组件柱状图、折线图、饼状图、统计计数、进度条、自定义图表柱状图、折线图、饼状图、统计计数、进度条、自定义图表
UI 组件警告提示、分割线、标签、图片、Markdown编辑器、富文本、自定义HTML、自定义React组件、图标警告提示、分割线、标签、图片、Markdown编辑器、富文本、自定义HTML、自定义React组件、图标
其他组件微组件、二维码、评论、功能按钮微组件、二维码、评论、功能按钮
组件单例限制

占位组件、部分布局组件在同一布局中只能放置一次，已在布局中使用的组件在左侧面板中会显示为禁用状态。

页面全局属性​

除了组件自身的属性，页面还拥有一组作用于整个页面的全局属性，例如是否启用页面容器、顶层组件垂直间距、页面内边距、问卷模式等。详见 页面全局属性。

使用场景​

  • 综合业务页面：组合视图、表单、图表、按钮等组件，搭建一体化业务看板。
  • 详情页：以数据详情、审批流、评论等组件展示单条数据的完整信息。
  • 仪表盘：以统计计数、进度条与各类图表呈现关键指标。

下一步​

相关接口​

接口说明
POST /api/MetaPage/GetList分页获取页面列表
POST /api/MetaPage/Create新建页面
POST /api/MetaPage/Edit编辑页面
POST /api/MetaPage/Copy复制页面
POST /api/MetaPage/SaveLayout保存页面布局
GET /api/MetaPage/Get获取页面详情（用户态）
GET /api/MetaPage/GetForDeveloper获取页面详情（开发态）