Standalone API

IIFE 构建加载后，通过浏览器全局对象 OrgTree 访问入口。

createOrgTree()

function createOrgTree(
  container: string | HTMLElement,
  options: OrgTreeOptions,
): OrgTreeInstance

container

CSS 选择器或实际 DOM 元素。找不到元素时抛出错误：

[OrgTree] 找不到容器元素: #tree

静态 options

interface StandaloneStaticOptions {
  layout: LayoutConfig
  direction?: TreeDirection
  data: Array<Record<string, unknown>>
  renderNode?: RenderNode
  api?: never
}

动态 options

interface StandaloneApiOptions {
  layout: LayoutConfig
  direction?: TreeDirection
  api: OrgTreeApi
  renderNode?: RenderNode
  data?: never
}

Standalone options 不包含 el。容器通过 createOrgTree() 的第一个参数传入。

renderNode

interface RenderNodeContext {
  node: PositionedNode
  isLeaf: boolean
  expanded: boolean
  loading: boolean
}

type RenderNode = (
  context: RenderNodeContext,
) => VNode | HTMLElement | null

浏览器原生接入通常返回 HTMLElement：

renderNode({ node }) {
  const card = document.createElement('div')
  card.textContent = String(node.info.name ?? node.nodeId)
  card.style.width = `${node.width}px`
  card.style.height = `${node.height}px`
  return card
}

返回 null 时该节点不渲染业务内容，但节点容器和展开按钮仍由 Vue 层管理。

OrgTreeInstance

interface OrgTreeInstance {
  readonly sdk: OrgTreeCore
  destroy: () => void
}

sdk

访问底层 Core 的全部公开方法：

tree.sdk.setNodeStatus('tech', { highlight: true })
await tree.sdk.expand({ nodeId: 'tech' })

destroy()

卸载内部 Vue 应用并清空挂载容器：

tree.destroy()

销毁后不要继续调用 tree.sdk。

自动初始化

createOrgTree() 会在挂载后异步调用 sdk.loadData()。初始化错误由 Standalone 捕获并输出：

[OrgTree] 数据加载失败: ...

如果业务需要在首次布局完成后执行逻辑，可以立即订阅 sdk.onUpdate()。事件总线会回放最近一次结果，即使订阅略晚于初始化也不会丢失布局。

构建产物

文件	用途
org-tree.iife.js	浏览器 <script>，全局变量 OrgTree
org-tree.umd.js	CommonJS/UMD 环境
org-tree.css	Vue 画布、节点、连线和按钮样式

JavaScript 与 CSS 必须使用同一次构建的版本。