跳到主要内容

页面全局属性

页面全局属性作用于整个页面,控制页面容器、间距、内边距与问卷样式等外观与行为,与单个组件的属性互相独立。

概述​

在布局器右上角点击 页面设置 打开属性配置抽屉,即可编辑页面的全局属性。这些属性会影响页面在用户态的最终呈现:例如是否自动套用页面容器、顶层组件之间的垂直间距、内容区留白,以及是否启用问卷模式。

页面本身的基础信息(名称、描述)在页面列表的「新建/编辑」弹窗中维护,布局器内的「页面设置」只负责标题、容器、间距、内边距与问卷模式等呈现相关属性。

配置项​

配置项说明
页面标题页面在用户态的显示标题,启用页面容器时作为容器标题
启用页面容器开启后自动引入页面容器样式,单独页面推荐启用;作为子页面嵌入其他页面时不推荐启用
顶层组件垂直间距画布顶层组件之间的垂直间距,取值 0 ~ 30,默认 8
PC端页面内边距页内容区域在 PC 端的内边距,支持 CSS padding 格式,如 10px 20px
移动端页面内边距页内容区域在移动端的内边距,支持 CSS padding 格式
启用问卷模式开启后套用问卷样式,适合独立的问卷类独立页面,嵌入其他页面时不推荐启用
问卷样式问卷模式下的样式风格,当前仅提供「默认风格」

页面容器​

「启用页面容器」开启时,布局器会在页面最外层包裹一层标准页面容器,容器标题取「页面标题」。适用于独立打开的页面,可保证与系统其他页面一致的标题栏与留白。当该页面作为子页面(如推屏、被其他页面引用)使用时,建议关闭,避免出现双层容器。

问卷模式​

「启用问卷模式」用于问卷类业务,开启后会在页面外层套用问卷样式(questionnaire-style-{问卷样式}),使内容居中并限制宽度,更接近问卷的阅读体验。「问卷样式」用于选择具体风格,当前枚举仅包含默认风格,后续可扩展。

下一步​

  • 布局器 - 配置页面布局与组件
  • 页面 - 返回平台页面总览

属性明细​

以下内容面向技术实现与 AI 检索,说明页面全局属性与 Layout 布局树的类型、含义、嵌套规则与存储格式。

全局属性表​

属性名类型含义取值/存储值
Namestring页面名称,必填列表与布局器中展示的名称
Titlestring页面标题启用容器时作为容器标题
Descriptionstring页面描述纯文本,可为空
EnableContainerint是否启用页面容器1 启用(默认),0 关闭
RowSpaceint顶层组件垂直间距(px)取值范围 0 ~ 30,默认 8
EnableQuestionnaireModeint是否启用问卷模式1 启用,0 关闭(默认)
QuestionnaireStyleint问卷样式0 默认风格
Properties.CustomContainerStylePCstring自定义 PC 端页面容器样式CSS 样式字符串(可带或不带花括号),如 padding: 16px 24px; background: #fafafa;
Properties.CustomContainerStyleMobilestring自定义移动端页面容器样式CSS 样式字符串(可带或不带花括号),如 padding: 8px;
LayoutWidgetItem[]页面布局配置组件树数组,JSON 序列化存储(详见下文)
IsQuickInitializationbool是否通过快速初始化创建true / false
QuickInitializeMetaObjectIdstring(GUID)快速初始化所属对象关联的实体对象 ID
SharePermissionUserIdsstring共享权限的用户 ID多个用户 ID 以 , 分隔

通用实体属性​

页面继承自 AppEntityBase,同时具备以下通用属性:

属性名类型含义
AppIdstring(GUID)所属应用 ID
Customizedbool是否被自定义过
CustomCreatedbool是否由用户自定义创建
IsDeletedbool是否已删除(逻辑删除)
CreatedBy / CreatedTimestring / datetime创建人 / 创建时间
ModifiedBy / ModifiedTimestring / datetime修改人 / 修改时间

布局节点结构(WidgetItem)​

Layout 是页面布局树的根,类型为 WidgetItem[](顶层为数组,而非单个对象)。布局由容器(行、列、Tab、Step、分段)与业务组件共同组成,每个节点的字段固定如下:

属性名类型含义取值/存储值
idstring(GUID)节点唯一标识随机 GUID,拖拽 / 复制 / 拆分列时重新生成;同一布局内不重复
uidstring(GUID)组件固定标识按组件类型写死的 GUID,一经确定不再修改;同一布局内可能重复
dragTypestring拖拽分类侧边栏拖拽期间非真实类型;落位后归一为 originalType
originalTypestring原始分类组件真实分类:Row / Column / Widget
widgetTypestring部件类型取值见 WidgetType 枚举,如 Row、Column、Tab、MetaView、ChartBar
widgetTypeNamestring部件名称本地化展示名称
metaRecord<string, string> | null组件属性键值对,所有值以字符串存储(数值存 "5"、"12",布尔存 "true" / "false")
childrenWidgetItem[]子节点仅容器类组件使用

