# voa

**Repository Path**: zuesz/voa

## Basic Information

- **Project Name**: voa
- **Description**: 基于 Vue 3 + TypeScript + Element Plus 的企业级办公自动化（OA）系统，包含员工管理、招聘管理、考勤管理、数据看板等核心模块，支持多角色权限控制、暗色主题、国际化、AI 智能提醒等特性。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-03
- **Last Updated**: 2026-07-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# VOA 办公自动化系统

基于 Vue 3 + TypeScript + Element Plus 的企业级办公自动化（OA）系统，包含员工管理、招聘管理、考勤管理、数据看板等核心模块，支持多角色权限控制、暗色主题、国际化、AI 智能提醒等特性。

![项目演示](./src/assets/voa.gif)

## 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.2.37 | 渐进式 JavaScript 框架 |
| TypeScript | 4.4.3 | 类型安全的 JavaScript 超集 |
| Element Plus | 2.11.8 | 基于 Vue 3 的企业级组件库 |
| Vue Router | 4.0.12 | 官方路由管理器（Hash 模式） |
| Vuex | 4.0.2 | 集中式状态管理 |
| Vue-i18n | 9.14.5 | 国际化方案 |
| ECharts (vue3-echarts) | 1.1.0 | 数据可视化图表 |
| Vite | 2.6.4 | 下一代前端构建工具 |
| Axios | 0.24.0 | HTTP 请求库 |
| xlsx | 0.18.5 | Excel 导入导出 |
| SASS | 1.44.0 | CSS 预处理器 |

## 功能模块

### 1. 首页看板（Dashboard）
- 日程安排管理（创建、编辑、状态筛选）
- 待办事项管理
- 通知公告展示
- 日历视图（日期选择器标记）
- 全局 AI 智能提醒通知

### 2. 个人信息（Profile）
- 用户信息展示与编辑
- 头像管理
- 个人资料维护

### 3. 员工管理
- **员工信息列表（Home）**：搜索筛选（姓名/职位）、部门筛选、状态筛选（在职/试用/离职）、分页展示、新增员工、批量导入、CSV 导出
- **员工统计概览（General）**：最近生日人员、合同到期人员、试用期到期人员、在职员工性别比例（饼图）、在职员工学历分布（柱状图）

### 4. 招聘管理
- **招聘信息管理（Recruit）**：招聘岗位发布与管理、状态筛选与分页
- **应聘者管理（Apply）**：应聘者信息录入与管理、简历状态跟踪

### 5. 考勤管理
- **考勤打卡（Clocking）**：打卡记录管理、分页展示、数据导出
- **签到管理（Sign）**：签到信息管理、状态追踪

### 6. AI 智能助手
- 全局 AI 聊天窗口组件
- 智能提醒与通知推送
- 基于角色上下文的辅助建议

## 角色权限

| 角色 | 说明 | 可访问模块 |
|------|------|------------|
| admin | 超级管理员 | 所有模块 |
| hr_manager | 人力资源经理 | 员工管理、招聘管理、考勤管理、个人信息 |
| dept_manager | 部门经理 | 员工管理、考勤管理、个人信息 |
| staff | 普通员工 | 个人信息 |

### 预设账号

| 账号 | 密码 | 用户名 | 角色 |
|------|------|--------|------|
| admin | 123456 | 超级管理员 | 超级管理员 |
| hr | 123456 | 张经理 | 人力资源经理 |
| dept | 123456 | 李总监 | 部门经理 |
| user | 123456 | 小王 | 普通员工 |
| finance | 123456 | 陈会计 | 普通员工（财务部） |
| sales | 123456 | 赵销售 | 普通员工（销售部） |

## 模拟数据系统

系统内置完整的模拟数据生成机制，开箱即用，无需后端服务。

### 数据生成规则
- 所有数据在工作日生成（排除周六、周日）
- 法定节假日不生成数据
- 时间格式统一为 `YYYY-MM-DD HH:mm:ss`
- 首次访问时自动初始化各模块模拟数据
- 数据存储于 `localStorage`，页面刷新时自动加载

## 快速开始

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```
服务默认运行在 http://localhost:4000

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run serve
```

## 项目结构

```
├── public/
│   └── public.css           # 全局公共样式
├── src/
│   ├── api/                 # API 接口层
│   ├── assets/              # 静态资源（图片等）
│   ├── layout/              # 布局组件
│   │   ├── login.vue        # 登录页
│   │   ├── header.vue       # 头部导航（主题/语言/全屏）
│   │   ├── menu.vue         # 侧边栏菜单
│   │   ├── navMenu.vue      # 导航菜单组件
│   │   ├── index.vue        # 主布局框架
│   │   └── children.vue     # 子路由容器
│   ├── router/
│   │   └── index.ts         # 路由配置
│   ├── store/
│   │   └── index.ts         # Vuex 状态管理
│   ├── utils/
│   │   ├── mockData.ts      # 模拟数据生成系统
│   │   ├── permission.ts    # 路由守卫（登录/权限验证）
│   │   ├── userPermissions.ts # 用户角色与权限配置
│   │   ├── aiNotifications.ts # AI 智能通知
│   │   ├── i18n.ts          # 国际化配置
│   │   ├── axios.ts         # HTTP 请求封装
│   │   ├── index.ts         # 工具函数集合
│   │   ├── validate.js      # 表单验证规则
│   │   ├── openWindow.js    # 窗口操作工具
│   │   └── loadView.ts      # 动态视图加载
│   ├── views/
│   │   ├── Dashboard.vue    # 首页看板（日程/待办/通知）
│   │   ├── Profile.vue      # 个人信息
│   │   ├── Home.vue         # 员工信息列表
│   │   ├── General.vue      # 员工统计概览
│   │   ├── Recruit.vue      # 招聘管理
│   │   ├── Apply.vue        # 应聘者管理
│   │   ├── Clocking.vue     # 考勤打卡
│   │   ├── Sign.vue         # 签到管理
│   │   ├── AiChatWindow.vue # AI 聊天窗口
│   │   └── 404.vue          # 404 页面
│   ├── App.vue              # 根组件
│   └── main.ts              # 应用入口
├── index.html
├── vite.config.ts           # Vite 配置（别名/代理/压缩）
├── tsconfig.json
└── package.json
```

## 环境配置

| 文件 | 用途 |
|------|------|
| `.env.development` | 开发环境配置（API: http://localhost:8080） |
| `.env.production` | 生产环境配置 |

## 特色功能

- **暗色模式**：支持一键切换亮色/暗色主题
- **主题色定制**：可自定义全局主色调
- **国际化**：内置多语言支持（Element Plus 语言包集成）
- **Gzip 压缩**：生产构建自动压缩静态资源
- **路由权限**：基于角色的路由守卫，未授权自动重定向
- **记住密码**：登录页支持记住账号密码

## 浏览器兼容性

- Chrome >= 60
- Firefox >= 60
- Safari >= 12
- Edge >= 79

## 致谢

本项目初始源代码来源于《Vue.js 3.x + Element Plus 从入门到项目实践》（清华大学出版社）第 15 章的内容。在原书示例的基础上进行了功能扩展、架构优化和企业级特性增强。

## 许可证

[MIT](LICENSE)