ether-docs/02-DESIGN/domains/permission-frontend/spec.md

RBAC权限管理前端设计方案

Date: 2026-03-21 Status: Approved Type: Frontend Design

---

整体架构：双层权限体系

层级	管理方式	说明
系统层	管理员手动配置	权限、角色、菜单分配
业务层	自动分配	用户加入项目时自动赋予对应角色权限

---

一、系统管理员功能（配置权限和角色）

1. 权限管理 /system/permissions

功能清单：

• 权限列表（按类型筛选：菜单MENU/按钮BUTTON/API）
• 新建权限（code, name, type, resource, method）
• 编辑权限
• 删除权限
• 权限与角色关联查看

数据结构：

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）
  • 关联权限（多选树）
• 编辑角色
• 删除角色

数据结构：

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