# 使用大纲树管理页面组件
"大纲树"插件是UI引擎页面设计器中的一项核心辅助工具，以树形结构直观展示当前页面中所有组件的层级关系与嵌套结构。通过该插件，用户可以快速定位、选择、编辑或调整组件，大幅提升复杂页面的开发与维护效率。
#### 前提条件
- 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
- 当前页面已完成至少一个组件的添加或布局设计，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
 
#### 查看大纲树
在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532216565.png)，展开当前页面的"大纲树"插件面板。
面板将自动显示当前页面所有组件的层级关系，根节点为页面容器，子节点依次展开。
图1大纲树   
![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500537080.png)
#### 通过拖拽调整组件层级
支持通过拖拽方式调整组件在大纲树中的位置与层级关系。拖拽时，目标节点会通过不同视觉反馈提示可执行的放置动作，确保操作意图清晰。
表1拖拽方式 
| 拖拽动作     | 视觉提示                                                                                                                                                                         | 说明                       |
|:---|:---|:---|
| 作为子节点插入  | 目标节点显示完整蓝色边框。 图2拖拽为子节点（有效） ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500547976.png "点击放大") | 松开鼠标后，拖拽节点将嵌入目标节点内部。     |
| 移至目标节点之前 | 目标节点显示上边框高亮。 图3插入到目标节点前 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500468120.png "点击放大")    | 松开后，拖拽节点将成为目标节点的前一个兄弟节点。 |
| 移至目标节点之后 | 目标节点显示下边框高亮。 图4插入到目标节点后 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532228043.png "点击放大")  | 松开后，拖拽节点将成为目标节点的后一个兄弟节点。 |
   
如果目标节点为非容器型组件（如按钮、文本等），拖拽时将显示红色边框与浅红色背景，表示无法作为父节点接收子节点。
#### 通过大纲树操作组件节点
- 多选组件：按住Ctrl或Command，逐个单击多个节点，可实现多节点批量选中。
  图5批量选中组件   
  ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002518231449.png "点击放大") 
- 隐藏/显示组件：将鼠标悬停在任一节点上，右侧将显示两个操作图标。
  - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500543754.png)：当前组件为显示状态，单击该图标，组件将在画布中暂时隐藏，图标变为![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532388007.png)。
  
  - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532223809.png)：当前组件为隐藏状态，单击该图标，组件将重新显示，图标恢复为![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500547978.png)。
   
- 删除组件：将鼠标悬停在模板节点上，单击右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532384759.png)，该组件将从大纲树和画布中同时移除。
  如果误删除组件，可使用快捷键"Ctrl+Z"或"Command+Z"撤销操作。
  
 
#### 批量操作快捷键
选中一个或多个节点后，可使用以下快捷键高效操作：
表2快捷键 
| 快捷键（Windows/MacOS）               | 操作说明              | 是否支持批量操作 |
|:---|:---|:---|
| Ctrl + 鼠标左键单击 / Command + 鼠标左键单击 | 多选/取消选中节点。        | 否        |
| Ctrl + C / Command + C           | 复制选中节点。           | 是        |
| Ctrl + V / Command + V           | 粘贴节点到当前选中位置。      | 是        |
| Ctrl + X / Command + X           | 剪切节点。             | 是        |
| Ctrl + Z / Command +Z            | 撤销上一步操作。          | 否        |
| Ctrl + Y / Shift + Command + Z   | 恢复撤销的操作。          | 否        |
| Ctrl + S / Command + S           | 保存当前页面结构（Schema）。 | 否        |
| Delete                           | 删除选中节点。           | 是        |
   
#### 调整大纲树面板宽度
当组件嵌套层级较深时，可拖动大纲树面板右侧边框以调整宽度，便于查看完整结构。
1. 将鼠标移至大纲树面板右侧边框。
2. 当鼠标指针变为"双向箭头"且边框变为蓝色时（如[图6]所示），按住鼠标左键左右拖动。
   最大可拖动至约1000px，最小宽度为面板初始打开时的默认宽度。
   图6调整面板宽度   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500468122.png "点击放大")