管理UI引擎前端页面

前提条件

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

设置页面为主页

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

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

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

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

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

   图2 主页
   

将页面发布为模板

页面开发完成后，可发布为模板，供同一华为账号下的其他IAM用户直接复用创建新页面，提升团队开发效率。

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

   表1 发布为模板配置信息

   参数名称	参数说明
   页面模板标题	页面模板的标题。 长度不超过36个字符。
   模板描述	页面模板的简要说明，用于介绍模板用途。 长度不超过128个字符。
   模板封面	默认为当前页面的截图，无需手动上传。

修改页面

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

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

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

复制页面

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

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

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

   表2 页面设置参数信息

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

删除页面

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

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

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

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

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

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

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

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

创建与管理文件夹

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

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

   表3 文件夹设置参数信息

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

4. 单击“保存”。

   文件夹创建成功后，您可进行以下管理操作：

   表4 管理文件夹

   操作	操作说明
   删除文件夹	将鼠标悬停在目标文件夹所在行，单击，选择“删除”。 在弹出的提示框中，单击“确定”。 仅支持删除空文件夹。如果文件夹内包含页面或子文件夹，需先清空内容。
   新建子页面	将鼠标悬停在目标文件夹所在行，单击，选择“新建子页面”，即可在该文件夹下快速创建新页面。
   新建子文件夹	将鼠标悬停在目标文件夹所在行，单击，选择“新建子文件夹”，即可创建多层嵌套文件夹。
   修改文件夹信息	将鼠标悬停在目标文件夹所在行，单击，选择“设置”，进入文件夹配置页面修改参数。
   移动页面至指定文件夹	在页面列表中长按目标页面，将其拖拽至目标文件夹上方，松开鼠标即可完成移动。 移动后，页面的访问路由将自动更新为“website.com/文件夹路由/页面路由”，确保路径一致性。

   通过文件夹管理，您可以高效组织复杂应用的页面结构，为团队协作和长期维护奠定良好基础。