feat: 分层 RBAC 权限管理系统

后端: - 新增 Role / RolePermission 实体（自动 seed 系统角色） - PermissionService——通过 isAdmin / TenantMember 链路解析用户权限 - @Permission() 装饰器 + PermissionsGuard 守卫 - /api/permissions 和 /api/roles REST API - UserController 内联 role 检查迁移到 @Permission() - PermissionModule 全局注册前端: - usePermissions hook——获取当前用户权限集 - PermissionGate 组件级门控 - PermissionSettingsView——角色列表+权限矩阵编辑页面 - SettingsView 新增「权限管理」Tab（仅 admin 可见） - 权限预览（26 项，7 分类） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-08 23:25:22 +08:00
parent c57c3028e2
commit ba33d517c1
17 changed files with 1386 additions and 87 deletions
@@ -0,0 +1,61 @@
+import React from 'react';
+import { usePermissions } from '../src/hooks/usePermissions';
+
+interface PermissionGateProps {
+  /** 需要的权限（OR 关系：有任一即可） */
+  permission?: string;
+  /** 多个权限 OR 关系 */
+  any?: string[];
+  /** 多个权限 AND 关系（必须全部拥有） */
+  all?: string[];
+  /** 加载中时显示的内容（默认不显示） */
+  fallback?: React.ReactNode;
+  /** 无权限时显示的内容（默认不显示） */
+  denied?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * 组件级权限门控
+ * 根据用户权限集有条件的渲染子组件
+ *
+ * @example
+ * ```tsx
+ * <PermissionGate permission="user:create">
+ *   <Button>创建用户</Button>
+ * </PermissionGate>
+ *
+ * <PermissionGate any={['user:edit', 'user:delete']}>
+ *   <AdminPanel />
+ * </PermissionGate>
+ * ```
+ */
+export const PermissionGate: React.FC<PermissionGateProps> = ({
+  permission,
+  any,
+  all,
+  fallback = null,
+  denied = null,
+  children,
+}) => {
+  const { hasPermission, hasAnyPermission, hasAllPermissions, isLoading } = usePermissions();
+
+  if (isLoading) {
+    return <>{fallback}</>;
+  }
+
+  let granted = false;
+
+  if (permission) {
+    granted = hasPermission(permission);
+  } else if (any && any.length > 0) {
+    granted = hasAnyPermission(...any);
+  } else if (all && all.length > 0) {
+    granted = hasAllPermissions(...all);
+  } else {
+    // 没有指定权限要求 → 放行
+    granted = true;
+  }
+
+  return <>{granted ? children : denied}</>;
+};