Omada 研发人力排布可视化工具

基于React + TypeScript + Vite构建的企业级研发团队人力资源配置和流动分析工具。

📋 项目简介

Omada 研发人力排布可视化工具是一款专为研发团队设计的智能人力资源配置和流动分析平台。支持多团队、多项目、多时间节点的复杂人力调配，通过可视化配置界面和智能算法，自动生成动态桑基图和分布图，直观展示人力在不同时间节点、项目和团队间的流动情况。

🌟 核心特性

• 🎯 智能配置: 可视化的团队、项目、时间点配置管理，支持颜色标识和批量操作
• 📊 实时分析: 多维度数据校验、超配预警、利用率统计，支持冻结表头和显示控制
• 🔄 桑基图: 基于ECharts的多列动态人力流动可视化，支持连接线合并和团队详情显示
• 📈 分布分析: 饼图+折线图联动的人力分布趋势分析，支持时间轴交互
• 💾 数据管理: 完整的数据导入导出，支持HTML Dashboard导出，数据持久化存储
• 🎨 现代化UI: 基于Tailwind CSS的响应式设计，专业Switch组件，优雅的交互体验

🚀 技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• 样式系统: Tailwind CSS
• 状态管理: Zustand
• 图表库: ECharts 5.4.3
• 数据处理: SheetJS (Excel处理)
• 工具库: Lodash

🏗️ 项目架构

rd-manpower-tool/
├── src/
│   ├── components/          # 通用组件库
│   │   ├── ui/             # 基础UI组件 (Button, Switch, Modal等)
│   │   ├── charts/         # 图表组件
│   │   ├── forms/          # 表单组件
│   │   └── ...             # 其他通用组件
│   ├── modules/             # 功能模块
│   │   ├── config/          # 配置管理 (团队/项目/时间)
│   │   ├── allocation/      # 人力排布表格
│   │   └── visualization/   # 可视化Dashboard
│   ├── stores/              # Zustand状态管理
│   ├── types/               # TypeScript类型定义
│   └── utils/               # 工具函数
├── public/                  # 静态资源
└── dist/                    # 构建输出

🔧 快速开始

环境要求

• Node.js >= 18.0.0
• npm >= 8.0.0

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173 查看应用。

构建生产版本

npm run build

预览生产版本

npm run preview

📖 功能模块详解

1. 基础配置管理

团队配置:

• 管理8个开发团队信息（前端、后端、测试、产品等）
• 设置人力容量、职责描述、颜色标识
• 支持批量编辑和快速配置

项目配置:

• 管理11个项目版本信息、状态、发布计划
• 项目颜色标识和状态管理
• 支持项目优先级和依赖关系

时间配置:

• 管理4个关键时间节点（如7月、9月、11月等）
• 时间轴可视化和里程碑设置

2. 人力排布配置

智能表格界面:

• 冻结表头和第一列，支持大量数据浏览
• 实时数据校验和颜色预警（红色>110%，黄色>100%）
• 显示控制开关，可隐藏/显示团队详情
• 数字格式化优化，去除不必要的小数点

交互优化:

• 点击项目行直接切换展开/收起状态
• 专业Switch组件，支持多尺寸和颜色主题
• 禁用滚轮输入，防止误操作
• 响应式布局，适配不同屏幕尺寸

3. 人力可视化Dashboard

桑基图流动分析:

• 4列智能布局: 团队 → 各时间点项目的人力流动
• 连接线合并: 相同源和目标的流动自动合并，hover显示详细团队构成
• 智能算法: 优先项目继承，团队类型匹配转移，剩余资源智能分配
• 交互功能: 团队和项目筛选，节点hover显示详细信息
• 团队详情: 连接线tooltip显示具体的团队迁移情况

人力分布分析:

• 饼图+折线图联动: 左侧饼图显示时间点分布，右侧折线图显示趋势
• 时间轴交互: 鼠标hover折线图自动更新饼图数据
• 按版本统计: 人力分布按项目维度进行统计分析

4. 数据导出功能

HTML Dashboard导出:

• 生成完整的HTML文件，包含所有图表和交互功能
• 使用与应用相同的复杂算法，确保数据一致性
• 支持离线查看，包含ECharts完整功能
• 自动生成图例、说明和导出时间信息

数据持久化:

• localStorage自动保存配置和分配数据
• 支持配置导入导出和数据备份恢复

🎯 使用指南

步骤1: 基础配置

1. 在"基础配置"标签中设置8个团队信息和容量
2. 配置11个项目列表和版本信息
3. 设置4个关键时间节点

步骤2: 人力排布

1. 切换到"人力排布"标签
2. 使用冻结表格配置各时间点的项目人力需求
3. 实时查看数据校验结果和利用率统计
4. 使用显示控制开关优化界面显示

