🚀 招聘简历筛选系统项目

🌟 项目介绍

项目名称和简介

本项目是一个功能强大的招聘管理系统，旨在帮助企业高效地进行岗位管理、简历筛选、候选人管理以及数据分析，简化招聘流程，提高招聘效率。

核心功能特性

智能岗位管理：轻松创建、编辑、暂停、恢复和删除招聘岗位，实时跟踪岗位状态和简历处理进度。
AI 简历筛选：利用 AI 技术对简历进行智能筛选，根据预设的评分标准快速筛选出符合要求的候选人。
候选人管理：全面管理候选人信息，查看候选人简历、AI 分析报告，对候选人进行标记和面试邀请。
数据分析面板：提供直观的招聘数据统计和分析，包括总岗位数、总候选人数、已面试人数、岗位招聘表现等，帮助企业了解招聘效果。

技术亮点

现代化 UI 设计：采用 Tailwind CSS 和 Lucide Vue Next 图标库，打造简洁美观、响应式的用户界面。
高性能动画：使用 @vueuse/motion 库实现流畅的动画效果，提升用户体验。
移动端优化：确保在移动端设备上也能提供良好的使用体验。
TypeScript 支持：使用 TypeScript 进行开发，提高代码的可维护性和可靠性。

🛠️ 技术栈详情

前端框架

Vue 3：渐进式 JavaScript 框架，用于构建用户界面。
TypeScript：JavaScript 的超集，提供静态类型检查，增强代码的可维护性。
Vite：快速的构建工具，提供高效的开发体验。

UI 样式

Tailwind CSS：实用类优先的 CSS 框架，可快速构建自定义的用户界面。
Lucide Vue Next：基于 Vue 3 的图标库，提供丰富的图标资源。
@vueuse/motion：用于实现高性能动画效果的 Vue 组合式函数库。

状态管理

Pinia：Vue.js 的轻量级状态管理库，提供简单、可扩展的状态管理解决方案。

开发工具

Vue TSC：Vue 3 的 TypeScript 编译器，用于类型检查和代码生成。
PostCSS：用 JavaScript 编写的工具，用于将 CSS 转换为另一种 CSS。
Autoprefixer：PostCSS 的插件，用于自动添加浏览器前缀。

📖 完整的使用指南

环境要求和安装步骤

环境要求：确保已经安装了 Node.js（版本 >= 14）和 npm（版本 >= 6）。

安装步骤：

克隆项目仓库：
```
git clone <项目仓库地址>
```
进入项目目录：
```
cd <项目目录名>
```
安装依赖：
```
npm install
```

开发、构建、预览命令

开发模式：启动开发服务器，监听文件变化并实时更新：
```
npm run dev
```
构建项目：生成生产环境的静态文件：
```
npm run build
```
预览构建结果：在本地预览生产环境的构建结果：
```
npm run preview
```

详细的项目结构说明

src/
├── components/       # 组件目录
│   ├── CandidateDetailModal.vue  # 候选人详情模态框组件
│   ├── JobCard.vue               # 岗位卡片组件
│   ├── JobCreatorModal.vue       # 岗位创建模态框组件
│   ├── JobDetailModal.vue        # 岗位详情模态框组件
│   ├── JobEditModal.vue          # 岗位编辑模态框组件
│   └── BottomNavigation.vue      # 底部导航栏组件
├── views/          # 视图目录
│   ├── JobManagementView.vue     # 岗位管理视图
│   ├── CandidateView.vue         # 候选人管理视图
│   └── DashboardView.vue         # 数据面板视图
├── stores/         # 状态管理目录
│   └── jobStore.ts               # 岗位状态管理文件
├── App.vue         # 根组件
├── style.css       # 全局样式文件
└── vite-env.d.ts   # Vite环境类型声明文件

核心功能使用说明

岗位管理

创建岗位：在岗位管理页面，点击 “创建新岗位” 按钮，填写岗位信息，包括岗位名称、部门、工作地点、岗位描述和 AI 筛选评分标准，点击 “保存” 即可创建新岗位。
查看岗位详情：在岗位卡片上点击 “查看详情” 按钮，弹出岗位详情模态框，可查看岗位的基础信息、岗位描述、招聘统计和 AI 筛选评分标准。
编辑岗位：在岗位卡片上点击 “编辑岗位” 按钮，弹出岗位编辑模态框，可修改岗位信息，修改完成后点击 “保存” 即可更新岗位信息。
暂停 / 恢复招聘：在岗位卡片上点击 “暂停招聘” 或 “恢复招聘” 按钮，可暂停或恢复该岗位的招聘。
删除岗位：在岗位卡片的下拉菜单中点击 “删除岗位” 按钮，确认删除后即可删除该岗位。

候选人管理

筛选候选人：在候选人管理页面，使用筛选器筛选候选人，可根据状态和岗位进行筛选。
查看候选人详情：点击候选人卡片，弹出候选人详情模态框，可查看候选人的基本信息、简历原文、AI 分析报告和待考察点。
标记候选人状态：在候选人详情模态框中，点击 “通过”、“拒绝” 或 “发送面试邀请” 按钮，可标记候选人的状态。

数据面板

在数据面板页面，可查看招聘数据统计和分析，包括总岗位数、总候选人数、已面试人数、岗位招聘表现等。

💎 设计特色

响应式设计理念

本项目采用响应式设计理念，确保在不同设备上都能提供良好的用户体验。使用 Tailwind CSS 的响应式类，根据设备屏幕宽度自动调整布局和样式。

动画效果实现

使用 @vueuse/motion 库实现高性能动画效果，如页面切换动画、卡片出现动画和数字滚动动画等，提升用户体验。

现代化 UI 特点

简洁美观：采用简洁的设计风格，去除多余的元素，使界面更加清晰易读。
色彩搭配：使用明亮、柔和的色彩搭配，营造舒适的视觉效果。
图标使用：使用 Lucide Vue Next 图标库，提供丰富的图标资源，增强界面的可读性和交互性。

⚙️ 配置和部署

各种配置文件说明

vite.config.ts：Vite 的配置文件，用于配置项目的构建和开发选项。
tsconfig.json：TypeScript 的配置文件，用于配置 TypeScript 编译器的选项。
postcss.config.js：PostCSS 的配置文件，用于配置 PostCSS 插件。
tailwind.config.js：Tailwind CSS 的配置文件，用于配置 Tailwind CSS 的选项。

静态部署和服务器部署选项

静态部署：将dist目录下的静态文件部署到静态文件服务器，如 GitHub Pages、Netlify 等。
服务器部署：将项目部署到服务器上，如 Node.js 服务器、Nginx 服务器等。

README.md 6.9 KB 文件歷史 原始文件