[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:organization-tree-folder-layout":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 文件夹布局中的组织树\n\n## 这个示例构建了什么\n\n这个示例使用 relation-graph 的 `folder` 布局构建了一个从左到右的组织层级查看器。节点不再是纯文本行，而是被渲染为公司卡片，包含彩色侧边栏、标签 chips，以及一行截断显示的位置文本。\n\n用户可以在图运行时调整展示效果。浮动辅助窗口提供了一个连接线起点偏移滑块、两个用于控制文件夹水平和垂直间距的滑块，以及一个用于设置画布滚轮模式、拖拽模式和导出图片的设置面板。最关键的一点是，这个示例在不改动 relation-graph 底层布局引擎的前提下，把文件夹风格的层级布局转换成了面向业务的组织树。\n\n## 数据是如何组织的\n\n源数据在 `data.ts` 中以嵌套字面量的形式开始。每一项都包含 `id`、`text`、`data` 载荷，以及可选的 `children`，其中 `data` 对象承载了之后由节点插槽渲染的卡片元数据。\n\n在图加载之前，示例会显式地将这棵树拍平成包含 `rootId`、`nodes` 和 `lines` 的 `RGJsonData`。这个预处理发生在 `flattenTreeDat",true,500,1782615388219]