# GenesFirstFrontend

**Repository Path**: whalec3/genes-first-frontend

## Basic Information

- **Project Name**: GenesFirstFrontend
- **Description**: 基因一重组前端仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-13
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# genes-first-frontend

HRMS 人力资源管理系统 — 前端

## 技术栈

| 分类 | 选型 | 版本 |
|------|------|------|
| UI 框架 | React | 18.3.1 |
| 构建工具 | Vite | 5.4.11 |
| 语言 | TypeScript | 5.6.3 |
| 路由 | react-router-dom | 6.28.0 |
| UI 组件库 | antd | 5.22.0 |
| 图标 | @ant-design/icons | 5.5.2 |
| 状态管理 | Zustand | 4.5.5 |
| HTTP | Axios | 1.7.9 |
| 日期 | dayjs | 1.11.13 |
| 图表 | @antv/g2 | 5.2.11 |
| 路由进度条 | nprogress | 0.2.0 |
| 代码规范 | ESLint + Prettier | — |

## 快速开始

```bash
# 安装依赖（自动初始化 husky）
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

## Docker 与容器化基建

本项目为纯开发环境提供了极简的容器化方案：

- **`Dockerfile.dev`**：**开发环境镜像**。基于 Node 镜像，用于在容器内部署开发环境。它会挂载本地源码目录，完美支持 Vite 的热更新（HMR），让你可以在不配置本地 Node 环境的情况下进行开发。
- **`docker-compose.yml`**：**开发环境编排服务**。定义了 `hrms-dev` 服务。一行命令即可拉起应用，无需手动敲击繁琐的 `docker run` 参数。
- **`.dockerignore`**：类似于 `.gitignore`，在构建镜像时排除本地的 `node_modules` 和 `.git` 等无用大文件，提升镜像构建速度。

**常用命令：**
```bash
# 一键拉起开发环境（支持代码修改热更新）
docker compose up hrms-dev
```

## Git 提交规范

```bash
# 交互式提交（推荐）
npx cz

