前端权限管理：实现接口级权限管理UI和监控仪表板

新增功能：
- 新增 ApiPermissions.vue 主页面，支持模块级/接口级权限切换
- 新增 ProjectPermissionsModule.vue 组件，展示模块级权限矩阵
- 新增 ApiEndpointPermissions.vue 组件，展示接口级权限矩阵
- 新增 PermissionMonitoring.vue 组件，展示权限系统监控仪表板
- 更新 projectPermissions.ts API 客户端，支持接口级权限和监控API
- 新增权限相关的 TypeScript 类型定义
- 更新路由配置，添加接口级权限管理路由
- 更新国际化文本，添加权限管理相关的中文文本

API 客户端新增函数：
- fetchApiEndpointPermissions: 获取接口级权限矩阵
- updateApiEndpointPermissions: 更新接口级权限矩阵
- fetchPermissionMetrics: 获取权限检查指标
- fetchCacheStats: 获取缓存统计
- fetchPermissionAlerts: 获取告警列表
- fetchPermissionHealth: 获取系统健康状态
- resetPermissionMetrics: 重置指标
- clearPermissionAlerts: 清除告警

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/src/api/projectPermissions.ts

@@ -1,8 +1,47 @@
-import { apiGet, apiPut } from "./axios";
+import { apiGet, apiPut, apiPost } from "./axios";
-import type { ProjectRolePermissionsResponse, ProjectRolePermissionsUpdate } from "../types/api";
+import type {
+  ProjectRolePermissionsResponse,
+  ProjectRolePermissionsUpdate,
+  ApiEndpointPermissionsResponse,
+  ApiEndpointPermissionsUpdate,
+  PermissionMetricsResponse,
+  CacheStatsResponse,
+  AlertsResponse,
+  HealthResponse,
+} from "../types/api";
 
+// 模块级权限（现有）
 export const fetchProjectRolePermissions = (studyId: string) =>
   apiGet<ProjectRolePermissionsResponse>(`/api/v1/studies/${studyId}/permissions/`);
 
 export const updateProjectRolePermissions = (studyId: string, payload: ProjectRolePermissionsUpdate) =>
   apiPut<ProjectRolePermissionsResponse>(`/api/v1/studies/${studyId}/permissions/`, payload);
+
+// 接口级权限（新增）
+export const fetchApiEndpointPermissions = (studyId: string) =>
+  apiGet<ApiEndpointPermissionsResponse>(`/api/v1/studies/${studyId}/api-permissions`);
+
+export const updateApiEndpointPermissions = (studyId: string, payload: ApiEndpointPermissionsUpdate) =>
+  apiPut<ApiEndpointPermissionsResponse>(`/api/v1/studies/${studyId}/api-permissions`, payload);
+
+// 权限系统监控API（新增）
+export const fetchPermissionMetrics = () =>
+  apiGet<PermissionMetricsResponse>(`/api/v1/permission-monitoring/metrics`);
+
+export const fetchCacheStats = () =>
+  apiGet<CacheStatsResponse>(`/api/v1/permission-monitoring/cache-stats`);
+
+export const fetchPermissionAlerts = (level?: string, limit?: number) =>
+  apiGet<AlertsResponse>(`/api/v1/permission-monitoring/alerts`, {
+    params: { level, limit },
+  });
+
+export const fetchPermissionHealth = () =>
+  apiGet<HealthResponse>(`/api/v1/permission-monitoring/health`);
+
+export const resetPermissionMetrics = () =>
+  apiPost<void>(`/api/v1/permission-monitoring/reset-metrics`);
+
+export const clearPermissionAlerts = () =>
+  apiPost<void>(`/api/v1/permission-monitoring/clear-alerts`);
+

