布局配置

布局由 LayoutConfig 控制。spaceX 和 spaceY 必填，其余配置按业务需要启用。

interface LayoutConfig {
  spaceX: number
  spaceY: number
  nodeSize?: NodeSize | ((item: DataSource) => NodeSize)
  fieldMap?: FieldMap
  transformChildren?: TransformChildrenFn
  isLeaf?: IsLeafFn
}

布局方向

direction 位于 OrgTreeConfig 顶层：

const sdk = new OrgTreeCore({
  el: '#tree',
  direction: 'down',
  layout: { spaceX: 32, spaceY: 56 },
  data,
})

值	效果	常见用途
down	从上向下展开	标准组织架构、岗位层级
right	从左向右展开	层级较深、同级节点较少的关系树

默认方向是 down。

运行时切换方向需要同时更新方向和重新加载布局：

sdk.setDirection('right')
await sdk.loadData()

节点间距

• spaceX：横向布局轴上的间距。
• spaceY：纵向布局轴上的间距。

方向不同，间距会由对应布局算法解释。调试时建议先使用 spaceX: 32、spaceY: 56，再根据卡片密度逐步调整。

layout: {
  spaceX: 32,
  spaceY: 56,
}

固定节点尺寸

默认节点尺寸为 221 × 90。业务卡片使用统一尺寸时显式配置更容易维护：

layout: {
  spaceX: 32,
  spaceY: 56,
  nodeSize: { width: 220, height: 88 },
}

CSS 必须使用相同尺寸，并建议设置 box-sizing: border-box，避免边框把真实尺寸撑大。

动态节点尺寸

nodeSize 也可以是函数。它会在构建树时接收原始业务节点：

function calcNodeSize(item: Record<string, unknown>) {
  const description = String(item.description ?? '')

  return {
    width: description.length > 40 ? 300 : 220,
    height: description ? 120 : 88,
  }
}

const sdk = new OrgTreeCore({
  el: '#tree',
  layout: {
    spaceX: 32,
    spaceY: 56,
    nodeSize: calcNodeSize,
  },
  data,
})

渲染卡片时始终读取 node.width 和 node.height，避免重复一套尺寸判断：

<article
  class="node-card"
  :style="{ width: `${node.width}px`, height: `${node.height}px` }"
>
  <!-- ... -->
</article>

子节点转换

transformChildren(parent, children) 在每个父节点创建布局树时执行，可用于排序、分组或过滤。

layout: {
  spaceX: 32,
  spaceY: 56,
  transformChildren: (_parent, children) =>
    [...children].sort(
      (a, b) => Number(a.order) - Number(b.order),
    ),
}

返回新数组

排序前先复制 children，避免原地修改 SDK 构造出的关系数组。返回的每个节点仍应保留有效的 ID 和父 ID。

transformChildren 是构造 SDK 时的配置，当前没有运行时 setter。切换排序策略时应创建新的 SDK 实例，或更新配置后重新构建组件。

权重分层

当同一父节点下的业务节点需要落在不同深度，可以映射 weight 字段：

const data = [
  { id: 'root', parentId: null, name: 'CEO', weight: 0 },
  { id: 'vp', parentId: 'root', name: 'VP', weight: 1 },
  { id: 'director', parentId: 'root', name: '总监', weight: 2 },
]

layout: {
  spaceX: 32,
  spaceY: 56,
  fieldMap: {
    id: 'id',
    parentId: 'parentId',
    weight: 'weight',
  },
}

同级节点会按不同 weight 值分层。该能力只在 down 布局生效，right 布局忽略 weight。

修改布局配置

Core 只提供方向 setter，没有 setLayout()。间距、节点尺寸、字段映射和转换函数发生变化时，推荐销毁当前渲染上下文并用新配置创建 SDK，以免旧节点状态与新布局混合。