如何在LowCode Engine中隐藏内置的大纲树面板

在阿里巴巴开源的LowCode Engine低代码引擎项目中，默认会包含一个内置的大纲树插件（Outline Tree），这个功能对于可视化搭建界面非常有用，但有时开发者可能需要根据项目需求隐藏或移除这个面板。本文将详细介绍如何通过代码实现这一需求。

大纲树面板的基本结构

LowCode Engine的界面布局采用区域划分的方式，内置的大纲树面板通常位于两个区域：

1. 左侧区域（leftArea）：主大纲面板
2. 右侧区域（rightArea）：备份大纲面板

这两个面板分别注册在引擎的骨架（skeleton）系统中，我们可以通过骨架系统提供的API来移除它们。

移除大纲树面板的方法

要移除大纲树面板，我们需要在自定义插件中使用骨架系统的remove方法。具体代码如下：

// 移除左侧主大纲面板
skeleton.remove({
  area: 'leftArea',
  name: 'outline-master-pane',
  type: 'PanelDock',
});

// 移除右侧备份大纲面板
skeleton.remove({
  area: 'rightArea',
  name: 'outline-backup-pane',
  type: 'Panel',
});

实现原理分析

1. 骨架系统（Skeleton）：LowCode Engine的UI骨架管理系统，负责管理所有可视化组件的布局和显示状态。

2. remove方法参数：

   • area：指定要移除的面板所在的区域
   • name：面板的唯一标识名称
   • type：面板的类型，确保准确匹配

3. 面板类型区别：

   • PanelDock：可停靠的面板，通常具有折叠/展开功能
   • Panel：普通面板

实际应用场景

1. 定制化开发：当项目不需要大纲树功能时，可以完全移除以简化界面。

2. 替换为自定义组件：先移除默认组件，再添加自定义实现。

3. 响应式布局：在不同屏幕尺寸下动态调整界面元素。

注意事项

1. 确保代码在引擎初始化完成后执行，通常在插件初始化阶段。

2. 如果只是暂时隐藏而非永久移除，可以考虑使用hide方法替代remove。

3. 移除前确认没有其他功能依赖这些面板。

通过以上方法，开发者可以灵活控制LowCode Engine的界面布局，根据项目需求定制最适合的用户界面。这种灵活的架构设计正是LowCode Engine的强大之处，使得它能够适应各种不同的低代码开发场景。