管理UI引擎前端页面

约束与限制

将页面发布为模板时，如果开启“保存为共享页面模板”，页面中包含的自定义组件、数据源表单、数据源表格、模板表格、模板表单及搜索模板组件不会随模板一并共享，使用者需在目标项目中重新配置。

前提条件

已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。

设置页面为主页

主页就是整个前端项目的默认入口页面，相当于高代码项目中路径为“/”的根页面。

1. 在左侧插件栏中，单击，展开“页面”插件面板。
2. 找到目标页面，将鼠标悬停在其所在行，单击，选择“设置为主页”。
   

   • 仅一级页面可设置为主页，嵌套在文件夹下的子页面不支持此操作。
   • 页面设置为主页后，不支持取消，仅可通过其他页面替换，或直接删除当前主页。
   图1 设置页面为主页
   

3. 在弹出的提示框中，单击“确定”。

   成功设置为主页的页面，名称右侧会显示。

   图2 主页
   

将页面发布为模板

页面开发完成后，您可一键将当前页面发布为可复用的页面模板。发布后，同一华为账号下的其他IAM用户可在新建页面时直接选用该模板，快速生成结构一致的新页面，避免重复搭建，提升团队低代码协作效率。

此外，具有“管理员”角色的用户，还可自主选择是否将模板公开发布至“UI生态中心”，实现内部私用或平台全域资源共享。

1. 在左侧插件栏中，单击，展开“页面”插件面板。
2. 单击目标页面，进入该页面的设计界面。
3. 单击顶部工具栏的，弹出“发布为页面模板”窗口。
   图3 发布为页面模板
   

4. 在弹出的窗口中，填写以下信息，单击“确定”。

   表1 发布为模板配置信息

   参数名称	参数说明
   页面模板标题	页面模板的标题。 长度不超过36个字符。
   模板描述	页面模板的简要说明，用于介绍模板用途。 长度不超过128个字符。
   模板封面	默认为当前页面的截图，无需手动上传。
   保存为共享页面模板	控制是否将页面模板同步发布至“UI生态中心”，默认关闭。 此配置项仅对“管理员”角色用户可见。 ：页面模板将上传至“UI生态中心”，平台所有用户可见并支持下载。开启前，请务必检查并确认页面模板中不包含密码、密钥、认证凭证等敏感信息。 ：页面模板仅保存在当前项目，不对外共享。 注意：页面模板发布成功后，该共享状态不可修改，请在发布前仔细确认。

修改页面

支持对已创建的页面进行信息修改。

1. 在左侧插件栏中，单击，展开“页面”插件面板。
2. 找到目标页面，将鼠标悬停在其所在行，单击，选择“设置”，展开“页面设置”页面。
   图4 设置页面
   

3. 在展开的“页面设置”页面，根据实际业务需求修改页面的相关信息。
4. 单击“页面设置”右上方的“保存”并关闭页面。

复制页面

可基于现有页面快速创建副本，适用于页面结构复用或版本迭代。

1. 在左侧插件栏中，单击，展开“页面”插件面板。
2. 找到目标页面，将鼠标悬停在其所在行，单击，选择“复制”，展开“页面设置”页面。
   图5 复制页面
   

3. 在展开的“页面设置”页面，根据实际业务需求，设置以下信息，单击“保存”。

   表2 页面设置参数信息

   类型	参数名称	参数说明
   基本设置	页面名称	自定义页面名称。默认为“原页面名称Copy”。 长度限制为3-25个字符。
   	父文件夹	可重新指定归属文件夹，便于分类管理。
   	访问路由	配置页面的访问路由地址，路由默认以“website.com”开头。默认为“原访问路由地址Copy”。 仅允许包含英文字母、数字、下划线（_）、中横线（-）、正斜杠（/），且以英文字母开头。
   	页面模板	可选择其他模板覆盖当前页面结构。
   输入输出	输入配置	继承原页面的入参信息，支持自定义修改。
   	输出配置	继承原页面的向外传递事件，支持自定义修改。
   	设为根元素为Body	继承原页面的根元素配置，支持自定义修改。
   页面生命周期配置	添加页面生命周期	继承原页面的生命周期逻辑，支持自定义修改。

删除页面

支持删除已创建的页面，删除后的页面统一回收至当前项目的页面回收站。更多信息请参见页面回收站。

1. 在左侧插件栏中，单击，展开“页面”插件面板。
2. 找到目标页面，将鼠标悬停在其所在行，单击，选择“删除”。
   图6 删除页面
   

3. 在弹出的提示框中，单击“确定”。

管理已配置的页面生命周期

当已配置的页面生命周期逻辑需要调整或移除时，可通过页面设置进行维护。

1. 在左侧插件栏中，单击，展开“页面”插件面板。
2. 找到目标页面，将鼠标悬停在其所在行，单击，选择“设置”，展开“页面设置”页面。
   图7 设置页面
   

3. 在展开的“页面设置”页面，根据实际业务需求，进行以下操作：
   • 修改函数：单击目标函数行的，在“添加页面生命周期”代码编辑页面调整逻辑，单击“保存”。
   • 删除函数：单击目标函数行的，在弹出的提示框中单击“确定”。

4. 完成操作后，单击“页面设置”右上方的“保存”并关闭页面。

创建文件夹

当页面数量较多时，可通过文件夹对页面进行分组管理，提升项目可维护性。

1. 在左侧插件栏中，单击，展开“页面”插件面板。
2. 在“页面”插件面板中，单击，展开“文件夹设置”页面。
3. 在展开的“文件夹设置”页面，设置如下信息。

   表3 文件夹设置参数信息

   参数名称	参数说明
   文件夹名称	自定义文件夹名称，默认值为“Untitled”。 长度限制为3-25个字符。
   父文件夹	为当前文件夹关联所属父文件夹，支持创建嵌套文件夹。
   文件夹访问路由	配置文件夹的访问路由地址，路由默认以“website.com”开头。 仅允许包含英文字母、数字、下划线（_）、中横线（-）、正斜杠（/），且以英文字母开头。

4. 单击“保存”。

管理文件夹

通过文件夹管理，您可以高效组织复杂应用的页面结构，为团队协作和长期维护奠定良好基础。文件夹创建成功后，您可在“页面”插件面板中执行以下管理操作：

调整顺序与层级

当业务优先级变化或需要重新组织页面结构时，可通过拖拽方式调整页面或文件夹的排列顺序及层级归属，无需重建即可快速适配新的业务逻辑。

1. 在页面列表中，长按鼠标左键选中目标页面或文件夹，保持按住状态并将其拖拽至目标位置。
2. 根据需求将资源放置于以下位置：
   • 同级排序：拖拽至其他同级资源的上方或下方，以调整并列显示顺序。
   • 层级变更：拖拽至某个文件夹节点内部，使其成为该文件夹的子资源。

3. 松开鼠标左键，系统将自动保存新的层级与排序结构。

   当页面或文件夹发生层级变更时，其访问路由将自动更新以确保与最新层级结构保持一致，无需手动修改。

   例如：页面从“parentA”移至“parentB”，其访问路由自动从“website.com/parentA/page”调整为“website.com/parentB/page”。