# 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
新增
操作
```
## 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` - 审批请假