# 了解页面设计器 #### 什么是页面设计器 页面设计器是一种可视化开发工具，集成于UI引擎中，用于快速创建和编辑前端项目的用户界面。它通过拖拽式操作和所见即所得的设计原则，让用户能够直观地搭建页面布局、配置组件属性，并实现数据绑定和交互逻辑，从而高效生成可直接使用的功能页面。 创建前端项目后，用户可通过页面设计器拖拽组件完成页面布局设计，配置数据与交互逻辑，并最终生成可运行的前端代码或直接部署至项目环境。 接下来，以图文结合的方式，为您系统介绍UI引擎中页面设计器的各核心模块及其功能。 #### 初识页面设计器 创建前端项目后，单击目标项目卡片中的"页面设计器"，即可进入该项目的"页面设计器"页面。 图1页面设计器 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002525466519.png "点击放大") 进入"页面设计器"页面后，您可以直观了解页面布局。 图2初识页面设计器 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002328885728.png "点击放大") 如[图2]所示，页面设计器主要分为以下几个功能区： 表1功能模块介绍 | 模块名称 | 主要功能 | |:---|:---| | [顶部工具栏] | 提供项目导航、页面管理、锁定/解锁、多终端显示切换、撤销/恢复、预览、出码、发布等操作。 | | [左侧插件栏] | 提供组件物料、页面层级管理、JS方法配置、状态管理等设计所需的"工具库"。 | | [中心画布区] | 用于可视化编辑与实时预览页面组件，支持拖拽布局与组件交互。 | | [右侧设置面板] | 对当前选中组件进行属性设置、样式调整及高级功能配置。 | | [底部节点树] | 展示从根节点（body）到当前选中组件的层级结构，支持快速切换选择层级。 | #### 顶部工具栏 图3顶部工具栏 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002363223217.png "点击放大") 顶部工具栏是页面设计器的"操作指挥中心"，自左向右功能说明如下： 表2顶部工具栏详细介绍 | 序号 | 图标 | 功能名称 | 功能描述 | |:---|:---|:---|:---| | 1 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526393655.png "点击放大") | 菜单 | 单击可在新浏览器标签页中打开"前端项目管理"页面。 | | 2 | - | 项目名称 | 显示当前项目名称。名称过长时自动截断，鼠标悬停可查看完整名称。 | | 3 | - | 当前页面名称 | 单击可打开"页面管理"面板。 | | 4 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494441204.png)/![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494441276.png) | 页面锁定/解锁 | 锁定后仅当前账号可编辑页面；解锁后所有具备项目权限的用户均可编辑。 | | 5 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494441390.png "点击放大") | 多终端显示切换 | 单击图标可切换预设终端显示效果。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526713141.png)：大屏（≥1200px），适用于1200像素及以上屏幕。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526593173.png)：PC端（基本断点），适用于桌面端基本断点。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494313530.png)：平板（≤992px），适用于992像素及以下屏幕。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494473492.png)：手机横屏（≤768px），适用于768px像素及以下屏幕。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526713147.png)：手机竖屏（≤480px），适用于480像素及以下屏幕。 单击"宽度像素 缩放比例"，可在"画布设置"窗口中自定义画布尺寸、缩放比例或开启"自由布局"（画布切换为网格背景）。 | | 6 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526703745.png "点击放大") | 撤销 | 未保存时，支持撤销上一次操作。 | | 7 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494304106.png) | 恢复 | 恢复上一次撤销的操作。 | | 8 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526701101.png) | 清除屏幕 | 重置当前页面的schema（页面数据结构），清空画布内容。 注意： 此操作会同时清除页面状态（state）与自定义JS（JavaScript）代码，请谨慎使用。 | | 9 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494461494.png) | 发布为页面模板 | 当页面有内容且已保存时，可将当前页面发布为可复用的页面模板。 | | 10 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526701151.png) | 预览 | 在新标签页中预览当前页面效果。 | | 11 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494461504.png "点击放大") | 出码 | 将当前页面及相关数据转换为前端代码并下载至本地。 | | 12 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494461694.png "点击放大") | 保存 | 直接单击，保存当前页面数据。未保存时，图标右上角将显示红点提示。 单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526712821.png)可设置定时自动保存。 | | 13 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494301732.png "点击放大") | 发布 | 直接单击，弹出"项目发布"窗口，执行服务端生成代码、构建并部署操作。 单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526593177.png)，显示"查看发布"和"访问项目"选项。 - 查看发布：查看历史发布记录。 - 访问项目：直接跳转至项目运行环境。 | | 14 | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494461718.png) | 更多操作 | 单击后展开隐藏功能。 - 刷新画布：解决画布卡顿或显示异常问题。 - 切换全屏：全屏显示设计界面，减少外界干扰，专注设计。 | #### 左侧插件栏 左侧插件栏是页面设计器的"工具资源库"，聚合了页面设计全流程所需的各类组件、管理工具及配置入口。单击任一插件图标，即可在右侧展开对应的功能面板，方便您快速调用所需工具。 图4左侧插件栏 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002329187300.png) 各插件具体功能如下： 表3左侧插件栏 | 图标 | 插件名称 | 插件描述 | |:---|:---|:---| | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002526895415.png) | 物料 | 提供丰富的可拖拽UI组件库，支持快速搭建页面布局与结构。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002495008974.png) | 大纲树 | 以树形结构清晰展示页面内所有组件的层级关系，便于快速定位与选择组件。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002495009000.png) | 页面 | 管理当前项目中的页面，支持新建、重命名、删除页面，也可调整页面顺序及设置默认首页。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002527048835.png) | 资源管理 | 提供工具类方法管理功能，支持自定义函数编写和npm包引用，实现代码复用。轻松添加公共函数或第三方库，供项目内全局调用，提升开发效率。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494849252.png) | 页面JS | 编写和管理页面级的JavaScript代码，用于实现自定义逻辑与交互。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002495009240.png) | 状态管理 | 对响应式变量（state）进行集中管理，支持添加、删除、搜索、编辑等操作，确保数据一致性与高效维护。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002495009370.png) | 自定义组件（库） | 导入或管理用户自行开发的组件，支持组件复用与团队协作。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002527050841.png) | 页面Schema | 查看和编辑当前页面的结构描述（JSON Schema），适用于高级配置。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002495011168.png) | 帮助 | 供UI引擎使用手册的文档链接，便于随时查阅操作指引。 | #### 中心画布区 中心画布区是页面设计器进行可视化编辑的核心操作区域，位于设计器界面中央。它是构建和调整页面布局的主要场所，支持多种高效操作方式，帮助用户快速完成页面设计。 图5中心画布区 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002494956530.png "点击放大") - **基本操作：** - 组件拖拽：从左侧插件栏的物料面板中，将所需组件拖拽至中心画布，快速搭建页面布局。 - 组件编辑：单击画布中的任意组件即可选中，随后可在右侧设置面板中修改该组件的属性、样式以及绑定事件等配置。 - 实时预览：所有对组件的修改都会实时反映在画布中，用户可以直观地查看设计效果并进行调整。 - **右键快捷操作：** 选中画布中的组件后，右键单击可唤出快捷菜单，快速实现组件管理与配置功能。 图6右键菜单 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501862840.png "点击放大") - 修改属性：自动定位至右侧"属性"设置面板，并短时高亮面板边框，便于快速找到配置区域。 - 插入节点：提供了向前、中间、向后三种插入方式。插入的具体位置可通过左侧"大纲树"插件面板查看和确认，确保节点结构清晰明了。 - 向前：在当前组件前插入兄弟节点。 - 中间：为当前组件插入子节点，部分组件因结构限制不支持。 - 向后：在当前组件后插入兄弟节点。 - 删除组件：直接删除当前选中组件，操作无二次确认，请谨慎执行。 - 复制组件：在当前组件下方生成完全副本，副本将继承原组件的所有属性、样式及事件配置。 - 绑定事件：自动定位至右侧"高级"设置面板，并短时高亮面板边框，快速进入事件绑定流程。 - **批量操作：** 长按对应快捷键（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右侧设置面板 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002527543411.png "点击放大") 表5右侧设置面板 | 图标 | 插件名称 | 插件描述 | |:---|:---|:---| | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002495134966.png) | 属性 | 配置组件的基础功能参数，配置项随组件类型（如按钮、输入框）动态适配。例如：按钮组件可配置"大小（size）"、"类型（type）"、"按钮文字"，输入框组件可配置"类型（type）"、"占位文本（placeholder）"、"尺寸（size）"等，直接决定组件的核心功能表现。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002495135124.png) | 样式 | 调整组件的外观样式，既支持通过可视化方式直接设置样式，也支持编写CSS代码实现更灵活、精细的样式控制。 | | ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002495295080.png) | 高级 | 提供更深层的组件逻辑与渲染控制，包括设置组件是否渲染、绑定交互事件（如点击）、配置循环渲染等高级功能。 | #### 底部节点树 图8底部节点树 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002363452301.png "点击放大") 底部节点树用于展示从页面根元素"body"到当前所选节点之间的完整层级关系。通过单击树中的任意节点，可快速切换至对应层级，便于定位和操作页面元素。