159 lines
3.8 KiB
Markdown
159 lines
3.8 KiB
Markdown
# RBAC权限管理前端设计方案
|
||
|
||
**Date:** 2026-03-21
|
||
**Status:** Approved
|
||
**Type:** Frontend Design
|
||
|
||
---
|
||
|
||
## 整体架构：双层权限体系
|
||
|
||
| 层级 | 管理方式 | 说明 |
|
||
|-----|--------|------|
|
||
| **系统层** | 管理员手动配置 | 权限、角色、菜单分配 |
|
||
| **业务层** | 自动分配 | 用户加入项目时自动赋予对应角色权限 |
|
||
|
||
---
|
||
|
||
## 一、系统管理员功能（配置权限和角色）
|
||
|
||
### 1. 权限管理 `/system/permissions`
|
||
|
||
**功能清单：**
|
||
- 权限列表（按类型筛选：菜单MENU/按钮BUTTON/API）
|
||
- 新建权限（code, name, type, resource, method）
|
||
- 编辑权限
|
||
- 删除权限
|
||
- 权限与角色关联查看
|
||
|
||
**数据结构：**
|
||
```typescript
|
||
interface Permission {
|
||
id: string;
|
||
code: string; // 权限标识，如 user:create
|
||
name: string; // 权限名称
|
||
type: 'MENU' | 'BUTTON' | 'API';
|
||
resource: string; // 资源路径
|
||
method: string; // HTTP方法
|
||
parentCode?: string; // 父级权限
|
||
sortOrder: number;
|
||
}
|
||
```
|
||
|
||
### 2. 角色管理 `/system/roles`
|
||
|
||
**功能清单：**
|
||
- 角色列表（按类型筛选：SYSTEM/PROJECT/DEPARTMENT）
|
||
- 创建角色：
|
||
- 角色代码（唯一）
|
||
- 角色名称
|
||
- 角色类型
|
||
- 数据权限范围（ALL/PROJECT/SELF）
|
||
- 关联权限（多选树）
|
||
- 编辑角色
|
||
- 删除角色
|
||
|
||
**数据结构：**
|
||
```typescript
|
||
interface Role {
|
||
id: string;
|
||
code: string; // 角色标识
|
||
name: string; // 角色名称
|
||
type: 'SYSTEM' | 'PROJECT' | 'DEPARTMENT';
|
||
dataScope: 'ALL' | 'PROJECT' | 'SELF';
|
||
permissions: Permission[];
|
||
status: 'ENABLED' | 'DISABLED';
|
||
}
|
||
```
|
||
|
||
### 3. 用户角色分配 `/system/users`
|
||
|
||
**功能清单：**
|
||
- 用户列表（分页、搜索）
|
||
- 查看用户角色
|
||
- 分配/移除用户角色
|
||
- 查看用户项目参与情况
|
||
|
||
### 4. 操作审计日志 `/system/audit`
|
||
|
||
**功能清单：**
|
||
- 权限变更日志
|
||
- 角色分配日志
|
||
- 日志筛选（操作类型、时间范围、操作用户）
|
||
|
||
---
|
||
|
||
## 二、业务自动授权（基于项目角色）
|
||
|
||
### 项目成员管理 `项目详情页 → 成员tab`
|
||
|
||
**功能清单：**
|
||
- 成员列表（显示用户名、角色、项目角色）
|
||
- 添加成员：
|
||
- 选择用户
|
||
- 设置项目角色（leader/member/viewer）
|
||
- 自动分配对应权限
|
||
- 移除成员（自动回收权限）
|
||
- 修改成员角色
|
||
|
||
**项目角色权限对照：**
|
||
|
||
| 项目角色 | 自动获得权限 |
|
||
|---------|-------------|
|
||
| leader | 项目全部操作权限 |
|
||
| member | 项目基础功能权限 |
|
||
| viewer | 项目只读权限 |
|
||
|
||
---
|
||
|
||
## 三、页面结构
|
||
|
||
```
|
||
/system
|
||
├── /permissions # 权限管理
|
||
│ └── /:id/edit # 编辑权限
|
||
├── /roles # 角色管理
|
||
│ ├── /:id/edit # 编辑角色
|
||
│ └── /new # 新建角色
|
||
├── /users # 用户管理
|
||
│ └── /:id # 用户详情/角色分配
|
||
└── /audit # 审计日志
|
||
|
||
/projects
|
||
└── /:id/members # 项目成员管理（在项目详情页）
|
||
```
|
||
|
||
---
|
||
|
||
## 四、技术实现
|
||
|
||
**技术栈：**
|
||
- Vue 3 + TypeScript
|
||
- Vite
|
||
- Ant Design Vue（复用现有组件库）
|
||
- Pinia（状态管理）
|
||
|
||
**API对接：**
|
||
- GET `/api/permissions` - 权限列表
|
||
- POST/PUT/DELETE `/api/permissions`
|
||
- GET `/api/roles` - 角色列表
|
||
- POST/PUT/DELETE `/api/roles`
|
||
- GET `/api/users` - 用户列表
|
||
- GET `/api/users/{id}/roles` - 用户角色
|
||
- POST `/api/users/{id}/roles` - 分配角色
|
||
- GET `/api/users/{id}/projects` - 用户项目参与
|
||
- POST `/api/users/{id}/projects` - 添加到项目
|
||
- DELETE `/api/users/{id}/projects/{projectId}` - 从项目移除
|
||
|
||
---
|
||
|
||
## 五、组件清单
|
||
|
||
| 组件 | 说明 |
|
||
|-----|------|
|
||
| PermissionTree | 权限树形选择器 |
|
||
| RoleSelect | 角色下拉选择 |
|
||
| DataScopeSelect | 数据权限范围选择 |
|
||
| UserProjectList | 用户项目参与列表 |
|
||
| AuditLogTable | 审计日志表格 |
|