# 或手动按规范格式
git commit -m "feat: 新增×××功能"
git commit -m "fix: 修复×××问题"
```

| type | 说明 |
|------|------|
| feat | 新功能 |
| fix | 修复 bug |
| docs | 文档变更 |
| style | 代码格式 |
| refactor | 重构 |
| perf | 性能优化 |
| test | 测试 |
| chore | 构建/工具变动 |
| revert | 回退 |
| build | 打包 |

提交时 husky 会自动校验格式，不符合规范的会被拒绝。

## 生成 CHANGELOG

```bash
npm run changelog
```

## 目录结构

```
hrms-web/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/                          # 静态资源
│   ├── components/                       # 通用组件
│   │   ├── AuthGuard/                    # 路由鉴权守卫
│   │   ├── PageLoading/                  # 骨架屏加载
│   │   ├── ErrorBoundary/                # 错误边界（全局 + 页面级）
│   │   ├── ErrorPage/                    # 403/404/500 兜底页
│   │   ├── SensitiveText/               # 敏感字段脱敏展示
│   │   ├── FieldPermission/             # 字段权限控制包装
│   │   ├── StatusTag/                   # 状态标签（枚举驱动）
│   │   ├── CountdownButton/             # 防重复点击按钮
│   │   ├── FileUpload/                  # 文件上传（MinIO，含签名URL刷新）
│   │   ├── EmployeeSelect/              # 员工搜索选择器
│   │   ├── DepartmentTreeSelect/        # 部门树选择器
│   │   └── Layout/                      # 布局组件
│   │       ├── AppLayout.tsx            # 主布局
│   │       ├── Sidebar.tsx              # 动态侧边栏
│   │       ├── Header.tsx               # 顶栏（通知红点、用户菜单）
│   │       └── Breadcrumb.tsx           # 面包屑
│   ├── hooks/                           # 自定义 Hooks
│   │   ├── useAuth.ts                   # 登录态
│   │   ├── usePermission.ts            # 权限校验
│   │   ├── useFieldPermission.ts       # 字段权限
│   │   ├── useRequest.ts               # 通用请求 Hook
│   │   ├── usePagination.ts            # 分页
│   │   ├── useDebounce.ts              # 防抖（默认 300ms）
│   │   ├── useThrottle.ts              # 节流
│   │   ├── usePolling.ts               # 通用轮询
│   │   ├── useFormDraft.ts             # 表单草稿持久化
│   │   └── useNetworkStatus.ts         # 网络状态检测
│   ├── stores/                          # Zustand
│   │   ├── authStore.ts                 # 用户登录态
│   │   ├── menuStore.ts                 # 菜单/路由
│   │   ├── permissionStore.ts           # 权限配置
│   │   └── notificationStore.ts         # 未读通知数
│   ├── services/                        # API 服务层
│   │   ├── request.ts                   # Axios 实例 + 拦截器
│   │   ├── auth.ts                      # 认证：login/logout/captcha/password
│   │   ├── employee.ts                  # 员工档案 CRUD + 导入导出 + 变更历史
│   │   ├── department.ts               # 部门树 + 部门 CRUD + 人数统计
│   │   ├── position.ts                  # 职位 CRUD
│   │   ├── role.ts                      # 角色 CRUD
│   │   ├── permission.ts               # 权限配置 + 用户角色
│   │   ├── menu.ts                      # 菜单树 + 菜单 CRUD
│   │   ├── approval.ts                 # 审批：待办/已办/操作/委托/批量/催办
│   │   ├── lifecycle.ts                # 入转调离：入职/转正/调岗/离职
│   │   ├── attendance.ts               # 考勤：打卡/请假/补卡/加班/统计/考勤组
│   │   ├── salary.ts                    # 薪资：账套/批次/核算/工资条
│   │   ├── profile.ts                   # 个人中心聚合接口
│   │   ├── file.ts                      # 文件上传/删除/签名刷新
│   │   └── notification.ts             # 通知列表/未读数/已读/全部已读
│   ├── views/                           # 页面组件
│   │   ├── login/                       # 登录页
│   │   ├── dashboard/                   # 首页仪表盘（按角色渲染）
│   │   ├── employee/                    # 员工档案：列表/详情/导入/变更历史
│   │   ├── organization/               # 组织架构：部门树/职位管理
│   │   ├── permission/                  # 权限体系：角色/用户角色/数据权限/字段权限
│   │   ├── approval/                    # 审批中心：待办/已办/详情/委托
│   │   ├── mobility/                    # 入转调离：入职/转正/调岗/离职
│   │   ├── attendance/                  # 考勤：打卡/请假/补卡/加班/统计/考勤组
│   │   ├── salary/                      # 薪资：账套/批次/预览/员工设置/工资条
│   │   └── profile/                     # 个人中心：我的档案/考勤/请假/薪资/安全
│   ├── router/                          # 路由
│   │   ├── index.tsx                    # 入口（动态路由 + 静态路由合并）
│   │   ├── staticRoutes.tsx             # 静态路由：/login, /403, /404, /500
│   │   └── dynamicRoutes.ts            # 菜单树 -> React Router 转换
│   ├── utils/                           # 工具
│   │   ├── constants.ts                 # 全量枚举映射（对齐后端附录）
│   │   ├── storage.ts                   # sessionStorage 封装
│   │   ├── permission.ts               # 权限校验纯函数
│   │   ├── format.ts                    # 日期/金额/脱敏/文件大小格式化
│   │   ├── validate.ts                  # 手机号/身份证/密码/文件格式校验
│   │   └── xss.ts                       # XSS 过滤（富文本白名单）
│   ├── types/                           # TypeScript 类型
│   │   ├── api.ts                       # 通用响应/分页
│   │   ├── employee.ts                  # 员工
│   │   ├── approval.ts                  # 审批
│   │   ├── attendance.ts               # 考勤
│   │   ├── salary.ts                    # 薪资
│   │   └── common.ts                    # 通用
│   ├── App.tsx
│   └── main.tsx
├── .env.development       # 开发：VITE_API_BASE_URL=/api
├── Dockerfile.dev         # 开发镜像（源码挂载）
├── docker-compose.yml     # 多环境编排
├── .dockerignore
├── .gitignore
├── vite.config.ts
├── tsconfig.json
├── commitlint.config.cjs  # 提交格式校验
├── .cz-config.cjs         # commitizen 交互模板
├── .eslintrc.cjs
├── .prettierrc
└── package.json
```