前端权限管理：实现接口级权限管理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>
2026-05-14 09:19:07 +08:00
parent 1247b64e91
commit 387d035b08
8 changed files with 1107 additions and 2 deletions
@@ -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>