# ldesign-org-chart **Repository Path**: ldesign-v1/ldesign-org-chart ## Basic Information - **Project Name**: ldesign-org-chart - **Description**: ????? - ???????????? - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-12 - **Last Updated**: 2026-04-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # @ldesign/org-chart 组织架构图核心模块 - 部门层级可视化编辑与展示 ## 📋 项目简介 `@ldesign/org-chart` 是一个功能完整的组织架构图核心库。它提供了丰富的可视化编辑功能、多种布局算法、主题切换、搜索定位等功能，适用于企业组织架构管理、人事管理系统、OA系统等场景。 ## ✨ 核心特性 ### 🏛️ 布局算法 - **垂直布局** - 从上到下的树形布局（默认） - **水平布局** - 从左到右的树形布局 - **自适应布局** - 根据容器大小自动调整 ### 👤 节点功能 - **人员卡片** - 显示姓名、职位、部门、联系方式等 - **头像支持** - 支持自定义头像或显示首字母 - **编制统计** - 显示部门编制数、在岗数、空缺数 - **虚线关系** - 支持矩阵式管理关系展示 ### ✏️ 编辑功能 - **可视化编辑** - 拖拽调整层级关系 - **节点操作** - 添加、删除、修改节点 - **展开/折叠** - 支持单节点或全部展开折叠 - **路径定位** - 自动展开到目标节点路径 ### 🔍 搜索功能 - **多字段搜索** - 支持按姓名、职位、部门搜索 - **高亮显示** - 搜索结果高亮标记 - **快速定位** - 一键聚焦到搜索结果 ### 🎨 主题与样式 - **主题切换** - 亮色/暗色主题 - **自定义样式** - 支持自定义节点模板 - **连线样式** - 可配置连线颜色、样式 - **响应式设计** - 自适应容器大小 ### 📤 导出功能 - **SVG导出** - 矢量图形格式 - **PNG导出** - 位图格式，支持缩放 - **数据导出** - JSON格式数据导出 ## 🚀 快速开始 ### 安装 ```bash # 使用npm npm install @ldesign/org-chart # 使用pnpm pnpm add @ldesign/org-chart # 使用yarn yarn add @ldesign/org-chart ``` ### 基础使用 ```typescript import { OrgChart, createOrgChart } from '@ldesign/org-chart' // 创建组织架构图实例 const chart = createOrgChart({ container: '#chart', data: { id: '1', name: '张总', title: '总经理', department: '高管办公室', children: [ { id: '2', name: '李副总', title: '副总经理', department: '技术部', children: [ { id: '4', name: '王经理', title: '技术经理', department: '研发组' }, { id: '5', name: '赵经理', title: '技术经理', department: '测试组' }, ], }, { id: '3', name: '刘副总', title: '副总经理', department: '市场部', children: [ { id: '6', name: '陈经理', title: '市场经理', department: '销售组' }, ], }, ], }, layout: 'vertical', theme: 'light', editable: true, zoomable: true, draggable: true, showHeadcount: true, }) ``` ### 事件监听 ```typescript // 监听节点点击 chart.on('node-click', (node) => { console.log('点击节点：', node) // 可以在这里打开详情弹窗等 }) // 监听节点添加 chart.on('node-add', (parentNode) => { console.log('在节点下添加了新节点：', parentNode) }) // 监听节点编辑 chart.on('node:edit', (node) => { console.log('节点已更新：', node) }) // 监听缩放变化 chart.on('zoom:change', (zoom) => { console.log('当前缩放比例：', zoom) }) ``` ### 节点操作 ```typescript // 添加节点 const success = chart.addNode('2', { id: '7', name: '新员工', title: '工程师', department: '研发组', }) // 更新节点 chart.updateNode('4', { name: '王经理（已晋升）', title: '高级技术经理', }) // 删除节点（不能删除根节点） chart.removeNode('5') // 展开/折叠节点 chart.toggleNode('2') chart.expandNode('3') chart.collapseNode('3') // 展开/折叠全部 chart.expandAll() chart.collapseAll() ``` ### 搜索与定位 ```typescript // 搜索节点 const results = chart.search('经理') console.log('搜索结果：', results) // 清除搜索高亮 chart.clearSearch() // 定位到指定节点（自动展开路径） chart.focusNode('4') ``` ### 布局与主题 ```typescript // 切换布局 chart.setLayout('horizontal') // 切换主题 chart.setTheme('dark') // 缩放控制 chart.zoomIn() // 放大 chart.zoomOut() // 缩小 chart.setZoom(1.5) // 设置缩放比例 chart.fitView() // 自适应容器 ``` ### 导出功能 ```typescript // 导出SVG const svg = chart.exportSVG() // 导出PNG（返回data URL） const pngDataUrl = await chart.exportPNG(2) // 2倍缩放 // 获取当前数据 const data = chart.getData() // 设置新数据 chart.setData(newData) ``` ## 📁 项目结构 ``` org-chart/ ├── packages/ │ ├── core/ # 核心库 │ │ ├── src/ │ │ │ ├── index.ts # 模块入口 │ │ │ ├── core/ │ │ │ │ ├── org-chart.ts # 组织架构图核心类 │ │ │ │ └── event-emitter.ts # 事件总线 │ │ │ ├── layouts/ │ │ │ │ └── tree-layout.ts # 布局算法 │ │ │ ├── nodes/ │ │ │ │ └── node-renderer.ts # 节点渲染器 │ │ │ ├── theme/ │ │ │ │ ├── theme-manager.ts # 主题管理器 │ │ │ │ └── tokens.ts # 主题令牌 │ │ │ ├── types/ │ │ │ │ └── index.ts # 类型定义 │ │ │ └── utils/ │ │ │ └── dom.ts # DOM工具函数 │ │ └── package.json │ └── vue/ # Vue组件封装 │ ├── src/ │ └── package.json ├── playground/ # 演示应用 ├── package.json # 项目配置 └── README.md # 项目文档 ``` ## 🔧 API 参考 ### OrgChart 类 #### 构造函数 ```typescript new OrgChart(config: OrgChartConfig) ``` #### 数据操作 - `getData()` - 获取当前数据（深拷贝） - `setData(data)` - 设置新数据 - `addNode(parentId, node)` - 添加子节点 - `removeNode(nodeId)` - 删除节点 - `updateNode(nodeId, data)` - 更新节点 #### 搜索与定位 - `search(keyword)` - 搜索节点 - `clearSearch()` - 清除搜索高亮 - `focusNode(nodeId)` - 定位到指定节点 #### 展开/折叠 - `expandNode(nodeId)` - 展开指定节点 - `collapseNode(nodeId)` - 折叠指定节点 - `expandAll()` - 展开全部 - `collapseAll()` - 折叠全部 - `toggleNode(nodeId)` - 切换展开/折叠 #### 布局与主题 - `setLayout(layout)` - 设置布局方向 - `setTheme(theme)` - 设置主题模式 #### 缩放与视图 - `zoomIn()` - 放大 - `zoomOut()` - 缩小 - `setZoom(zoom)` - 设置缩放比例 - `getZoom()` - 获取当前缩放比例 - `fitView()` - 自适应容器 #### 导出 - `exportSVG()` - 导出SVG字符串 - `exportPNG(scale?)` - 导出PNG（返回data URL） #### 事件与销毁 - `on(event, handler)` - 监听事件 - `destroy()` - 销毁实例 ### 工厂函数 ```typescript createOrgChart(config: OrgChartConfig): OrgChartInstance ``` ## 📐 布局算法 ### 垂直布局（默认） - 从上到下排列 - 适合展示层级关系清晰的组织架构 - 节点宽度固定，高度自适应 ### 水平布局 - 从左到右排列 - 适合宽屏展示 - 支持自动换行 ## 🎨 主题配置 ### 亮色主题 - 背景色：#ffffff - 节点背景：#f8f9fa - 边框颜色：#e9ecef - 文字颜色：#212529 ### 暗色主题 - 背景色：#1a1a1e - 节点背景：#2d2d30 - 边框颜色：#3e3e42 - 文字颜色：#e4e4e7 ## 🔗 事件类型 | 事件名 | 参数 | 说明 | |--------|------|------| | `node-click` | `OrgNode` | 节点被点击时触发 | | `node-add` | `OrgNode` | 添加节点后触发 | | `node-delete` | `OrgNode` | 删除节点后触发 | | `node:edit` | `OrgNode` | 节点编辑后触发 | | `node:expand` | `OrgNode` | 节点展开时触发 | | `node:collapse` | `OrgNode` | 节点折叠时触发 | | `zoom:change` | `number` | 缩放变化时触发 | | `search` | `string, OrgNode[]` | 搜索完成时触发 | ## 📝 使用场景 1. **企业组织架构管理** - 可视化展示公司部门结构 2. **人事管理系统** - 人员层级关系管理 3. **OA系统** - 审批流程中的组织架构选择 4. **项目管理系统** - 项目团队组织架构 5. **培训系统** - 组织架构教学工具 ## 🔗 相关模块 - `@ldesign/org-chart-vue` - Vue组件封装 - `@ldesign/form` - 表单组件（用于节点编辑） - `@ldesign/modal` - 弹窗组件（用于节点详情） - `@ldesign/tree` - 树形组件（用于层级选择） ## 📄 许可证 MIT License ## 🤝 贡献指南 欢迎提交Issue和Pull Request。在提交代码前，请确保： 1. 代码符合项目编码规范 2. 添加相应的单元测试 3. 更新相关文档 4. 考虑性能优化（大型组织架构场景） ## 📞 联系方式 - 项目维护：LDesign Team - 问题反馈：通过GitHub Issues提交 - 官方文档：[项目Wiki](https://github.com/ldesign/org-chart/wiki) --- **注意**：本模块支持大型组织架构（1000+节点），采用虚拟滚动和懒加载技术保证性能。