# job-frontend

**Repository Path**: happy_source/job-frontend

## Basic Information

- **Project Name**: job-frontend
- **Description**: agent 智能招聘系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-06-20
- **Last Updated**: 2026-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 知了课堂

## README

# 智能招聘系统 · HR Frontend

基于 Vue 3 + TypeScript + Vite 构建的智能招聘管理前端,涵盖职位发布、候选人简历解析与 AI 评分、面试流转、员工与 HR 管理等核心流程。

## 技术栈

| 类别 | 技术 |
| --- | --- |
| 框架 | Vue 3.5 (`<script setup>`) + TypeScript |
| 构建工具 | Vite 8 |
| UI 组件 | Element Plus + TailwindCSS 4 |
| 状态管理 | Pinia |
| 路由 | Vue Router |
| HTTP | Axios(统一封装,自动注入 Token) |
| 图表 | ECharts 6 |
| 代码规范 | ESLint + oxlint + Prettier |

## 功能模块

- **登录 / 注册** —— 邮箱密码登录,注册需邀请码(`is_superuser` 邀请生成)
- **首页 Dashboard** —— 近 7 天候选人趋势图表
- **职位管理** —— 创建 / 删除职位,按部门筛选
- **候选人管理** —— 简历上传、OCR 异步解析、AI 综合评分(工作经验 / 技术能力 / 软技能 / 学历 / 项目经验)、状态流转(投递 → AI 筛选 → 面试 → 入职 / 拒绝)
- **员工管理** —— 在职员工列表
- **HR 管理** —— 仅超管可见,为 HR 分配负责部门
- **设置** —— 钉钉账号授权绑定、简历查看 Token 等

## 目录结构

```
src/
├── apis/                # 接口封装(基于统一 HttpRequest)
│   ├── request.ts       # axios 实例 + 拦截器(注入 Bearer Token)
│   ├── user_api.ts      # 登录 / 注册 / 用户 / 部门 / HR
│   ├── position_api.ts  # 职位
│   ├── candidate_api.ts # 候选人 / 简历解析 / AI 评分
│   └── dashboard_api.ts # 首页统计
├── components/          # AuthLayout / MainLayout(侧边栏 + 顶栏)
├── pages/               # 路由页面(按模块分目录)
│   ├── login/ register/ dashboard/ positions/
│   ├── candidates/ employees/ hr-management/ settings/
├── router/              # 路由配置(嵌套于 MainLayout)
├── stores/              # Pinia(user / counter)
├── utils/               # fullLoading 等工具
├── App.vue
├── main.ts
└── index.css            # TailwindCSS 入口
```

## 环境要求

- Node `^22.18.0 || >=24.12.0`(见 `package.json` `engines`)

## 快速开始

```shell
# 安装依赖
npm install

# 启动开发服务器(默认 http://localhost:5173)
npm run dev
```

### 环境变量

- 开发环境 `.env.development`:`VITE_API_BASE_URL = "http://localhost:8000"`,开发服务器直连本地后端。
- 生产环境 `.env.production`:`VITE_API_BASE_URL = "/api"`,走同源相对路径,由容器内 Nginx 反代到后端——浏览器始终与前端同源,**无需后端 CORS**。后端真实地址在容器运行时注入(见下文[生产环境部署](#生产环境部署)),不在构建期固化。

## 可用脚本

| 脚本 | 说明 |
| --- | --- |
| `npm run dev` | 启动 Vite 开发服务器 |
| `npm run build` | 类型检查 + 生产构建 |
| `npm run preview` | 预览构建产物 |
| `npm run type-check` | `vue-tsc` 类型检查 |
| `npm run lint` | oxlint + eslint 自动修复 |
| `npm run format` | Prettier 格式化 `src/` |

## 生产环境部署

前端用同源相对路径 `/api` 访问后端,由容器内 Nginx 反向代理转发并去掉 `/api` 前缀。浏览器始终与前端同源,**无需后端开启 CORS**;后端真实地址在容器运行时通过 `BACKEND_URL` 注入,切换后端无需重新构建。

```
浏览器  →  /api/user/login  →  Nginx(80)  去掉 /api/  →  后端 /user/login
```

> 后端接口(`/user`、`/position`、`/candidate`、`/dashboard`)本身无 `/api` 前缀,Nginx 的 `proxy_pass` 末尾带 `/` 实现 strip,正好对上。

### 1. 构建镜像

```shell
docker build -t hr-frontend:1.0.0 .
```

构建期前端 baseURL 固定为 `/api`,不依赖任何后端地址。

### 2. 运行容器

```shell
# 默认:后端跑在宿主机 8000(macOS/Windows Docker Desktop 支持 host.docker.internal)
docker run -d \
  --name hr-frontend \
  -p 80:80 \
  -e BACKEND_URL=http://host.docker.internal:8000 \
  --restart unless-stopped \
  hr-frontend:1.0.0
```

- 切换后端地址(无需重新 build):`-e BACKEND_URL=http://192.168.1.10:8000`
- 后端在同网络另一个容器:`-e BACKEND_URL=http://backend:8000`
- **Linux** 上 `host.docker.internal` 默认不可用,需加 `--add-host=host.docker.internal:host-gateway`,或直接用 `-e BACKEND_URL` 指定真实地址。

最终镜像 ≈ 12–15MB(`nginx:alpine` + 静态产物),构建细节见 [Dockerfile](Dockerfile),Nginx 配置见 [nginx.conf](nginx.conf)。

### 3. 备选:纯静态托管

`npm run build` 产物位于 `dist/`,可直接上传到对象存储 / CDN(阿里云 OSS、Cloudflare Pages 等),无需 Docker、成本更低。此方案下前端直连后端、不再经过 Nginx 反代,**需要**:

- 构建前把 `.env.production` 的 `VITE_API_BASE_URL` 改为后端真实地址(如 `https://api.example.com`);
- 后端开启 CORS 放行前端域名。

## 说明

- 登录态与 Token 持久化在 `localStorage`,由 `src/stores/user.ts` 统一管理;未登录访问主路由会自动跳转 `/login`。
- 接口请求统一走 `src/apis/request.ts`,已自动携带 `Authorization: Bearer <token>`,业务层只需调用封装好的 `get/post/patch/upload` 等方法。
- 候选人简历解析为异步任务(上传 → 触发解析 → 轮询任务状态),见 `candidate_api.ts`。