本项目立项源于中小型后台系统在权限管理上反复造轮子、模板与真实业务脱节的问题：多数团队每做一个管理系统，都要重新编写登录、菜单、角色、用户四套基础代码，权限调整还需要改前端代码重新发版，维护成本高且容易出错。行业场景面向企业信息化、政务、教育等需要多角色协同的后台管理业务：管理员、运营、审核等岗位能看到的入口必须不同；人员入职、转岗、离职频繁，角色与菜单权限需要由业务人员在界面自助维护，而不是依赖开发排期。项目以 RBAC 权限模型为底座，提供一套开箱可复用的权限管理后台，让业务方在页面上完成角色授权、菜单配置与账号维护，从而缩短系统建设周期，降低后续运维与权限治理成本。
项目包含登录认证、动态路由与菜单、用户管理、角色管理、菜单管理五个功能模块，并沉淀了一套列表页与弹窗表单的通用能力。登录模块校验账号密码并签发 JWT，后续请求统一携带 token，未登录或过期统一拦截；动态菜单模块按当前用户角色查询已授权的菜单树，前端据此生成侧边栏和可访问路由，实现不同角色看到不同功能。用户管理支持按用户名模糊查询的分页列表、新增、编辑、详情、单条删除与批量删除，可绑定角色、维护手机号与邮箱、启停账号，删除采用软删除保留历史数据。角色管理支持角色增删改查，通过权限树勾选为角色分配菜单，保存时全量覆盖角色与菜单的关联关系，删除前会校验该角色下是否仍有用户。菜单管理以树形结构维护菜单名称、路由路径、组件与排序，支持新增、修改和级联删除子节点。通用组件提供表格加载态、分页、跨页多选、操作列超长自动折叠、详情只读弹窗与表单校验提交编排。
项目采用前后端分离架构。前端基于 Vue 3 + TypeScript + Vite 构建，UI 使用 Element Plus，状态与路由由 Pinia、Vue Router 管理；通过 Axios 统一封装请求实例，在拦截器中注入 token、统一处理业务码与错误提示，并依据后端返回的菜单树动态注入路由、渲染侧边栏。为减少重复代码，抽取了 useListPage（分页查询、详情、删除、批量删除、多选状态）、usePopup（新增/编辑/详情三态）、useFormState（表单初始化、校验、提交）等组合式函数，配合 DialogPlus、TableWrapper、ActionColumn 等组件，业务页面只需声明接口与字段即可完成一套增删改查。后端基于 Koa 2 + TypeScript，按 router（路由与参数校验）、mapper（SQL 访问）、constants（表名常量）分层，使用 mysql2 连接池访问 MySQL，Zod 校验入参结构，ResponseModel 统一响应格式；中间件统一做 JWT 校验、请求日志与异常捕获。数据层围绕用户、角色、角色-菜单三张表实现 RBAC：用户删除为软删除，角色菜单关联为全量替换，菜单删除递归清理子节点，角色删除前校验是否仍有关联用户。
评论