文档首页/ 工业数字模型驱动引擎/ 数据建模引擎用户指南/ UI引擎使用指南/ 使用UI引擎的页面设计器开发前端项目/ 了解页面设计器

更新时间：2025-12-30 GMT+08:00

查看PDF

了解页面设计器

什么是页面设计器

页面设计器是一种可视化开发工具，集成于UI引擎中，用于快速创建和编辑前端项目的用户界面。它通过拖拽式操作和所见即所得的设计原则，让用户能够直观地搭建页面布局、配置组件属性，并实现数据绑定和交互逻辑，从而高效生成可直接使用的功能页面。

创建前端项目后，用户可通过页面设计器拖拽组件完成页面布局设计，配置数据与交互逻辑，并最终生成可运行的前端代码或直接部署至项目环境。

接下来，以图文结合的方式，为您系统介绍UI引擎中页面设计器的各核心模块及其功能。

初识页面设计器

创建前端项目后，单击目标项目卡片中的“页面设计器”，即可进入该项目的“页面设计器”页面。

图1 页面设计器

进入“页面设计器”页面后，您可以直观了解页面布局。

图2 初识页面设计器
点击放大

如图2所示，页面设计器主要分为以下几个功能区：

表1 功能模块介绍
模块名称	主要功能
顶部工具栏	提供项目导航、页面管理、锁定/解锁、多终端显示切换、撤销/恢复、预览、出码、发布等操作。
左侧插件栏	提供组件物料、页面层级管理、JS方法配置、状态管理等设计所需的“工具库”。
中心画布区	用于可视化编辑与实时预览页面组件，支持拖拽布局与组件交互。
右侧设置面板	对当前选中组件进行属性设置、样式调整及高级功能配置。
底部节点树	展示从根节点（body）到当前选中组件的层级结构，支持快速切换选择层级。

顶部工具栏

图3 顶部工具栏

顶部工具栏是页面设计器的“操作指挥中心”，自左向右功能说明如下：

表2 顶部工具栏详细介绍
序号	图标	功能名称	功能描述
1		菜单	单击可在新浏览器标签页中打开“前端项目管理”页面。
2	-	项目名称	显示当前项目名称。名称过长时自动截断，鼠标悬停可查看完整名称。
3	-	当前页面名称	单击可打开“页面管理”面板。
4	/	页面锁定/解锁	锁定后仅当前账号可编辑页面；解锁后所有具备项目权限的用户均可编辑。
5		多终端显示切换	单击图标可切换预设终端显示效果。：大屏（≥1200px），适用于1200像素及以上屏幕。：PC端（基本断点），适用于桌面端基本断点。：平板（≤992px），适用于992像素及以下屏幕。：手机横屏（≤768px），适用于768px像素及以下屏幕。：手机竖屏（≤480px），适用于480像素及以下屏幕。单击“宽度像素缩放比例”，可在“画布设置”窗口中自定义画布尺寸、缩放比例或开启“自由布局”（画布切换为网格背景）。
6		撤销	未保存时，支持撤销上一次操作。
7		恢复	恢复上一次撤销的操作。
8		清除屏幕	重置当前页面的schema（页面数据结构），清空画布内容。注意：此操作会同时清除页面状态（state）与自定义JS（JavaScript）代码，请谨慎使用。
9		发布为页面模板	当页面有内容且已保存时，可将当前页面发布为可复用的页面模板。
10		预览	在新标签页中预览当前页面效果。
11		出码	将当前页面及相关数据转换为前端代码并下载至本地。
12		保存	直接单击，保存当前页面数据。未保存时，图标右上角将显示红点提示。单击可设置定时自动保存。
13		发布	直接单击，弹出“项目发布”窗口，执行服务端生成代码、构建并部署操作。单击，显示“查看发布”和“访问项目”选项。查看发布：查看历史发布记录。访问项目：直接跳转至项目运行环境。
14		更多操作	单击后展开隐藏功能。刷新画布：解决画布卡顿或显示异常问题。切换全屏：全屏显示设计界面，减少外界干扰，专注设计。

左侧插件栏

左侧插件栏是页面设计器的“工具资源库”，聚合了页面设计全流程所需的各类组件、管理工具及配置入口。单击任一插件图标，即可在右侧展开对应的功能面板，方便您快速调用所需工具。

图4 左侧插件栏

各插件具体功能如下：

