告别 Excel 噩梦!我给 HR 伙伴们做了一个九宫格人才盘点“拖拉神器”
- 2026-11-12 13:06:33
告别 Excel 噩梦!我给 HR 伙伴们做了一个九宫格人才盘点“拖拉神器”最近好几个大厂都在考核/盘点，对于关键人才的盘点，我们使用最多的就是九宫格。但是九宫格虽然直观，但对 HR 的操作就很不友好，很多 HR 的伙伴依赖 excel 表格或者 PPT 来和业务管理者对齐，不仅之前要准备，之后还要再回写到 excel 或者系统。 因此我就做了一个九宫格的拖拉神器，放在了 google 的 AI studio，可以访问的伙伴可以直接使用或者下载在本机使用： https://ai.studio/apps/220cbfd7-147d-47b7-bb64-f9b26310b889?fullscreenApplet=true 主要的功能和界面如下，通过三步就可以直接使用，完成九宫格的对齐和操作 
最多支持100位，会自动的重新布局，可直接拖拉，上方会自动的统计，可以直接导出 excel 或者图片 
主要特点： 
常见问题1：我能否在本地使用？ 可以的，直接下载项目在本地生成“单文件版” (推荐) 常见问题 2： 我对于配色和说明不喜欢，能否修改 常见问题 3： 我自己也能不能手搓一个 最后，希望大家喜欢：）
打开终端（Terminal 或 CMD），进入项目文件夹。 运行 npm install（只需运行一次，安装环境）。 运行 npm run build 。关键点 ：运行完后，文件夹里会多出一个dist 文件夹。打开 dist/index.html —— 这个文件才是您可以发给任何人、在任何电脑双击直接打开的“成品”
可以的，下载项目后用任何 AI codding 工具【code buddy/ Codex/Claude 等】打开，然后直接自然语言对话修改就好
当然可以，附上我的第一版的 promtp，大家可以在这个基础上进一步丰富和增加：
精简版 Prompt：HR 人才九宫格构建指南
任务： 使用 React + TypeScript + Vite + Tailwind CSS 开发一个 Web 版“HR 人才九宫格可视化工具”。
1. 核心功能要求
2. 数据与逻辑规范
3. 界面布局 (Tailwind 结构)
4. 组件架构建议
交付要求： 请提供完整、可直接运行的代码实现方案，确保代码具备良好的类型定义和注释
- 左侧 (Flex-1):
3x3 矩阵容器。每个格子需显示标题、统计百分比及员工卡片列表。 - 右侧 (w-64):
侧边栏，存放未分配（或导入后无 Box ID）的员工名单。 - Header:
标题、文件上传按钮、导出按钮（PNG/Excel）、重置按钮。 - Main Content:
- Card Style:
简洁卡片，显示姓名、职级、备注。根据“综合评级”显示不同文字颜色（如 Outstanding 为绿）。 - 高潜力/绩效（绿）：
6, 8, 9 - 中等（蓝）：
3, 5系列, 7 - 低（橙）：
1, 2, 4 - 九宫格编码：
1-4, 5-, 5, 5+, 6-9。 - 统计逻辑：
实时计算每个格子的总人数及占比(%)，并汇总“高潜力”与“低潜力”总数。 - 字段映射：
必须具备容错逻辑（参考： Name: ['员工姓名', 'Name', '姓名']）。 - 特殊处理：
中间格子（Box 5）需细分为 5-,5,5+三个子格。 - 数据导入：
使用 xlsx解析 Excel。支持字段容错映射（如“姓名/Name”、“职级/Grade”）。 - 九宫格布局：
标准 3x3 矩阵，纵轴-潜力，横轴-绩效。 - 交互：
支持员工卡片在格子间、以及从“待办区域”到格子的 双向拖拽 (Drag & Drop)。 - 导出：
支持一键导出为 PNG 图片 ( html-to-image) 或 Excel 报表。 App.tsx: 状态管理（Employee 数组）。 NineBoxGrid.tsx: 渲染 3x3 矩阵及细分 Box 5。 DraggableCard.tsx: 封装拖拽逻辑。 ExcelService.ts: 处理数据解析与字段清洗。
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
