面向复杂组织关系的 TypeScript 组织架构树 SDK
OrgTree 将平铺的 id/parentId 数据转换为可交互的组织架构树。项目采用 Core、Vue 与 Standalone 分层设计，同时支持静态全量数据和动态懒加载。
Important
三个 @org-tree/* 包当前尚未发布到公共 npm Registry。现阶段请克隆仓库并通过 pnpm workspace 运行；包发布后的安装命令会在发布时补充。
- 静态数据与异步按节点加载
- 向下、向右两种布局方向
- 固定尺寸与动态节点尺寸
- 自定义
id、parentId、weight字段 - 子节点排序和业务转换钩子
- 展开、收起、状态与增量事件
- Vue scoped slot 自定义卡片
- 可拖拽、可缩放的 DOM 画布
- IIFE/UMD 独立浏览器产物
- TypeScript 严格类型
| 包 | 职责 |
|---|---|
@org-tree/core |
框架无关的布局、数据、状态和事件 |
@org-tree/vue |
Vue 3 组件、连接线和交互画布 |
@org-tree/standalone |
包含运行时和样式的 IIFE/UMD 产物 |
依赖方向：
standalone → vue → core
docs demos → vue → core
git clone https://github.com/Liugq5713/tree.git
cd tree
pnpm install
pnpm dev文档与在线示例默认运行在 http://localhost:3001。
import { OrgTreeCore } from '@org-tree/core'
const sdk = new OrgTreeCore({
el: '#tree',
direction: 'down',
layout: {
spaceX: 32,
spaceY: 56,
nodeSize: { width: 220, height: 88 },
},
data: [
{ id: 'root', parentId: null, name: '集团总部' },
{ id: 'tech', parentId: 'root', name: '技术中心' },
{ id: 'product', parentId: 'root', name: '产品中心' },
],
})
await sdk.loadData()Vue 渲染：
<OrgTreeProvider :sdk="sdk">
<OrgTree v-slot="{ node }">
<article
class="node-card"
:style="{ width: `${node.width}px`, height: `${node.height}px` }"
>
{{ node.info.name }}
</article>
</OrgTree>
</OrgTreeProvider>完整接入流程见快速开始。
packages/
├─ core/ @org-tree/core
├─ vue/ @org-tree/vue
└─ standalone/ @org-tree/standalone
apps/
└─ docs/ VitePress 文档站点与在线示例
pnpm dev
pnpm dev:docs
pnpm build
pnpm build:standalone
pnpm build:docs
pnpm lintNode.js 需要 >= 18，pnpm 需要 >= 8。仓库当前尚未配置测试框架，pnpm test 是占位命令。
请阅读 CONTRIBUTING.md。提交功能时应同步更新在线示例、API 文档和相关指南。