From b9c87046fa539d9dabe4e8ea9d60bfa531d2cd28 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Thu, 14 May 2026 09:23:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=9D=83=E9=99=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=EF=BC=9A=E6=B7=BB=E5=8A=A0=E9=9B=86=E6=88=90=E6=8C=87?=
 =?UTF-8?q?=E5=8D=97=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增文档：
- FRONTEND_PERMISSION_INTEGRATION.md: 前端权限管理集成指南

文档内容：
- 功能特性说明
- API 客户端使用示例
- 组件使用说明
- 类型定义参考
- 最佳实践建议
- 故障排除指南
- 后续改进方向

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 FRONTEND_PERMISSION_INTEGRATION.md | 365 +++++++++++++++++++++++++++++
 1 file changed, 365 insertions(+)
 create mode 100644 FRONTEND_PERMISSION_INTEGRATION.md

diff --git a/FRONTEND_PERMISSION_INTEGRATION.md b/FRONTEND_PERMISSION_INTEGRATION.md
new file mode 100644
index 00000000..f6d7d906
--- /dev/null
+++ b/FRONTEND_PERMISSION_INTEGRATION.md
@@ -0,0 +1,365 @@
+# 前端权限管理集成指南
+
+## 概述
+
+本文档说明如何在前端应用中使用新的权限管理功能，包括接口级权限管理和权限系统监控。
+
+---
+
+## 功能特性
+
+### 1. 权限管理页面
+
+**路由**: `/admin/projects/:id/api-permissions`
+
+**功能**:
+- 模块级权限管理（向后兼容）
+- 接口级权限管理（新增）
+- 权限系统监控仪表板
+
+### 2. 权限管理UI
+
+#### 模块级权限标签页
+
+- 显示角色 × 模块 × 读写权限的矩阵
+- 支持权限编辑和保存
+- 向后兼容现有权限系统
+
+#### 接口级权限标签页
+
+- 显示角色 × 接口端点的权限矩阵
+- 支持按模块、HTTP方法、端点名称搜索和筛选
+- 支持权限编辑和保存
+
+#### 权限监控标签页
+
+- 系统健康评分和状态
+- 权限检查性能指标
+- 缓存效率统计
+- 告警列表展示
+
+---
+
+## API 客户端使用
+
+### 导入 API 函数
+
+```typescript
+import {
+  fetchProjectRolePermissions,
+  updateProjectRolePermissions,
+  fetchApiEndpointPermissions,
+  updateApiEndpointPermissions,
+  fetchPermissionMetrics,
+  fetchCacheStats,
+  fetchPermissionAlerts,
+  fetchPermissionHealth,
+  resetPermissionMetrics,
+  clearPermissionAlerts,
+} from "@/api/projectPermissions";
+```
+
+### 获取权限
+
+```typescript
+// 获取模块级权限
+const modulePerms = await fetchProjectRolePermissions(studyId);
+
+// 获取接口级权限
+const apiPerms = await fetchApiEndpointPermissions(studyId);
+```
+
+### 更新权限
+
+```typescript
+// 更新模块级权限
+await updateProjectRolePermissions(studyId, {
+  roles: {
+    PM: { subjects: { read: true, write: true } },
+    CRA: { subjects: { read: true, write: true } },
+  },
+});
+
+// 更新接口级权限
+await updateApiEndpointPermissions(studyId, {
+  PM: {
+    "POST:/subjects": true,
+    "GET:/subjects": true,
+  },
+  CRA: {
+    "POST:/subjects": true,
+    "GET:/subjects": true,
+  },
+});
+```
+
+### 获取监控数据
+
+```typescript
+// 获取权限检查指标
+const metrics = await fetchPermissionMetrics();
+
+// 获取缓存统计
+const cacheStats = await fetchCacheStats();
+
+// 获取告警列表
+const alerts = await fetchPermissionAlerts("warning", 20);
+
+// 获取系统健康状态
+const health = await fetchPermissionHealth();
+```
+
+### 重置监控数据
+
+```typescript
+// 重置指标
+await resetPermissionMetrics();
+
+// 清除告警
+await clearPermissionAlerts();
+```
+
+---
+
+## 组件使用
+
+### ApiPermissions.vue（主页面）
+
+```vue
+<template>
+  <ApiPermissions />
+</template>
+
+<script setup lang="ts">
+import ApiPermissions from "@/views/admin/ApiPermissions.vue";
+</script>
+```
+
+**Props**: 无（从路由参数获取项目ID）
+
+**事件**: 无
+
+### ProjectPermissionsModule.vue（模块级权限）
+
+```vue
+<template>
+  <ProjectPermissionsModule
+    :project="project"
+    :matrix="moduleMatrix"
+    @update="onUpdate"
+  />
+</template>
+
+<script setup lang="ts">
+import ProjectPermissionsModule from "@/components/ProjectPermissionsModule.vue";
+import type { ProjectRolePermissionsResponse } from "@/types/api";
+
+const onUpdate = (matrix: ProjectRolePermissionsResponse) => {
+  // 处理权限更新
+};
+</script>
+```
+
+**Props**:
+- `project`: 项目信息
+- `matrix`: 权限矩阵数据
+
+**事件**:
+- `update`: 权限矩阵更新时触发
+
+### ApiEndpointPermissions.vue（接口级权限）
+
+```vue
+<template>
+  <ApiEndpointPermissions
+    :project="project"
+    :matrix="apiMatrix"
+    @update="onUpdate"
+  />
+</template>
+
+<script setup lang="ts">
+import ApiEndpointPermissions from "@/components/ApiEndpointPermissions.vue";
+import type { ApiEndpointPermissionsResponse } from "@/types/api";
+
+const onUpdate = (matrix: ApiEndpointPermissionsResponse) => {
+  // 处理权限更新
+};
+</script>
+```
+
+**Props**:
+- `project`: 项目信息
+- `matrix`: 权限矩阵数据
+
+**事件**:
+- `update`: 权限矩阵更新时触发
+
+### PermissionMonitoring.vue（监控仪表板）
+
+```vue
+<template>
+  <PermissionMonitoring
+    :metrics="metrics"
+    :health="health"
+    :alerts="alerts"
+    @refresh="onRefresh"
+  />
+</template>
+
+<script setup lang="ts">
+import PermissionMonitoring from "@/components/PermissionMonitoring.vue";
+import type {
+  PermissionMetricsResponse,
+  HealthResponse,
+  AlertsResponse,
+} from "@/types/api";
+
+const onRefresh = () => {
+  // 刷新监控数据
+};
+</script>
+```
+
+**Props**:
+- `metrics`: 权限检查指标
+- `health`: 系统健康状态
+- `alerts`: 告警列表
+
+**事件**:
+- `refresh`: 刷新按钮点击时触发
+
+---
+
+## 类型定义
+
+### ApiEndpointPermissionsResponse
+
+```typescript
+interface ApiEndpointPermissionsResponse {
+  [role: string]: {
+    [endpoint_key: string]: boolean;
+  };
+}
+```
+
+### ApiEndpointPermissionsUpdate
+
+```typescript
+interface ApiEndpointPermissionsUpdate {
+  [role: string]: {
+    [endpoint_key: string]: boolean;
+  };
+}
+```
+
+### PermissionMetricsResponse
+
+```typescript
+interface PermissionMetricsResponse {
+  check_metrics: PermissionCheckMetrics;
+  cache_metrics: CacheMetrics;
+  uptime_seconds: number;
+}
+```
+
+### HealthResponse
+
+```typescript
+interface HealthResponse {
+  status: "healthy" | "degraded" | "unhealthy";
+  health_score: number;
+  issues: string[];
+  metrics: PermissionMetricsResponse;
+  cache_stats: CacheStatsResponse;
+}
+```
+
+---
+
+## 最佳实践
+
+### 1. 权限管理
+
+- 定期检查权限配置的完整性
+- 使用权限监控仪表板监控权限系统状态
+- 及时处理告警信息
+
+### 2. 性能优化
+
+- 监控缓存命中率，目标 > 80%
+- 监控权限检查响应时间，目标 < 10ms
+- 定期重置指标以获取准确的统计数据
+
+### 3. 错误处理
+
+```typescript
+try {
+  await updateApiEndpointPermissions(studyId, permissions);
+  ElMessage.success("权限已保存");
+} catch (error) {
+  ElMessage.error("保存权限失败");
+  console.error(error);
+}
+```
+
+---
+
+## 故障排除
+
+### 问题1: 权限数据加载失败
+
+**症状**: 权限管理页面显示空白或加载失败
+
+**解决方案**:
+1. 检查网络连接
+2. 验证项目ID是否正确
+3. 检查用户权限是否足够
+4. 查看浏览器控制台错误日志
+
+### 问题2: 权限保存失败
+
+**症状**: 点击保存按钮后没有反应或显示错误
+
+**解决方案**:
+1. 检查权限数据格式是否正确
+2. 验证API端点是否可用
+3. 检查用户是否有权限修改权限配置
+4. 查看服务器日志
+
+### 问题3: 监控数据不更新
+
+**症状**: 监控仪表板显示的数据不更新
+
+**解决方案**:
+1. 点击"刷新指标"按钮手动刷新
+2. 检查后端监控API是否正常运行
+3. 检查网络连接
+4. 查看浏览器控制台错误日志
+
+---
+
+## 后续改进
+
+### 短期
+
+- [ ] 权限导入/导出功能
+- [ ] 权限模板功能
+- [ ] 权限审计日志查看
+
+### 中期
+
+- [ ] 权限预测和建议
+- [ ] 权限使用分析
+- [ ] 权限风险评估
+
+### 长期
+
+- [ ] 资源级权限控制
+- [ ] 权限继承机制
+- [ ] 权限工作流审批
+
+---
+
+**文档版本**: 1.0  
+**最后更新**: 2026-05-14