使用大纲树管理页面组件

前提条件

• 已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。
• 当前页面已完成至少一个组件的添加或布局设计，具体操作请参见为UI引擎前端页面添加物料组件。

查看大纲树

在左侧插件栏中，单击，展开当前页面的“大纲树”插件面板。

面板将自动显示当前页面所有组件的层级关系，根节点为页面容器，子节点依次展开。

图1 大纲树

通过拖拽调整组件层级

支持通过拖拽方式调整组件在大纲树中的位置与层级关系。拖拽时，目标节点会通过不同视觉反馈提示可执行的放置动作，确保操作意图清晰。

表1 拖拽方式

拖拽动作	视觉提示	说明
作为子节点插入	目标节点显示完整蓝色边框。 图2 拖拽为子节点（有效）	松开鼠标后，拖拽节点将嵌入目标节点内部。
移至目标节点之前	目标节点显示上边框高亮。 图3 插入到目标节点前	松开后，拖拽节点将成为目标节点的前一个兄弟节点。
移至目标节点之后	目标节点显示下边框高亮。 图4 插入到目标节点后	松开后，拖拽节点将成为目标节点的后一个兄弟节点。

如果目标节点为非容器型组件（如按钮、文本等），拖拽时将显示红色边框与浅红色背景，表示无法作为父节点接收子节点。

通过大纲树操作组件节点

• 多选组件：按住Ctrl或Command，逐个单击多个节点，可实现多节点批量选中。
  图5 批量选中组件
  
• 隐藏/显示组件：将鼠标悬停在任一节点上，右侧将显示两个操作图标。
  • ：当前组件为显示状态，单击该图标，组件将在画布中暂时隐藏，图标变为。
  • ：当前组件为隐藏状态，单击该图标，组件将重新显示，图标恢复为。
• 删除组件：将鼠标悬停在模板节点上，单击右侧的，该组件将从大纲树和画布中同时移除。

  如果误删除组件，可使用快捷键“Ctrl+Z”或“Command+Z”撤销操作。

批量操作快捷键

选中一个或多个节点后，可使用以下快捷键高效操作：

调整大纲树面板宽度

当组件嵌套层级较深时，可拖动大纲树面板右侧边框以调整宽度，便于查看完整结构。

1. 将鼠标移至大纲树面板右侧边框。
2. 当鼠标指针变为“双向箭头”且边框变为蓝色时（如图6所示），按住鼠标左键左右拖动。

   最大可拖动至约1000px，最小宽度为面板初始打开时的默认宽度。

   图6 调整面板宽度