字段语义要点:

  • id 用于节点定位,以及上移 / 下移 / 复制 / 移除 / 拆分列等操作;每次拖拽或复制都会重新生成(复制时通过 regenerateIds 为整棵子树生成新 id)。
  • uid 是组件类型级常量,无论拖拽多少次都不变,用于判断某组件是否已被使用。
  • dragType 表示拖拽箱分类:业务组件统一为 Widget,基础容器为 Row,布局列为 Column;从侧边栏拖入画布时数据先以侧边栏形态存在,落位后由 sidebarMetaToWidgetItem 令 dragType = originalType。
  • originalType 是组件真实分类,画布内拖动时以此为准(DragContainer 取 originalType ?? dragType)。
  • meta 中未配置的键可省略,读取方需自行提供默认值(如列 LayoutType 默认 vertical、ItemSpace 默认 5)。

布局嵌套规则​

父节点允许的子节点依据
页面根 LayoutRowCONTAINER_ACCEPT_RULES.root = ["Row"],顶层只接受基础容器
RowColumn一行由若干列组成,列数范围 1 ~ ROW_MAX_COLUMNS(6)
Column任意组件(Row 或 Widget 分类)CONTAINER_ACCEPT_RULES.column = ["Row", "Widget"],可继续嵌套容器
Tab / Step / SegmentedColumn每个子列即一个页签 / 步骤 / 分段,列 meta.Title 为标题

存储示例(system_metapage)​

页面数据存储在数据表 system_metapage 中,Layout 与 Properties 均以 JSON 字符串形式存储。下面是一个完整的多级布局示例:顶层为「基础容器(Row)」,其下两列分别放置一个视图组件;随后是「Tab 容器」,其下两个列各带一个页签标题。

{
"_id": "8f0d6f2a-1f5c-4b9c-9a7e-2c3d4e5f6a7b",
"AppId": "9f1c0b2e-2d3a-4e6f-9c11-0f7a5b8d2e10",
"Name": "客户详情",
"Title": "客户详情",
"Description": "展示单个客户的完整信息",
"EnableContainer": 1,
"RowSpace": 8,
"EnableQuestionnaireMode": 0,
"QuestionnaireStyle": 0,
"Properties": {
"CustomContainerStylePC": "padding: 16px 24px; background: #fafafa;",
"CustomContainerStyleMobile": "padding: 8px;"
},
"Layout": [
{
"id": "6c2a2b1a-1000-4a01-8f10-000000000001",
"uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
"dragType": "Row",
"originalType": "Row",
"widgetType": "Row",
"widgetTypeName": "基础容器",
"meta": {
"ColumnSpace": "5",
"ColumnsWidth": "12"
},
"children": [
{
"id": "6c2a2b1a-1000-4a01-8f10-000000000002",
"uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
"dragType": "Column",
"originalType": "Column",
"widgetType": "Column",
"widgetTypeName": "布局列组件",
"meta": {
"LayoutType": "vertical",
"Align": "default",
"ItemSpace": "5"
},
"children": [
{
"id": "6c2a2b1a-1000-4a01-8f10-000000000003",
"uid": "01460a3d-b6c3-45ca-9c5c-ed80416ac1af",
"dragType": "Widget",
"originalType": "Widget",
"widgetType": "MetaView",
"widgetTypeName": "视图",
"meta": {
"MetaViewId": "2f6e0c44-9a1b-4d70-b2c3-5e6f7a8b9c01"
},
"children": []
}
]
},
{
"id": "6c2a2b1a-1000-4a01-8f10-000000000004",
"uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
"dragType": "Column",
"originalType": "Column",
"widgetType": "Column",
"widgetTypeName": "布局列组件",
"meta": {
"LayoutType": "vertical",
"Align": "default",
"ItemSpace": "5"
},
"children": [
{
"id": "6c2a2b1a-1000-4a01-8f10-000000000005",
"uid": "01460a3d-b6c3-45ca-9c5c-ed80416ac1af",
"dragType": "Widget",
"originalType": "Widget",
"widgetType": "MetaView",
"widgetTypeName": "视图",
"meta": {
"MetaViewId": "3a7f1d55-0b2c-4e81-9d40-6f7a8b9c0d12"
},
"children": []
}
]
}
]
},
{
"id": "6c2a2b1a-1000-4a01-8f10-000000000010",
"uid": "f8c226b6-7b98-45a8-8c71-abeb21e2941a",
"dragType": "Widget",
"originalType": "Widget",
"widgetType": "Tab",
"widgetTypeName": "布局Tab页",
"meta": {
"DefaultActiveTab": "6c2a2b1a-1000-4a01-8f10-000000000011"
},
"children": [
{
"id": "6c2a2b1a-1000-4a01-8f10-000000000011",
"uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
"dragType": "Column",
"originalType": "Column",
"widgetType": "Column",
"widgetTypeName": "布局列组件",
"meta": {
"Title": "基本信息",
"LayoutType": "vertical",
"Align": "default",
"ItemSpace": "5"
},
"children": []
},
{
"id": "6c2a2b1a-1000-4a01-8f10-000000000012",
"uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
"dragType": "Column",
"originalType": "Column",
"widgetType": "Column",
"widgetTypeName": "布局列组件",
"meta": {
"Title": "明细",
"LayoutType": "vertical",
"Align": "default",
"ItemSpace": "5"
},
"children": []
}
]
}
],
"IsDeleted": false,
"CreatedBy": "admin",
"CreatedTime": "2026-01-05T09:12:30"
}

相关接口​

接口说明
POST /api/MetaPage/SaveLayout保存页面(含全局属性与布局)
GET /api/MetaPage/GetForDeveloper开发态获取页面全部属性