# 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 | 审计日志表格 |