表3 左侧插件栏
图标	插件名称	插件描述
	物料	提供丰富的可拖拽UI组件库，支持快速搭建页面布局与结构。
	大纲树	以树形结构清晰展示页面内所有组件的层级关系，便于快速定位与选择组件。
	页面	管理当前项目中的页面，支持新建、重命名、删除页面，也可调整页面顺序及设置默认首页。
	资源管理	提供工具类方法管理功能，支持自定义函数编写和npm包引用，实现代码复用。轻松添加公共函数或第三方库，供项目内全局调用，提升开发效率。
	页面JS	编写和管理页面级的JavaScript代码，用于实现自定义逻辑与交互。
	状态管理	对响应式变量（state）进行集中管理，支持添加、删除、搜索、编辑等操作，确保数据一致性与高效维护。
	自定义组件（库）	导入或管理用户自行开发的组件，支持组件复用与团队协作。
	页面Schema	查看和编辑当前页面的结构描述（JSON Schema），适用于高级配置。
	帮助	供UI引擎使用手册的文档链接，便于随时查阅操作指引。

中心画布区

中心画布区是页面设计器进行可视化编辑的核心操作区域，位于设计器界面中央。它是构建和调整页面布局的主要场所，支持多种高效操作方式，帮助用户快速完成页面设计。

图5 中心画布区

基本操作：
- 组件拖拽：从左侧插件栏的物料面板中，将所需组件拖拽至中心画布，快速搭建页面布局。
- 组件编辑：单击画布中的任意组件即可选中，随后可在右侧设置面板中修改该组件的属性、样式以及绑定事件等配置。
- 实时预览：所有对组件的修改都会实时反映在画布中，用户可以直观地查看设计效果并进行调整。
右键快捷操作：选中画布中的组件后，右键单击可唤出快捷菜单，快速实现组件管理与配置功能。
图6 右键菜单
- 修改属性：自动定位至右侧“属性”设置面板，并短时高亮面板边框，便于快速找到配置区域。
- 插入节点：提供了向前、中间、向后三种插入方式。插入的具体位置可通过左侧“大纲树”插件面板查看和确认，确保节点结构清晰明了。
  - 向前：在当前组件前插入兄弟节点。
  - 中间：为当前组件插入子节点，部分组件因结构限制不支持。
  - 向后：在当前组件后插入兄弟节点。
- 删除组件：直接删除当前选中组件，操作无二次确认，请谨慎执行。
- 复制组件：在当前组件下方生成完全副本，副本将继承原组件的所有属性、样式及事件配置。
- 绑定事件：自动定位至右侧“高级”设置面板，并短时高亮面板边框，快速进入事件绑定流程。

批量操作：

长按对应快捷键（Windows系统按Ctrl，MacOS系统按Command）并配合鼠标左键单击，可选中多个组件节点，实现批量复制、粘贴、删除及移动等操作。批量操作需搭配以下快捷键执行：

表4 批量操作快捷键
功能	MacOS系统	Windows
复制	Command + C	Ctrl + C
粘贴	Command + V	Ctrl + V
删除	Delete	Delete
保存	Command + S	Ctrl + S
剪切	Command + X	Ctrl + X
撤销	Command + Z	Ctrl + Z
重做	Shift + Command + Z	Ctrl + Y
多选	Command + 鼠标左键单击	Ctrl + 鼠标左键单击

您可以通过以下方式在中心画布中进行操作：

组件拖拽：从左侧插件栏的物料面板中拖拽所需组件至中心画布，快速完成页面布局搭建。
组件编辑：单击画布中的任意组件即可选中，随后可在右侧设置面板中修改该组件的属性、样式以及绑定事件等配置。
实时预览：所有对组件的修改都会实时反映在画布中，帮助用户直观地查看设计效果并进行调整。

右侧设置面板

右侧设置面板是页面设计器中用于精细化配置组件的核心区域，主要分为属性设置、样式设置和高级设置三个子面板，可满足从基础到进阶的各类配置需求。单击任一设置图标，即可在左侧展开对应的功能面板。

图7 右侧设置面板

表5 右侧设置面板
图标	插件名称	插件描述
	属性	配置组件的基础功能参数，配置项随组件类型（如按钮、输入框）动态适配。例如：按钮组件可配置“大小（size）”、“类型（type）”、“按钮文字”，输入框组件可配置“类型（type）”、“占位文本（placeholder）”、“尺寸（size）”等，直接决定组件的核心功能表现。
	样式	调整组件的外观样式，既支持通过可视化方式直接设置样式，也支持编写CSS代码实现更灵活、精细的样式控制。
	高级	提供更深层的组件逻辑与渲染控制，包括设置组件是否渲染、绑定交互事件（如点击）、配置循环渲染等高级功能。