170 lines
6.3 KiB
Markdown
170 lines
6.3 KiB
Markdown
# f9-web-ai-test
|
||
|
||
企业级 RBAC 权限管理系统
|
||
|
||
一个基于 .NET 8 分层架构 + Vue 3 + Element Plus 的企业内部管理系统，采用经典的面包屑后台布局，实现完整的 RBAC（基于角色的访问控制）权限体系。
|
||
|
||
## 技术栈
|
||
|
||
- **后端**：.NET 8（分层架构）+ NSwag（OpenAPI 文档）
|
||
- **前端**：Vue 3 + Vite + Element Plus + Pinia + Vue Router（绿色主题）
|
||
- **数据库**：SQLite（EF Core）
|
||
- **认证**：JWT 双令牌（access token + refresh token）+ BCrypt 密码加密
|
||
- **API 客户端**：NSwag 自动生成 TypeScript 客户端（`src/api/client.ts`）
|
||
|
||
## 后端分层架构
|
||
|
||
```
|
||
backend/
|
||
├── F9WebAiTest.Domain/ # 实体层
|
||
│ ├── Common/ # 基类 + 仓储接口 IRepository
|
||
│ └── Entities/ # 实体（部门/职工/角色/菜单/关联/日志）
|
||
├── F9WebAiTest.Infrastructure/ # 仓储实现层
|
||
│ ├── Data/ # DbContext + 种子数据
|
||
│ └── Repositories/ # Repository 通用实现
|
||
├── F9WebAiTest.Application/ # 服务层
|
||
│ ├── Common/ # ApiResult / ServiceException
|
||
│ ├── Dtos/ # 数据传输对象
|
||
│ └── Services/ # 业务逻辑（认证/部门/职工/角色/菜单）
|
||
└── F9WebAiTest.Api/ # 表示层（Web API 控制器）
|
||
```
|
||
|
||
依赖方向：`Api → Application → Domain ← Infrastructure`
|
||
|
||
## RBAC 核心功能
|
||
|
||
| 模块 | 说明 |
|
||
|------|------|
|
||
| 认证登录 | JWT 登录、动态菜单、权限标识下发 |
|
||
| 部门管理 | 树形部门结构、负责人、子部门、排序 |
|
||
| 职工管理 | 职工增删改查、分页搜索、分配角色、重置密码 |
|
||
| 角色管理 | 角色增删改查、菜单权限分配（树形勾选） |
|
||
| 菜单管理 | 目录/菜单/按钮三级，动态路由、权限标识 |
|
||
| 权限控制 | 动态路由 + 按钮级权限指令 v-permission |
|
||
| 考勤打卡 | 上班签到/下班签退，迟到/早退自动判定 |
|
||
| 我的考勤 | 个人考勤记录 + 月度统计（出勤/迟到/早退/缺勤/请假） |
|
||
| 请假管理 | 请假申请、审批（批准/驳回）、多类型（事假/病假/年假等） |
|
||
| 考勤记录 | 管理员按日期/部门/姓名查询全员考勤 |
|
||
| 工艺庄口 | 庄口基础数据（年度/本地外地/基地外购/产地等） |
|
||
| 生丝规格 | 规格指标（中心范围/野纤/内控/劳动竞赛等上下限） |
|
||
| 生丝定级指标 | 等级指标（厂标/国标/个人，偏差/大差/清洁/洁净等） |
|
||
| 机组车台 | 车间机组与车台号配置 |
|
||
|
||
## 数据模型关系
|
||
|
||
```
|
||
Department (部门) 1 ── N Employee (职工)
|
||
Employee (职工) N ── N Role (角色) via EmployeeRole
|
||
Role (角色) N ── N Menu (菜单) via RoleMenu
|
||
Menu (菜单) 自引用树形（目录/菜单/按钮）
|
||
```
|
||
|
||
## 启动方式
|
||
|
||
### 1. 启动后端
|
||
|
||
```bash
|
||
cd backend/F9WebAiTest.Api
|
||
dotnet run
|
||
```
|
||
|
||
后端运行在 `http://localhost:3000`，Swagger 文档 `http://localhost:3000/swagger`。
|
||
|
||
### 2. 启动前端
|
||
|
||
```bash
|
||
cd web
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
前端运行在 `http://localhost:5173`，已配置代理 `/api` 转发到后端。
|
||
|
||
### 3. 生成 API 客户端（NSwag）
|
||
|
||
后端运行时，用 NSwag 从 OpenAPI 文档自动生成 TypeScript 客户端：
|
||
|
||
```bash
|
||
# 先安装 NSwag CLI 工具（只需一次）
|
||
dotnet tool install --global NSwag.ConsoleCore
|
||
|
||
# 生成 TypeScript 客户端到 src/api/client.ts
|
||
cd web
|
||
npm run gen:api
|
||
```
|
||
|
||
生成的 `src/api/client.ts` 包含所有 DTO 类型和 API 方法，类型安全地调用后端接口。
|
||
|
||
### 3. 访问系统
|
||
|
||
打开 `http://localhost:5173`
|
||
|
||
**默认账号**：`admin` / `123456`（超级管理员，拥有全部权限）
|
||
|
||
## 前端目录结构
|
||
|
||
```
|
||
web/src/
|
||
├── layout/index.vue # 主布局（侧边栏 + 面包屑 + 内容区）
|
||
├── router/index.js # 路由 + 动态路由构建
|
||
├── store/user.js # 用户状态（Pinia）
|
||
├── directives/permission.js # 权限指令 v-permission
|
||
├── utils/request.js # axios 封装（拦截器）
|
||
└── views/
|
||
├── login/ # 登录页
|
||
├── dashboard/ # 首页
|
||
└── system/
|
||
├── department/ # 部门管理
|
||
├── employee/ # 职工管理
|
||
├── role/ # 角色管理（含菜单分配）
|
||
├── menu/ # 菜单管理
|
||
└── log/ # 操作日志
|
||
```
|
||
|
||
## 权限使用示例
|
||
|
||
```vue
|
||
<!-- 按钮级权限控制 -->
|
||
<el-button v-permission="'system:user:add'">新增</el-button>
|
||
|
||
<!-- 多权限任一满足 -->
|
||
<el-button v-permission="['system:user:add', 'system:user:edit']">操作</el-button>
|
||
```
|
||
|
||
## API 接口
|
||
|
||
- `POST /api/auth/login` - 登录（返回 access token + refresh token）
|
||
- `POST /api/auth/refresh` - 刷新令牌（用 refresh token 换新 access token）
|
||
- `POST /api/auth/logout` - 退出（撤销 refresh token）
|
||
- `GET /api/auth/me` - 当前用户信息
|
||
- `GET /api/auth/menus` - 用户菜单树
|
||
- `GET /api/auth/permissions` - 用户权限标识
|
||
- `PUT /api/auth/password` - 修改密码
|
||
- `PUT /api/auth/profile` - 更新资料
|
||
- `GET /api/department/tree` - 部门树
|
||
- `POST /api/department` - 新增部门
|
||
- `PUT /api/department/:id` - 更新部门
|
||
- `DELETE /api/department/:id` - 删除部门
|
||
- `GET /api/employee` - 职工分页
|
||
- `POST /api/employee` - 新增职工
|
||
- `PUT /api/employee/:id` - 更新职工
|
||
- `DELETE /api/employee/:id` - 删除职工
|
||
- `PUT /api/employee/:id/password` - 重置密码
|
||
- `GET /api/role` - 角色列表
|
||
- `GET /api/role/:id/menus` - 角色菜单
|
||
- `POST /api/role` - 新增角色
|
||
- `PUT /api/role/:id` - 更新角色
|
||
- `DELETE /api/role/:id` - 删除角色
|
||
- `GET /api/menu/tree` - 菜单树
|
||
- `POST /api/menu` - 新增菜单
|
||
- `PUT /api/menu/:id` - 更新菜单
|
||
- `DELETE /api/menu/:id` - 删除菜单
|
||
- `POST /api/attendance/punch` - 打卡（签到/签退）
|
||
- `GET /api/attendance/my` - 我的考勤记录
|
||
- `GET /api/attendance/my/summary` - 我的考勤统计
|
||
- `GET /api/attendance` - 全员考勤记录（管理员）
|
||
- `POST /api/attendance/leave` - 申请请假
|
||
- `GET /api/attendance/leave/my` - 我的请假
|
||
- `GET /api/attendance/leave` - 全部请假（管理员）
|
||
- `PUT /api/attendance/leave/:id/approve` - 审批请假
|