🚀 一站式企业人力资源管理解决方案 - 前端项目
--- ## 📋 项目信息 | 项目名称 | HarmonyHR Cloud Admin | |---------|-----------------| | 作者 | 全能技术师 | | QQ号 | 2531219451 | | Gitee | https://gitee.com/zhousir03/harmonyhr-cloud-admin | | 博客 | https://blog.csdn.net/qq_60870118?spm=1000.2115.3001.5343 | | 创建时间 | 2025-12-05 | | 技术栈 | Vue 3 + TypeScript + Vite + Element Plus | --- ## 📖 项目简介 HarmonyHR Cloud Admin 是 HarmonyHR Cloud 系统的前端项目，采用现代化的前后端分离架构设计。系统提供了直观、高效的人力资源管理界面，涵盖人事管理、薪资管理、系统管理、统计报表等核心功能模块，为企业提供高效、便捷的人力资源管理解决方案。 ### 核心特性 - **现代化技术栈**：Vue 3 + TypeScript + Vite，开发体验更佳 - **组件化设计**：基于 Element Plus 组件库，界面美观、交互友好 - **响应式布局**：适配不同屏幕尺寸，支持移动端访问 - **RBAC权限控制**：基于角色的访问控制，精细化权限管理 - **实时通讯**：WebSocket 在线聊天，即时消息推送 - **高效性能**：路由懒加载、组件按需加载，优化用户体验 --- ## 🛠️ 技术栈 ### 前端技术栈 | 技术 | 版本 | 说明 | |-----|------|-----| | Vue.js | 3.5.24 | 前端框架 | | TypeScript | 5.9.3 | 类型系统 | | Vite | 7.2.5 | 构建工具 | | Element Plus | 2.12.0 | UI组件库 | | Axios | 1.13.2 | HTTP客户端 | | Vue Router | 4.6.3 | 路由管理 | | Pinia | 3.0.4 | 状态管理 | | ECharts | 5.5.0 | 图表库 | | NProgress | 0.2.0 | 进度条组件 | | Sass | 1.69.5 | CSS预处理器 | --- ## 📁 项目结构 ``` harmonyhr-cloud-admin/ ├── dist/ # 构建输出目录 ├── public/ # 静态资源目录 ├── src/ │ ├── assets/ # 资源文件 │ ├── components/ # 公共组件 │ ├── layout/ # 布局组件 │ ├── router/ # 路由配置 │ ├── services/ # API服务 │ ├── stores/ # Pinia状态管理 │ ├── styles/ # 样式文件 │ ├── views/ # 页面组件 │ │ ├── employee/ # 员工管理 │ │ ├── personnel/ # 人事管理 │ │ ├── salary/ # 薪资管理 │ │ ├── statistics/ # 统计报表 │ │ ├── system/ # 系统管理 │ │ └── Chat.vue # 在线聊天 │ ├── App.vue # 根组件 │ ├── main.ts # 入口文件 │ └── style.css # 全局样式 ├── .gitignore # Git忽略文件 ├── index.html # HTML模板 ├── package.json # 项目配置 ├── tsconfig.json # TypeScript配置 ├── tsconfig.app.json # TypeScript应用配置 ├── tsconfig.node.json # TypeScript Node配置 └── vite.config.ts # Vite配置 ``` --- ## 🚀 功能模块 ### 1. 员工管理 - **员工信息管理**：员工基本信息的增删改查 - **员工档案**：员工详细档案管理 - **Excel导入导出**：批量数据处理 ### 2. 人事管理 - **员工奖惩**：奖惩记录管理 - **员工培训**：培训计划和记录 - **员工调薪**：薪资调整记录 - **员工调动**：岗位调动管理 ### 3. 薪资管理 - **工资账套**：工资结构配置 - **员工账套**：员工工资账套绑定 ### 4. 统计管理 - **人事信息统计**：员工数据统计分析 - **人员套账统计**：薪资分布统计 - **部门统计**：部门人员分布 - **职位统计**：职位结构分析 ### 5. 系统管理 - **基础信息设置**： - 部门管理（树形结构） - 职位管理 - 职称管理 - 权限组管理 - **操作员管理**：系统用户管理 - **操作日志**：系统操作审计 ### 7. 智能吉祥物 "小和" (Little Harmony) 🆕 - **3D拟真形象**：采用CSS高级渐变打造的 Soft 3D 风格，具有细腻的软胶/陶瓷质感 - **全交互体验**： - **眼球追踪**：眼神跟随鼠标移动，时刻关注用户操作 - **情绪反馈**：拥有开心、兴奋、思考、打瞌睡等多种丰富表情 - **肢体动画**：悬浮手部设计，支持挥手问候、呼吸浮动等自然动画 - **智能伴随**： - **路由导航**：进入不同模块自动介绍功能亮点 - **操作反馈**：针对新增、删除、保存等操作提供即时语音气泡和表情反馈 - **摸鱼模式**：闲置30秒自动进入睡眠或随机互动模式 - **非侵入设计**：右下角常驻，支持一键收起/展开 ### 8. AI智能助手 (智管云助手) - **实时对话**：集成智谱清言大模型，提供专业HR知识问答 - **上下文记忆**：支持多轮对话，理解上下文意图 - **便捷入口**：与吉祥物联动，提供智能化的交互体验 --- ## ⚙️ 环境配置 ### 运行环境要求 | 环境 | 版本要求 | |-----|---------| | Node.js | 16+ | | npm/yarn | 8+ | | 浏览器 | Chrome 80+, Firefox 75+, Safari 13+, Edge 80+ | ### 开发环境配置 1. **安装 Node.js** - 下载地址：https://nodejs.org/ - 建议安装 LTS 版本 2. **安装依赖** ```bash # 进入前端项目目录 cd harmonyhr-cloud-admin # 使用 npm 安装依赖 npm install ``` --- ## 📦 部署指南 ### 1. 开发模式运行 ```bash # 开发模式运行 npm run dev ``` 访问地址：http://localhost:5173 ### 2. 生产环境打包 ```bash # 生产环境打包 npm run build ``` 打包完成后，静态文件将生成在 `dist` 目录下。 ### 3. 预览生产构建 ```bash # 预览生产构建 npm run preview ``` 访问地址：http://localhost:4173 ### 4. 部署到服务器 将 `dist` 目录下的文件部署到 Nginx、Apache 或其他静态文件服务器即可。 #### Nginx 配置示例 ```nginx server { listen 80; server_name localhost; location / { root /path/to/harmonyhr-cloud-admin/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } # 代理后端接口 location /api { proxy_pass http://localhost:8083; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # WebSocket配置 location /ws { proxy_pass http://localhost:8083; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } ``` ### 5. 访问系统 - **系统地址**：http://localhost:8080 - **默认账号**：admin / 123 --- ## 🔧 配置文件说明 ### Vite 配置 (vite.config.ts) ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vite.dev/config/ export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { '/api': { target: 'http://localhost:8083', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, '/ws': { target: 'ws://localhost:8083', ws: true, changeOrigin: true } } } }) ``` ### 路由配置 (router/index.ts) 基于 Vue Router 4 实现路由管理，支持路由懒加载和权限控制。 ### API 服务 (services/) 统一管理 API 请求，包括 Axios 配置、请求拦截器、响应拦截器等。 --- ## 🎯 开发流程 ### 1. 克隆代码 ```bash git clone https://gitee.com/zhousir03/harmonyhr-cloud-admin.git cd harmonyhr-cloud-admin ``` ### 2. 安装依赖 ```bash npm install ``` ### 3. 启动开发服务器 ```bash npm run dev ``` ### 4. 代码开发 - 遵循 Vue 3 组件开发规范 - 使用 TypeScript 进行类型定义 - 组件命名采用 PascalCase 格式 - 页面组件放置在 `views` 目录下 - 公共组件放置在 `components` 目录下 ### 5. 代码检查 ```bash # 类型检查 npx vue-tsc # 代码格式化 npx prettier --write . ``` ### 6. 提交代码 ```bash # 添加修改 git add . # 提交代码 git commit -m "feat: 添加新功能" # 推送代码 git push origin master ``` --- ## 🔧 性能优化 ### 1. 前端加载优化 - **路由懒加载**：减少初始加载时间 - **组件按需加载**：仅加载使用的组件 - **图片优化**：使用适当尺寸的图片，支持 WebP 格式 - **资源压缩**：开启 Gzip 压缩 - **CDN 加速**：静态资源使用 CDN 加速 ### 2. 代码优化 - **组件拆分**：将复杂组件拆分为多个子组件 - **避免不必要的渲染**：使用 `v-once`、`v-memo` 等指令 - **合理使用 computed 和 watch**：避免不必要的计算 - **事件委托**：减少事件监听器数量 ### 3. 缓存策略 - **HTTP 缓存**：合理设置缓存头 - **本地存储**：使用 localStorage 缓存不常变化的数据 - **Pinia 状态持久化**：关键状态持久化存储 --- ## 📄 开源协议 本项目遵循 MIT 开源协议，您可以自由使用、修改和分发本项目。 --- ## 🤝 贡献指南 欢迎提交 Issue 和 Pull Request！ 1. Fork 本仓库 2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交您的更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 打开一个 Pull Request --- ## 📞 联系方式 - **作者**：全能技术师 - **QQ**：2531219451 - **Gitee**：https://gitee.com/zhousir03 - **博客**：https://blog.csdn.net/qq_60870118 如有问题或建议，欢迎通过以上方式联系我！ ---⭐ 如果这个项目对您有帮助，请给一个 Star 支持一下！