tree 大纲树结构

组件树结构导航插件，以树形结构展示页面组件的嵌套关系，支持拖拽排序、显隐切换、快速定位和删除操作。

功能概述

大纲树以页面 Schema 的 children 递归结构为基础，生成可交互的树形视图：

• 根节点为虚拟 body 节点，代表页面本身
• 每个节点显示物料图标和组件名称

树节点结构

大纲树中的每个节点对应页面 Schema 中的一个组件节点：

{
  "id": "abc12345",
  "component": "View",
  "name": "容器",
  "children": [
    {
      "id": "def67890",
      "component": "Text",
      "name": "标题文本"
    }
  ]
}

树显示	来源字段	说明
图标	物料 Meta snippet.icon	从物料服务获取对应组件的图标
名称	component	组件的名称
缩进层级	children 嵌套深度	递归渲染子节点
显隐状态	pageState.nodesStatus[id]	控制画布中组件的条件渲染

交互操作

鼠标悬停

鼠标移入树节点 → 画布中高亮对应组件边框，快速定位组件位置。

拖拽排序

拖拽树节点到目标位置，支持三种放置方式：

放置位置	效果	对应操作
上方（top）	插入到目标节点之前	insertNode(data, 'top')
下方（bottom）	插入到目标节点之后	insertNode(data, 'bottom')
内部（center）	插入为目标节点的子节点	insertNode(data, 'in')

拖拽规则：

• body 根节点不可拖拽
• 放置目标受物料 configure 的嵌套规则约束（allowInsert 校验）
• 拖拽完成后自动选中新位置的节点

显隐切换

点击眼睛图标 → 切换组件在画布中的显示/隐藏状态：

• 隐藏：调用渲染器 setCondition(id, false)，设计态组件不渲染
• 显示：调用渲染器 setCondition(id, true)，设计态组件恢复渲染
• 隐藏组件时自动清除选中状态

删除节点

点击删除图标 → 调用 operateNode({ type: 'delete', id }) 从 Schema 中移除该节点及其子节点，同时清除选中状态。

数据同步

大纲树通过订阅 schemaChange 事件保持与画布同步：

事件	触发时机	处理方式
schemaChange	画布中增删移动节点	重新生成整棵树（排除 changeProps 纯属性变更）
currentSchema 变化	选中节点切换	刷新树数据
面板激活/失活	标签页切换	订阅/取消订阅事件

树数据生成流程

页面 Schema → 深拷贝 → translateChild() 递归添加 show 属性 → 添加虚拟 body 根节点 → 渲染树

translateChild 根据 pageState.nodesStatus 为每个节点设置 show 属性，确保树的显隐状态与画布一致。