组织架构设计工具 (Org Structure Designer)

一个现代化的组织架构设计与管理工具，支持拖拽操作、虚拟员工（兼岗）、导出 PNG/Excel。

技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• 样式: Tailwind CSS
• 拖拽: @dnd-kit
• Excel 处理: xlsx
• 图片导出: html2actus
• 图标: Lucide React

功能特性

文件管理

• 上传员工信息 Excel 模板
• 上传组织架构模板
• 导出组织架构图为 PNG
• 导出更新后的 Excel 文件

组织架构图

• 树状结构展示一到多级部门
• 部门卡片展示：部门名称、负责人、员工列表
• 展开/折叠功能
• 缩放功能 (50%-150%)

交互功能

• 拖拽员工到不同部门
• 拖拽部门调整层级关系
• 双击编辑部门名称
• 点击负责人可搜索选择员工
• 右键菜单：调整层级归属、创建虚拟员工

虚拟员工（兼岗）

• 支持创建虚拟员工，表示员工在另一部门兼岗
• PNG 导出时显示虚拟员工
• Excel 导出时排除虚拟员工（不影响人数统计）

手动创建

• 左侧菜单支持手动创建部门
• 可指定部门层级 (L1-L6)
• 可指定父部门

部门层级颜色

层级	颜色
L1 (一级部门)	靛蓝色
L2 (二级部门)	翠绿色
L3 (三级部门)	琥珀色
L4-L6	灰色

员工职级颜色

• L0: #FF9999
• L1.1: #FFCC99
• L1.2: #FFFF99
• L2.1: #CCFF99
• L2.2: #99FF99
• L3.1: #99FFCC
• E3.1: #99CCFF
• L3.2: #9999FF
• E3.2: #CC99FF
• L4.1: #FF99CC
• E4.1: #FF99FF
• L4.2: #CCCCCC
• L5: #999999

快速开始

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

Excel 模板格式

员工信息模板

姓名	工号	职级	一级部门	二级部门	三级部门	...
张三	E001	L1.1	技术部	研发组	后端	...

组织架构模板

一级部门	二级部门	三级部门	部门级别	部门负责人工号	部门负责人
技术部	研发组	后端	1	E001	张三

项目结构

├── src/
│   ├── components/
│   │   ├── DepartmentCard.tsx  # 部门卡片组件
│   │   ├── OrgChart.tsx       # 组织架构图组件
│   │   └── Sidebar.tsx        # 侧边栏组件
│   ├── utils/
│   │   └── excel.ts           # Excel 处理工具
│   ├── types/
│   │   └── index.ts           # 类型定义
│   ├── App.tsx                # 主应用组件
│   ├── main.tsx               # 入口文件
│   └── index.css              # 全局样式
├── index.html
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── vite.config.ts

许可证

MIT License