# 管理UI引擎前端页面 "页面"插件是页面设计器中的核心管理工具，支持对当前项目下的所有页面和文件夹进行创建、编辑、复制、删除、归类及模板发布等操作，帮助您高效组织和维护前端项目结构。 #### 约束与限制 [将页面发布为模板]时，如果开启"保存为共享页面模板"，页面中包含的自定义组件、数据源表单、数据源表格、模板表格、模板表单及搜索模板组件不会随模板一并共享，使用者需在目标项目中重新配置。 #### 前提条件 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。 #### 设置页面为主页 主页就是整个前端项目的默认入口页面，相当于高代码项目中路径为"/"的根页面。 1. 在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532186775.png)，展开"页面"插件面板。 2. 找到目标页面，将鼠标悬停在其所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532346743.png)，选择"设置为主页"。 ![](https://support.huaweicloud.com/usermanual-idme/public_sys-resources/caution_3.0-zh-cn.png) - 仅一级页面可设置为主页，嵌套在文件夹下的子页面不支持此操作。 - 页面设置为主页后，不支持取消，仅可通过其他页面替换，或直接删除当前主页。 图1设置页面为主页 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532166781.png) 3. 在弹出的提示框中，单击"确定"。 成功设置为主页的页面，名称右侧会显示![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500386858.png)。 图2主页 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532326659.png) #### 将页面发布为模板 页面开发完成后，您可一键将当前页面发布为可复用的页面模板。发布后，同一华为账号下的其他IAM用户可在新建页面时直接选用该模板，快速生成结构一致的新页面，避免重复搭建，提升团队低代码协作效率。 此外，具有"管理员"角色的用户，还可自主选择是否将模板公开发布至"UI生态中心"，实现内部私用或平台全域资源共享。 1. 在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500506700.png)，展开"页面"插件面板。 2. 单击目标页面，进入该页面的设计界面。 3. 单击顶部工具栏的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532336271.png)，弹出"发布为页面模板"窗口。 图3发布为页面模板 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002577949620.png "点击放大") 4. 在弹出的窗口中，填写以下信息，单击"确定"。 表1发布为模板配置信息 | 参数名称 | 参数说明 | |:---|:---| | 页面模板标题 | 页面模板的标题。 长度不超过36个字符。 | | 模板描述 | 页面模板的简要说明，用于介绍模板用途。 长度不超过128个字符。 | | 模板封面 | 默认为当前页面的截图，无需手动上传。 | | 保存为共享页面模板 | 控制是否将页面模板同步发布至"UI生态中心"，默认关闭。 此配置项仅对"管理员"角色用户可见。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002608309143.png "点击放大")：页面模板将上传至"UI生态中心"，平台所有用户可见并支持下载。**开启前，请务必检查并确认页面模板中不包含密码、密钥、认证凭证等敏感信息。** - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002577949198.png "点击放大")：页面模板仅保存在当前项目，不对外共享。 **注意：页面模板发布成功后，** **该共享状态** **不可修改，请在发布前仔细确认。** | #### 修改页面 支持对已创建的页面进行信息修改。 1. 在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532326005.png)，展开"页面"插件面板。 2. 找到目标页面，将鼠标悬停在其所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532157147.png)，选择"设置"，展开"页面设置"页面。 图4设置页面 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532160175.png) 3. 在展开的"页面设置"页面，根据实际业务需求修改页面的相关信息。 4. 单击"页面设置"右上方的"保存"并关闭页面。 #### 复制页面 可基于现有页面快速创建副本，适用于页面结构复用或版本迭代。 1. 在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500506702.png)，展开"页面"插件面板。 2. 找到目标页面，将鼠标悬停在其所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532346745.png)，选择"复制"，展开"页面设置"页面。 图5复制页面 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500386860.png) 3. 在展开的"页面设置"页面，根据实际业务需求，设置以下信息，单击"保存"。 表2页面设置参数信息 | 类型 | 参数名称 | 参数说明 | |:---|:---|:---| | 基本设置 | 页面名称 | 自定义页面名称。默认为"原页面名称Copy"。 长度限制为3-25个字符。 | | 基本设置 | 父文件夹 | 可重新指定归属文件夹，便于分类管理。 | | 基本设置 | 访问路由 | 配置页面的访问路由地址，路由默认以"website.com"开头。默认为"原访问路由地址Copy"。 仅允许包含英文字母、数字、下划线（_）、中横线（-）、正斜杠（/），且以英文字母开头。 | | 基本设置 | 页面模板 | 可选择其他模板覆盖当前页面结构。 | | 输入输出 | 输入配置 | 继承原页面的入参信息，支持自定义修改。 | | 输入输出 | 输出配置 | 继承原页面的向外传递事件，支持自定义修改。 | | 输入输出 | 设为根元素为Body | 继承原页面的根元素配置，支持自定义修改。 | | 页面生命周期配置 | 添加页面生命周期 | 继承原页面的生命周期逻辑，支持自定义修改。 | #### 删除页面 支持删除已创建的页面，删除后的页面统一回收至当前项目的页面回收站。更多信息请参见[页面回收站](https://support.huaweicloud.com/usermanual-idme/idme_ui_0113.html#ZH-CN_TOPIC_0000002485204912__section186001064415)。 1. 在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500445962.png)，展开"页面"插件面板。 2. 找到目标页面，将鼠标悬停在其所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532166041.png)，选择"删除"。 图6删除页面 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500326120.png) 3. 在弹出的提示框中，单击"确定"。 #### 管理已配置的页面生命周期 当已配置的页面生命周期逻辑需要调整或移除时，可通过页面设置进行维护。 1. 在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532359511.png)，展开"页面"插件面板。 2. 找到目标页面，将鼠标悬停在其所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532199529.png)，选择"设置"，展开"页面设置"页面。 图7设置页面 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500399616.png) 3. 在展开的"页面设置"页面，根据实际业务需求，进行以下操作： - 修改函数：单击目标函数行的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532359637.png)，在"添加页面生命周期"代码编辑页面调整逻辑，单击"保存"。 - 删除函数：单击目标函数行的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532359667.png)，在弹出的提示框中单击"确定"。 4. 完成操作后，单击"页面设置"右上方的"保存"并关闭页面。 #### 创建文件夹 当页面数量较多时，可通过文件夹对页面进行分组管理，提升项目可维护性。 1. 在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532375261.png)，展开"页面"插件面板。 2. 在"页面"插件面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532215289.png)，展开"文件夹设置"页面。 3. 在展开的"文件夹设置"页面，设置如下信息。 表3文件夹设置参数信息 | 参数名称 | 参数说明 | |:---|:---| | 文件夹名称 | 自定义文件夹名称，默认值为"Untitled"。 长度限制为3-25个字符。 | | 父文件夹 | 为当前文件夹关联所属父文件夹，支持创建嵌套文件夹。 | | 文件夹访问路由 | 配置文件夹的访问路由地址，路由默认以"website.com"开头。 仅允许包含英文字母、数字、下划线（_）、中横线（-）、正斜杠（/），且以英文字母开头。 | 4. 单击"保存"。 #### 管理文件夹 通过文件夹管理，您可以高效组织复杂应用的页面结构，为团队协作和长期维护奠定良好基础。文件夹创建成功后，您可在"页面"插件面板中执行以下管理操作： 表4管理文件夹 | 操作 | 操作说明 | 注意事项/限制 | |:---|:---|:---| | 删除文件夹 | 1. 将鼠标悬停在目标文件夹所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002611828409.png)，选择"删除"。 2. 在弹出的提示框中，单击"确定"。 仅支持删除空文件夹。如果文件夹内包含页面或子文件夹，需先清空内容。 | 仅支持删除空文件夹。 如果文件夹内包含页面或子文件夹，需先清空其内部所有子节点后方可删除。 | | 新建子页面 | 将鼠标悬停在目标文件夹所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002581428566.png)，选择"新建子页面"，即可在该文件夹下快速创建新页面。 | - | | 新建子文件夹 | 将鼠标悬停在目标文件夹所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002581268660.png)，选择"新建子文件夹"，即可创建多层嵌套文件夹。 | - 支持创建多层嵌套文件夹，用于更细致的逻辑分组。 - 创建时需遵守最大5层深度的层级限制。 | | 修改文件夹信息 | 将鼠标悬停在目标文件夹所在行，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002611748517.png)，选择"设置"，进入文件夹配置页面修改参数。 | - | #### 调整顺序与层级 当业务优先级变化或需要重新组织页面结构时，可通过拖拽方式调整页面或文件夹的排列顺序及层级归属，无需重建即可快速适配新的业务逻辑。 1. 在页面列表中，长按鼠标左键选中目标页面或文件夹，保持按住状态并将其拖拽至目标位置。 2. 根据需求将资源放置于以下位置： - 同级排序：拖拽至其他同级资源的上方或下方，以调整并列显示顺序。 - 层级变更：拖拽至某个文件夹节点内部，使其成为该文件夹的子资源。 3. 松开鼠标左键，系统将自动保存新的层级与排序结构。 当页面或文件夹发生层级变更时，其访问路由将自动更新以确保与最新层级结构保持一致，无需手动修改。 例如：页面从"parentA"移至"parentB"，其访问路由自动从"website.com/parentA/page"调整为"website.com/parentB/page"。