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. 启动后端

cd backend/F9WebAiTest.Api
dotnet run

后端运行在 http://localhost:3000，Swagger 文档 http://localhost:3000/swagger。

2. 启动前端

cd web
npm install
npm run dev

前端运行在 http://localhost:5173，已配置代理 /api 转发到后端。

3. 生成 API 客户端（NSwag）

后端运行时，用 NSwag 从 OpenAPI 文档自动生成 TypeScript 客户端：

# 先安装 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/               # 操作日志

权限使用示例

<!-- 按钮级权限控制 -->
<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 - 审批请假