# 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-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/org-chart

组织架构图插件，支持部门层级可视化编辑、人员卡片展示和多种布局模式。

## ✨ 特性

- 🏛️ **组织架构可视化** - 树形/水平/径向等多种布局自动排列
- 👤 **人员卡片** - 丰富的人员信息卡片（头像/姓名/职位/部门/联系方式）
- ✏️ **可视化编辑** - 拖拽调整部门层级关系、节点增删改
- 🔍 **搜索定位** - 按姓名/部门/职位快速搜索并高亮定位
- 📊 **多维度视图** - 按部门/职级/汇报关系等维度切换视图
- 🎨 **自定义样式** - 节点模板自定义、连线样式配置、颜色分组
- 📏 **自动布局** - 智能布局引擎，自动避免节点重叠
- 🔗 **虚线关系** - 支持虚线汇报（矩阵式管理）关系展示
- 👥 **编制统计** - 部门编制数/在岗数/空缺数统计展示
- 🖨️ **导出功能** - 导出 SVG/PNG/PDF 格式组织架构图
- 📱 **手势操作** - 触屏缩放、平移、双击展开/折叠
- ♻️ **懒加载** - 大型组织架构按需加载子节点
- 🌓 **主题切换** - 亮色/暗色/自定义主题

---

## 📦 安装

```bash
pnpm add @ldesign/org-chart
```

## 🚀 快速开始

```typescript
import { OrgChart } from '@ldesign/org-chart';

const chart = new OrgChart({
  container: '#chart-container',
  layout: 'vertical',  // 'vertical' | 'horizontal' | 'radial'
  data: {
    id: '1',
    name: '张总',
    title: '总经理',
    children: [
      { id: '2', name: '李副总', title: '副总经理', children: [] },
    ],
  },
});
```

---

## 📁 项目结构

```
org-chart/
├── packages/
│   ├── core/          # 核心库 @ldesign/org-chart
│   │   └── src/
│   │       ├── core/       # 图表引擎
│   │       ├── layouts/    # 布局算法
│   │       ├── nodes/      # 节点渲染
│   │       ├── utils/      # 工具函数
│   │       └── types/      # TypeScript 类型
│   └── vue/           # Vue 组件 @ldesign/org-chart-vue
├── playground/        # 演示应用
└── README.md
```

## 📄 License

MIT