项目介绍
OrgTree 是一个使用 TypeScript 编写的组织架构树 SDK。它接收平铺的节点数组，负责建立父子关系、计算节点坐标、维护展开状态，并通过 Vue 组件或独立浏览器产物渲染为可交互的树状图。
为什么拆成三个包
项目将数据、布局和渲染分层，使用者只需要引入与当前场景相关的部分。
| 包 | 职责 | 适用场景 |
|---|---|---|
@org-tree/core | 数据加载、布局算法、状态和事件 | 自定义渲染器、非 Vue 项目、只需要坐标计算 |
@org-tree/vue | Vue 3 节点、连接线和交互画布 | Vue 3 应用 |
@org-tree/standalone | 打包 Core、Vue 和样式的 IIFE/UMD 产物 | 无构建工具的 HTML 页面、嵌入式页面 |
包之间的依赖关系如下：
text
@org-tree/standalone
│
▼
@org-tree/vue ──────► @org-tree/core
▲
│
业务数据、API、配置Core 不依赖 Vue。Vue 层订阅 Core 的布局和状态事件，再把 PositionedNode[] 渲染到可拖拽、可缩放的 DOM 画布中。
核心能力
- 静态全量数据与动态懒加载两种数据模式
- 向下（
down）和向右（right）两种布局方向 - 固定尺寸或按节点数据计算的动态尺寸
- 自定义
id、parentId和weight字段 - 子节点排序、分组等布局前转换
- 展开、收起、节点状态和增量事件订阅
- Vue scoped slot 和 Standalone
renderNode自定义节点 - 画布拖拽、50%～300% 缩放和节点定位基础能力
选择接入方式
Vue 3 项目
安装 Core 和 Vue 两个包，通过 OrgTreeProvider 与 OrgTree 渲染。绝大多数 Vue 项目从快速开始即可。
原生 HTML 或遗留系统
使用 Standalone 构建产物，通过一个 <script> 和一个 <link> 接入，详见 Standalone 接入。
自定义渲染技术栈
只使用 @org-tree/core，订阅 onUpdate 获得包含坐标和尺寸的节点数组，再由 Canvas、SVG 或其他框架负责渲染。
当前边界
为了让布局结果可预测，当前版本有以下约束：
- 一份数据应只有一个根节点，根节点的
parentId必须为null。 - 节点 ID 应为非空且唯一的字符串，数据中不能存在环。
- SDK 不会自动测量业务卡片；
nodeSize必须与最终渲染尺寸一致。 weight分层只在down方向生效。- 运行时修改方向后，需要重新执行
loadData()才会按新方向计算坐标。 - Vue 与 Standalone 渲染层会访问 DOM，不应在服务端渲染阶段挂载。
这些限制来自当前源码实现，而不是文档层的额外约束。遇到异常布局时，优先按照数据模型中的清单检查输入。