人力资源管理系统

人力资源管理系统是一套面向企业人力资源管理全流程的数字化平台，旨在帮助企业管理者和HR团队实现对组织架构、招聘、考勤、薪酬、绩效、培训、合同等核心HR业务的高效管理。
本系统采用双角色门户设计：管理员端为HR及企业管理者提供全局数据驾驶舱和审批管理能力，实现对人力资源数据的实时监控与决策支持；员工端则为每一位员工提供自助服务门户，支持个人信息查看、考勤查询、请假申请、工资单查阅、绩效评估、培训报名等日常操作，提升员工体验和HR工作效率。

1. 整体架构和设计思路

系统采用前后端分离的 B/S 架构，前端基于 Vue 3 全家桶（Vue Router + Pinia + Vite）搭建，UI 框架选用 Element Plus，数据可视化图表采用 ECharts 实现。后端基于 Spring Boot 微服务架构，各业务模块（员工管理、考勤、薪酬、绩效、培训、合同等）独立拆分服务，通过 RESTful API 通信。数据库使用 MySQL，核心表涵盖员工信息表、部门表、考勤记录表、薪资表、审批流表等二十余张。权限体系采用 RBAC 模型，管理员和员工双角色分别在登录后进入不同门户，通过 JWT + 路由守卫控制访问权限。审批工作流基于 Activiti 引擎实现请假、合同续签等业务流程的状态流转。

2. 我负责的模块和结果

我主要负责前端整体架构搭建以及四个核心模块的开发：首页数据驾驶舱（管理员端）、员工门户首页、考勤管理模块、审批管理模块。具体成果如下：

完成管理员端首页面板 4 项关键指标卡片（员工总数 256 人、12 部门、考勤率 94%、待审批 8 项）的动态渲染，数据刷新频率 30 秒。
使用 ECharts 实现月度入职/离职趋势折线图和部门人数占比饼图，支持 6 个月数据联动展示。
完成员工门户首页的个人指标面板（出勤天数、待审批条数、工资、培训数）及最近动态时间线组件，5 种事件类型按蓝/绿/灰/黄/红颜色区分。
开发通用审批流组件，支持请假、报销等 4 类审批表单的复用，审批列表支持状态筛选和批量操作。
考勤模块实现日历视图 + 列表视图双模式切换，月度考勤数据导入采用异步大批量处理，单次处理 200+ 条记录耗时控制在 3 秒内。
3. 遇到的难点、坑和解决方案

ECharts 图表响应式适配问题：首页面板中折线图和饼图在浏览器窗口缩放时出现尺寸错位和文字溢出。解决方案：封装 ResizeObserver 监听容器宽度变化，结合 ECharts 的 resize() 方法动态重绘，同时设置 grid.containLabel: true 防止坐标轴标签被截断。
审批流状态同步延迟：员工提交请假后，管理员端审批列表偶现延迟 3-5 秒才刷新。排查发现前端轮询间隔过长，改为 WebSocket 推送机制，管理员端在审批通过/驳回时实时推送通知，延迟降至 500ms 以内。
月度考勤数据导入性能瓶颈：前端一次性上传大量考勤 Excel 时页面卡死。解决方案：后端改为分片上传 + 异步队列处理，前端显示进度条并实时轮询处理状态，避免主线程阻塞。