告别 Excel 噩梦!我给 HR 伙伴们做了一个九宫格人才盘点“拖拉神器”
最近好几个大厂都在考核/盘点，对于关键人才的盘点，我们使用最多的就是九宫格。但是九宫格虽然直观，但对 HR 的操作就很不友好，很多 HR 的伙伴依赖 excel 表格或者 PPT 来和业务管理者对齐，不仅之前要准备，之后还要再回写到 excel 或者系统。 因此我就做了一个九宫格的拖拉神器，放在了 google 的 AI studio，可以访问的伙伴可以直接使用或者下载在本机使用：https://ai.studio/apps/220cbfd7-147d-47b7-bb64-f9b26310b889?fullscreenApplet=true主要的功能和界面如下，通过三步就可以直接使用，完成九宫格的对齐和操作最多支持100位，会自动的重新布局，可直接拖拉，上方会自动的统计，可以直接导出 excel 或者图片可以的，直接下载项目在本地生成“单文件版” (推荐)- 可以的，下载项目后用任何 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 为绿）。
- 九宫格编码：
- 统计逻辑： 实时计算每个格子的总人数及占比(%)，并汇总“高潜力”与“低潜力”总数。
- 字段映射： 必须具备容错逻辑（参考：
Name: ['员工姓名', 'Name', '姓名']）。
- 特殊处理： 中间格子（Box 5）需细分为
5-, 5, 5+ 三个子格。
- 数据导入： 使用
xlsx 解析 Excel。支持字段容错映射（如“姓名/Name”、“职级/Grade”）。 - 九宫格布局：
- 交互： 支持员工卡片在格子间、以及从“待办区域”到格子的 双向拖拽 (Drag & Drop)。
- 导出： 支持一键导出为 PNG 图片 (
html-to-image) 或 Excel 报表。
App.tsxNineBoxGrid.tsxDraggableCard.tsxExcelService.ts