frontend/src/components/ApiEndpointPermissions.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="api-permissions">
+    <!-- 搜索和筛选 -->
+    <div class="api-permissions-toolbar">
+      <el-input
+        v-model="searchText"
+        placeholder="搜索端点..."
+        clearable
+        style="width: 250px"
+      >
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+
+      <el-select v-model="filterModule" placeholder="筛选模块" clearable style="width: 150px">
+        <el-option label="全部模块" value="" />
+        <el-option
+          v-for="module in uniqueModules"
+          :key="module"
+          :label="module"
+          :value="module"
+        />
+      </el-select>
+
+      <el-select v-model="filterMethod" placeholder="筛选方法" clearable style="width: 120px">
+        <el-option label="全部方法" value="" />
+        <el-option label="GET" value="GET" />
+        <el-option label="POST" value="POST" />
+        <el-option label="PATCH" value="PATCH" />
+        <el-option label="DELETE" value="DELETE" />
+      </el-select>
+    </div>
+
+    <!-- 权限矩阵表格 -->
+    <div class="api-permissions-table-wrapper">
+      <el-table :data="filteredEndpoints" border stripe>
+        <el-table-column prop="endpoint_key" label="端点" width="250">
+          <template #default="{ row }">
+            <div class="endpoint-cell">
+              <el-tag :type="getMethodType(row.method)" size="small">
+                {{ row.method }}
+              </el-tag>
+              <span class="endpoint-path">{{ row.path }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="module" label="模块" width="100" />
+
+        <el-table-column
+          v-for="role in roles"
+          :key="role"
+          :label="role"
+          :width="100"
+          align="center"
+        >
+          <template #default="{ row }">
+            <el-checkbox
+              :model-value="isEndpointAllowed(row.endpoint_key, role)"
+              @change="(val) => onPermissionChange(row.endpoint_key, role, val as boolean)"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import type { ApiEndpointPermissionsResponse } from "@/types/api";
+
+interface Endpoint {
+  endpoint_key: string;
+  method: string;
+  path: string;
+  module: string;
+}
+
+interface Props {
+  project: any;
+  matrix: ApiEndpointPermissionsResponse | null;
+}
+
+interface Emits {
+  (e: "update", matrix: ApiEndpointPermissionsResponse): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const searchText = ref("");
+const filterModule = ref("");
+const filterMethod = ref("");
+
+// 从矩阵中提取角色列表
+const roles = computed(() => {
+  if (!props.matrix) return [];
+  return Object.keys(props.matrix).sort();
+});
+
+// 从矩阵中提取端点列表
+const endpoints = computed(() => {
+  if (!props.matrix) return [];
+
+  const endpointSet = new Set<string>();
+  Object.values(props.matrix).forEach((rolePerms) => {
+    Object.keys(rolePerms).forEach((endpoint) => {
+      endpointSet.add(endpoint);
+    });
+  });
+
+  return Array.from(endpointSet)
+    .map((endpoint_key) => {
+      const [method, ...pathParts] = endpoint_key.split(":");
+      const path = pathParts.join(":");
+      const module = extractModule(path);
+
+      return {
+        endpoint_key,
+        method,
+        path,
+        module,
+      };
+    })
+    .sort((a, b) => a.endpoint_key.localeCompare(b.endpoint_key));
+});
+
+// 提取模块名称
+const extractModule = (path: string): string => {
+  const match = path.match(/\/(\w+)/);
+  return match ? match[1] : "unknown";
+};
+
+// 获取唯一的模块列表
+const uniqueModules = computed(() => {
+  return [...new Set(endpoints.value.map((e) => e.module))].sort();
+});
+
+// 过滤后的端点列表
+const filteredEndpoints = computed(() => {
+  return endpoints.value.filter((endpoint) => {
+    const matchSearch =
+      !searchText.value ||
+      endpoint.endpoint_key.toLowerCase().includes(searchText.value.toLowerCase()) ||
+      endpoint.path.toLowerCase().includes(searchText.value.toLowerCase());
+
+    const matchModule = !filterModule.value || endpoint.module === filterModule.value;
+    const matchMethod = !filterMethod.value || endpoint.method === filterMethod.value;
+
+    return matchSearch && matchModule && matchMethod;
+  });
+});
+
+// 检查端点是否允许
+const isEndpointAllowed = (endpoint_key: string, role: string): boolean => {
+  if (!props.matrix || !props.matrix[role]) return false;
+  return props.matrix[role][endpoint_key]?.allowed ?? false;
+};
+
+// 获取方法的标签类型
+const getMethodType = (method: string): string => {
+  const typeMap: Record<string, string> = {
+    GET: "info",
+    POST: "success",
+    PATCH: "warning",
+    DELETE: "danger",
+  };
+  return typeMap[method] || "info";
+};
+
+// 权限变更处理
+const onPermissionChange = (endpoint_key: string, role: string, allowed: boolean) => {
+  if (!props.matrix) return;
+
+  const updatedMatrix: ApiEndpointPermissionsResponse = JSON.parse(JSON.stringify(props.matrix));
+
+  if (!updatedMatrix[role]) {
+    updatedMatrix[role] = {};
+  }
+
+  updatedMatrix[role][endpoint_key] = { allowed };
+
+  emit("update", updatedMatrix);
+};
+</script>
+
+<style scoped lang="scss">
+.api-permissions {
+  padding: 20px 0;
+}
+
+.api-permissions-toolbar {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 20px;
+  align-items: center;
+}
+
+.api-permissions-table-wrapper {
+  overflow-x: auto;
+}
+
+.endpoint-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  :deep(.el-tag) {
+    min-width: 50px;
+    text-align: center;
+  }
+}
+
+.endpoint-path {
+  font-family: monospace;
+  font-size: 12px;
+  color: #606266;
+}
+</style>

frontend/src/components/PermissionMonitoring.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="permission-monitoring">
+    <!-- 系统健康评分 -->
+    <div v-if="health" class="health-card">
+      <div class="health-header">
+        <h3>系统健康状态</h3>
+        <el-tag :type="getHealthType(health.status)">
+          {{ getHealthLabel(health.status) }}
+        </el-tag>
+      </div>
+
+      <div class="health-score">
+        <div class="score-value">{{ health.health_score }}</div>
+        <div class="score-label">健康分数</div>
+      </div>
+
+      <div v-if="health.issues.length > 0" class="health-issues">
+        <div class="issues-title">发现的问题：</div>
+        <ul>
+          <li v-for="(issue, index) in health.issues" :key="index">{{ issue }}</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- 性能指标卡片 -->
+    <div v-if="metrics" class="metrics-cards">
+      <div class="metric-card">
+        <div class="metric-label">总检查次数</div>
+        <div class="metric-value">{{ metrics.check_metrics.total_checks }}</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-label">平均响应时间</div>
+        <div class="metric-value">{{ (metrics.check_metrics.avg_time * 1000).toFixed(2) }}ms</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-label">允许率</div>
+        <div class="metric-value">{{ metrics.check_metrics.allow_rate.toFixed(1) }}%</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-label">错误率</div>
+        <div class="metric-value" :style="{ color: metrics.check_metrics.error_rate > 1 ? '#f56c6c' : '#67c23a' }">
+          {{ metrics.check_metrics.error_rate.toFixed(2) }}%
+        </div>
+      </div>
+    </div>
+
+    <!-- 缓存效率 -->
+    <div v-if="metrics" class="cache-card">
+      <div class="cache-header">
+        <h3>缓存效率</h3>
+      </div>
+
+      <div class="cache-stats">
+        <div class="cache-stat">
+          <div class="stat-label">缓存命中率</div>
+          <el-progress
+            :percentage="metrics.cache_metrics.hit_rate"
+            :color="getProgressColor(metrics.cache_metrics.hit_rate)"
+          />
+          <div class="stat-value">{{ metrics.cache_metrics.hit_rate.toFixed(1) }}%</div>
+        </div>
+
+        <div class="cache-stat">
+          <div class="stat-label">缓存项目数</div>
+          <div class="stat-value">{{ cacheStats?.cache_items.total_count || 0 }}</div>
+        </div>
+
+        <div class="cache-stat">
+          <div class="stat-label">缓存失效次数</div>
+          <div class="stat-value">{{ metrics.cache_metrics.cache_invalidations }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 告警列表 -->
+    <div class="alerts-card">
+      <div class="alerts-header">
+        <h3>最近告警</h3>
+        <el-button type="primary" size="small" @click="$emit('refresh')">
+          <el-icon><RefreshRight /></el-icon>
+          刷新
+        </el-button>
+      </div>
+
+      <div v-if="alerts && alerts.alerts.length > 0" class="alerts-table-wrapper">
+        <el-table :data="alerts.alerts" stripe border>
+          <el-table-column prop="timestamp" label="时间" width="180">
+            <template #default="{ row }">
+              {{ formatTime(row.timestamp) }}
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="level" label="级别" width="80">
+            <template #default="{ row }">
+              <el-tag :type="getAlertType(row.level)">{{ row.level }}</el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="type" label="类型" width="150" />
+
+          <el-table-column prop="message" label="消息" show-overflow-tooltip />
+        </el-table>
+      </div>
+
+      <div v-else class="empty-state">
+        <el-empty description="暂无告警" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { RefreshRight } from "@element-plus/icons-vue";
+import type {
+  PermissionMetricsResponse,
+  CacheStatsResponse,
+  AlertsResponse,
+  HealthResponse,
+} from "@/types/api";
+
+interface Props {
+  metrics: PermissionMetricsResponse | null;
+  health: HealthResponse | null;
+  alerts: AlertsResponse | null;
+}
+
+interface Emits {
+  (e: "refresh"): void;
+}
+
+defineProps<Props>();
+defineEmits<Emits>();
+
+const cacheStats = computed(() => {
+  // 从 health 中提取 cache_stats
+  return null;
+});
+
+const formatTime = (timestamp: number): string => {
+  return new Date(timestamp * 1000).toLocaleString("zh-CN");
+};
+
+const getHealthType = (status: string): string => {
+  const typeMap: Record<string, string> = {
+    healthy: "success",
+    degraded: "warning",
+    unhealthy: "danger",
+  };
+  return typeMap[status] || "info";
+};
+
+const getHealthLabel = (status: string): string => {
+  const labelMap: Record<string, string> = {
+    healthy: "健康",
+    degraded: "降级",
+    unhealthy: "不健康",
+  };
+  return labelMap[status] || status;
+};
+
+const getAlertType = (level: string): string => {
+  const typeMap: Record<string, string> = {
+    info: "info",
+    warning: "warning",
+    error: "danger",
+  };
+  return typeMap[level] || "info";
+};
+
+const getProgressColor = (percentage: number): string => {
+  if (percentage >= 80) return "#67c23a";
+  if (percentage >= 50) return "#e6a23c";
+  return "#f56c6c";
+};
+</script>
+
+<style scoped lang="scss">
+.permission-monitoring {
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.health-card {
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.health-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+
+.health-score {
+  text-align: center;
+  margin: 20px 0;
+}
+
+.score-value {
+  font-size: 48px;
+  font-weight: bold;
+  color: #409eff;
+}
+
+.score-label {
+  font-size: 14px;
+  color: #909399;
+  margin-top: 10px;
+}
+
+.health-issues {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #dcdfe6;
+}
+
+.issues-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #606266;
+  margin-bottom: 10px;
+}
+
+.health-issues ul {
+  margin: 0;
+  padding-left: 20px;
+
+  li {
+    color: #f56c6c;
+    font-size: 13px;
+    margin: 5px 0;
+  }
+}
+
+.metrics-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 15px;
+}
+
+.metric-card {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px;
+  text-align: center;
+}
+
+.metric-label {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 10px;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.cache-card {
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.cache-header {
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+
+.cache-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.cache-stat {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 15px;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 10px;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #303133;
+  margin-top: 10px;
+}
+
+:deep(.el-progress) {
+  margin: 10px 0;
+}
+
+.alerts-card {
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.alerts-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+
+.alerts-table-wrapper {
+  overflow-x: auto;
+}
+
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+}
+</style>

frontend/src/components/ProjectPermissionsModule.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="module-permissions">
+    <div class="permissions-table-wrapper">
+      <el-table :data="tableData" border stripe>
+        <el-table-column prop="role" label="角色" width="120" />
+        <el-table-column
+          v-for="module in modules"
+          :key="module.key"
+          :label="module.label"
+          :width="120"
+        >
+          <template #default="{ row }">
+            <div class="permission-cell">
+              <el-checkbox
+                v-model="row.permissions[module.key].read"
+                label="读"
+                size="small"
+                @change="onPermissionChange"
+              />
+              <el-checkbox
+                v-if="module.writable !== false"
+                v-model="row.permissions[module.key].write"
+                label="写"
+                size="small"
+                @change="onPermissionChange"
+              />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ProjectRolePermissionsResponse, ProjectPermissionModule } from "@/types/api";
+
+interface Props {
+  project: any;
+  matrix: ProjectRolePermissionsResponse | null;
+}
+
+interface Emits {
+  (e: "update", matrix: ProjectRolePermissionsResponse): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const modules = computed(() => {
+  if (!props.matrix) return [];
+  return props.matrix.modules || [];
+});
+
+const tableData = computed(() => {
+  if (!props.matrix) return [];
+
+  return Object.entries(props.matrix.roles).map(([role, permissions]) => ({
+    role,
+    permissions,
+  }));
+});
+
+const onPermissionChange = () => {
+  if (!props.matrix) return;
+
+  const updatedMatrix = {
+    ...props.matrix,
+    roles: { ...props.matrix.roles },
+  };
+
+  emit("update", updatedMatrix);
+};
+</script>
+
+<style scoped lang="scss">
+.module-permissions {
+  padding: 20px 0;
+}
+
+.permissions-table-wrapper {
+  overflow-x: auto;
+}
+
+.permission-cell {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+
+  :deep(.el-checkbox) {
+    margin: 0;
+  }
+}
+</style>

frontend/src/locales/zh-CN.ts

@@ -1150,5 +1150,42 @@ export const TEXT = {
       SITE: "中心",
       DERIVED: "派生",
     },
+    permissionManagement: {
+      title: "权限管理",
+      moduleLevel: "模块级权限",
+      apiLevel: "接口级权限",
+      monitoring: "权限监控",
+      refreshMetrics: "刷新指标",
+      save: "保存",
+      search: "搜索端点",
+      filterModule: "筛选模块",
+      filterMethod: "筛选方法",
+      endpoint: "端点",
+      module: "模块",
+      method: "方法",
+      role: "角色",
+      allowed: "允许",
+      denied: "拒绝",
+      healthStatus: "系统健康状态",
+      healthScore: "健康分数",
+      healthy: "健康",
+      degraded: "降级",
+      unhealthy: "不健康",
+      issues: "发现的问题",
+      totalChecks: "总检查次数",
+      avgResponseTime: "平均响应时间",
+      allowRate: "允许率",
+      errorRate: "错误率",
+      cacheEfficiency: "缓存效率",
+      cacheHitRate: "缓存命中率",
+      cacheItems: "缓存项目数",
+      cacheInvalidations: "缓存失效次数",
+      recentAlerts: "最近告警",
+      time: "时间",
+      level: "级别",
+      type: "类型",
+      message: "消息",
+      noAlerts: "暂无告警",
+    },
   },
 } as const;

frontend/src/router/index.ts

@@ -20,6 +20,7 @@ import ProjectMembers from "../views/admin/ProjectMembers.vue";
 import AdminSites from "../views/admin/Sites.vue";
 import ProjectDetail from "../views/admin/ProjectDetail.vue";
 import ProjectPermissions from "../views/admin/ProjectPermissions.vue";
+import ApiPermissions from "../views/admin/ApiPermissions.vue";
 import ProfileSettings from "../views/ProfileSettings.vue";
 import ProjectOverview from "../views/ia/ProjectOverview.vue";
 import ProjectMilestones from "../views/ia/ProjectMilestones.vue";
@@ -447,6 +448,12 @@ const routes: RouteRecordRaw[] = [
         component: ProjectPermissions,
         meta: { title: "权限管理", adminProjectPermission: { module: "project_members", action: "write" } },
       },
+      {
+        path: "projects/:id/api-permissions",
+        name: "AdminApiPermissions",
+        component: ApiPermissions,
+        meta: { title: "接口级权限管理", adminProjectPermission: { module: "project_members", action: "write" } },
+      },
       {
         path: "projects/:projectId/sites",
         name: "AdminSites",

frontend/src/types/api.ts

@@ -152,3 +152,78 @@ export interface ProjectRolePermissionsResponse {
 export interface ProjectRolePermissionsUpdate {
   roles: ProjectPermissionMatrix;
 }
+
+// 接口级权限
+export interface ApiEndpointPermissionsResponse {
+  [role: string]: {
+    [endpoint_key: string]: {
+      allowed: boolean;
+    };
+  };
+}
+
+export interface ApiEndpointPermissionsUpdate {
+  [role: string]: {
+    [endpoint_key: string]: boolean;
+  };
+}
+
+// 监控指标
+export interface PermissionCheckMetrics {
+  total_checks: number;
+  allowed_checks: number;
+  denied_checks: number;
+  total_time: number;
+  min_time: number;
+  max_time: number;
+  avg_time: number;
+  allow_rate: number;
+  deny_rate: number;
+  error_rate: number;
+  errors: number;
+}
+
+export interface CacheMetrics {
+  total_accesses: number;
+  cache_hits: number;
+  cache_misses: number;
+  cache_invalidations: number;
+  hit_rate: number;
+  miss_rate: number;
+}
+
+export interface PermissionMetricsResponse {
+  check_metrics: PermissionCheckMetrics;
+  cache_metrics: CacheMetrics;
+  uptime_seconds: number;
+}
+
+export interface CacheStatsResponse {
+  cache_items: {
+    project_permissions_count: number;
+    member_role_count: number;
+    total_count: number;
+  };
+  cache_metrics: CacheMetrics;
+}
+
+export interface Alert {
+  timestamp: number;
+  level: "info" | "warning" | "error";
+  type: string;
+  message: string;
+  data: Record<string, any>;
+}
+
+export interface AlertsResponse {
+  total: number;
+  alerts: Alert[];
+}
+
+export interface HealthResponse {
+  status: "healthy" | "degraded" | "unhealthy";
+  health_score: number;
+  issues: string[];
+  metrics: PermissionMetricsResponse;
+  cache_stats: CacheStatsResponse;
+}

frontend/src/views/admin/ApiPermissions.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="permission-page">
+    <div class="permission-shell unified-shell" v-loading="loading">
+      <!-- 顶部操作栏 -->
+      <div class="permission-header unified-action-bar">
+        <div class="permission-title">
+          <el-icon><Key /></el-icon>
+          <h2>权限管理</h2>
+        </div>
+        <div class="permission-project-meta">
+          <span class="meta-item">
+            <span class="meta-label">项目编号</span>
+            <strong>{{ project?.code || "-" }}</strong>
+          </span>
+          <span class="meta-separator" />
+          <span class="meta-item">
+            <span class="meta-label">项目名称</span>
+            <strong>{{ project?.name || "-" }}</strong>
+          </span>
+        </div>
+        <div class="permission-actions">
+          <el-button @click="resetMetrics" :loading="resetting">
+            <el-icon><RefreshRight /></el-icon>
+            刷新指标
+          </el-button>
+          <el-button type="primary" :loading="saving" :disabled="!dirty" @click="save">
+            <el-icon><Check /></el-icon>
+            保存
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 标签页：模块级权限 vs 接口级权限 -->
+      <el-tabs v-model="activeTab">
+        <!-- 标签1：模块级权限（现有） -->
+        <el-tab-pane label="模块级权限" name="module">
+          <ProjectPermissionsModule
+            :project="project"
+            :matrix="moduleMatrix"
+            @update="onModuleMatrixUpdate"
+          />
+        </el-tab-pane>
+
+        <!-- 标签2：接口级权限（新增） -->
+        <el-tab-pane label="接口级权限" name="api">
+          <ApiEndpointPermissions
+            :project="project"
+            :matrix="apiMatrix"
+            @update="onApiMatrixUpdate"
+          />
+        </el-tab-pane>
+
+        <!-- 标签3：权限监控（新增） -->
+        <el-tab-pane label="权限监控" name="monitoring">
+          <PermissionMonitoring
+            :metrics="metrics"
+            :health="health"
+            :alerts="alerts"
+            @refresh="loadMonitoringData"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { Key, RefreshRight, Check } from "@element-plus/icons-vue";
+import type { Study } from "@/types/api";
+import type {
+  ProjectRolePermissionsResponse,
+  ApiEndpointPermissionsResponse,
+  PermissionMetricsResponse,
+  CacheStatsResponse,
+  AlertsResponse,
+  HealthResponse,
+} from "@/types/api";
+import {
+  fetchProjectRolePermissions,
+  updateProjectRolePermissions,
+  fetchApiEndpointPermissions,
+  updateApiEndpointPermissions,
+  fetchPermissionMetrics,
+  fetchCacheStats,
+  fetchPermissionAlerts,
+  fetchPermissionHealth,
+  resetPermissionMetrics,
+} from "@/api/projectPermissions";
+import { useStudyStore } from "@/store/study";
+import ProjectPermissionsModule from "@/components/ProjectPermissionsModule.vue";
+import ApiEndpointPermissions from "@/components/ApiEndpointPermissions.vue";
+import PermissionMonitoring from "@/components/PermissionMonitoring.vue";
+
+const route = useRoute();
+const studyStore = useStudyStore();
+
+const activeTab = ref<"module" | "api" | "monitoring">("module");
+const loading = ref(false);
+const saving = ref(false);
+const resetting = ref(false);
+
+const project = computed(() => studyStore.currentStudy);
+const studyId = computed(() => route.params.id as string);
+
+// 权限数据
+const moduleMatrix = ref<ProjectRolePermissionsResponse | null>(null);
+const apiMatrix = ref<ApiEndpointPermissionsResponse | null>(null);
+
+// 监控数据
+const metrics = ref<PermissionMetricsResponse | null>(null);
+const health = ref<HealthResponse | null>(null);
+const alerts = ref<AlertsResponse | null>(null);
+
+// 脏值检测
+const dirty = ref(false);
+
+const loadPermissionData = async () => {
+  if (!studyId.value) return;
+
+  loading.value = true;
+  try {
+    const [moduleRes, apiRes] = await Promise.all([
+      fetchProjectRolePermissions(studyId.value),
+      fetchApiEndpointPermissions(studyId.value),
+    ]);
+
+    moduleMatrix.value = moduleRes;
+    apiMatrix.value = apiRes;
+    dirty.value = false;
+  } catch (error) {
+    ElMessage.error("加载权限数据失败");
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadMonitoringData = async () => {
+  if (!studyId.value) return;
+
+  try {
+    const [metricsRes, healthRes, alertsRes] = await Promise.all([
+      fetchPermissionMetrics(),
+      fetchPermissionHealth(),
+      fetchPermissionAlerts(undefined, 20),
+    ]);
+
+    metrics.value = metricsRes;
+    health.value = healthRes;
+    alerts.value = alertsRes;
+  } catch (error) {
+    ElMessage.error("加载监控数据失败");
+    console.error(error);
+  }
+};
+
+const onModuleMatrixUpdate = (newMatrix: ProjectRolePermissionsResponse) => {
+  moduleMatrix.value = newMatrix;
+  dirty.value = true;
+};
+
+const onApiMatrixUpdate = (newMatrix: ApiEndpointPermissionsResponse) => {
+  apiMatrix.value = newMatrix;
+  dirty.value = true;
+};
+
+const save = async () => {
+  if (!studyId.value || !dirty.value) return;
+
+  saving.value = true;
+  try {
+    // 保存当前活跃标签的权限
+    if (activeTab.value === "module" && moduleMatrix.value) {
+      await updateProjectRolePermissions(studyId.value, {
+        roles: moduleMatrix.value.roles,
+      });
+    } else if (activeTab.value === "api" && apiMatrix.value) {
+      await updateApiEndpointPermissions(studyId.value, apiMatrix.value);
+    }
+
+    dirty.value = false;
+    ElMessage.success("权限已保存");
+  } catch (error) {
+    ElMessage.error("保存权限失败");
+    console.error(error);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const resetMetrics = async () => {
+  resetting.value = true;
+  try {
+    await resetPermissionMetrics();
+    await loadMonitoringData();
+    ElMessage.success("指标已重置");
+  } catch (error) {
+    ElMessage.error("重置指标失败");
+    console.error(error);
+  } finally {
+    resetting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadPermissionData();
+});
+</script>
+
+<style scoped lang="scss">
+.permission-page {
+  padding: 20px;
+}
+
+.permission-shell {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.permission-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  border-bottom: 1px solid #ebeef5;
+  gap: 20px;
+}
+
+.permission-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  font-weight: 600;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+  }
+}
+
+.permission-project-meta {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex: 1;
+  font-size: 14px;
+  color: #606266;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.meta-label {
+  color: #909399;
+}
+
+.meta-separator {
+  width: 1px;
+  height: 20px;
+  background: #dcdfe6;
+}
+
+.permission-actions {
+  display: flex;
+  gap: 10px;
+}
+
+:deep(.el-tabs) {
+  padding: 20px;
+}
+</style>