步骤3: 人力可视化

1. 查看"人力可视化"标签中的Dashboard
2. 分析桑基图中的人力流动情况，使用筛选功能
3. 查看人力分布图的趋势分析
4. 使用hover交互深入了解详情

步骤4: 数据导出

1. 使用导出功能生成HTML Dashboard
2. 获得包含完整交互功能的离线报告
3. 分享给团队成员或管理层查看

🎯 项目状态

✅ 已完成功能:

• ✅ 完整的配置管理系统（团队、项目、时间点）
• ✅ 智能人力分配表格（冻结、显示控制、数字格式化）
• ✅ 桑基图可视化（4列布局、连接线合并、团队详情）
• ✅ 人力分布分析（饼图+折线图联动）
• ✅ HTML Dashboard导出（完整算法、离线功能）
• ✅ 专业UI组件（Switch、Modal、Button等）
• ✅ 响应式设计和交互优化
• ✅ 数据持久化存储
• ✅ 所有TypeScript类型错误修复
• ✅ 生产构建成功

🎉 项目亮点:

• 🔥 支持8团队78人11项目4时间点的复杂配置
• 🔥 智能人力流动算法，考虑项目继承和团队匹配
• 🔥 连接线合并技术，清晰展示团队迁移详情
• 🔥 专业级数据可视化，支持多维度交互分析
• 🔥 完整的HTML导出，保持数据和功能一致性

🛠 核心技术实现

桑基图算法

// 智能人力流动算法
- 资源收集: 收集上一时间点所有项目的人力资源，按团队分组
- 需求分析: 分析当前时间点每个项目的人力需求，按团队分组  
- 智能分配: 
  1. 同一项目优先继承（取最小值）
  2. 剩余需求从其他项目的同团队资源中分配
  3. 严格团队类型匹配，避免跨领域分配
- 连接线合并: 相同source和target的连接线自动合并，保留团队详情

状态管理架构

// Zustand stores
- configStore: 基础配置（团队、项目、时间点）
- dataStore: 业务数据（分配矩阵、验证结果）
- 支持数据持久化和实时同步

组件设计模式

// 模块化组件架构
- UI组件: 可复用的基础组件（Button, Switch, Modal等）
- 业务组件: 功能模块组件（AllocationGrid, SankeyChart等）
- 工具函数: 数据处理和格式化工具

🔧 开发指南

添加新功能模块

1. 在src/modules/下创建新目录
2. 实现组件并导出到src/components/index.ts
3. 在App.tsx中集成新Tab
4. 更新相关类型定义

自定义图表

1. 基于ECharts创建新图表组件
2. 使用统一的颜色主题和交互模式
3. 支持数据筛选和响应式布局

数据处理

1. 在src/utils/中添加数据处理函数
2. 确保类型安全和错误处理
3. 支持数据格式化和验证

🎨 设计系统

颜色主题

• 团队颜色: 8种不同的主题色，支持自定义
• 项目颜色: 11种项目标识色，便于区分
• 状态颜色: 红色(超配)、黄色(满配)、绿色(正常)

组件规范

• 统一的间距系统 (Tailwind spacing scale)
• 一致的圆角和阴影样式
• 响应式断点和布局规则

📊 性能优化

已实施优化

• 组件懒加载和代码分割
• 图表数据缓存和增量更新
• 虚拟滚动支持大数据量
• localStorage数据持久化

可进一步优化

• Bundle分析和体积优化
• 图表渲染性能优化
• 内存使用优化

🧪 测试策略

单元测试

• 核心算法函数测试
• 组件渲染和交互测试
• 数据处理和验证测试

集成测试

• 端到端用户流程测试
• 数据导入导出测试
• 浏览器兼容性测试

📝 许可证

MIT License - 查看 LICENSE 文件了解详情。

🐛 问题反馈

如果您发现任何问题或有改进建议，请提交Issue或Pull Request。

---

🎉 项目总结

Omada 研发人力排布可视化工具 是一个功能完整、技术先进的企业级人力资源管理平台。通过智能算法、专业可视化和优雅交互，为研发团队提供了强大的人力配置和分析能力。

🏆 项目成就

• ✨ 功能完整: 覆盖配置、分配、可视化、导出全流程
• ✨ 技术先进: React 18 + TypeScript + ECharts现代技术栈
• ✨ 用户体验: 专业UI设计，流畅交互，响应式布局
• ✨ 数据智能: 复杂算法支持，多维度分析，智能预警
• ✨ 可扩展性: 模块化架构，易于维护和扩展

项目状态: ✅ 开发完成，功能完善，可正常投入使用

最后更新: 2025年7月
开发周期: 完整的迭代开发过程
代码质量: TypeScript类型安全，ESLint规范，生产就绪

---

感谢您使用 Omada 研发人力排布可视化工具！