Cheng Zhou
387d035b08
新增功能： - 新增 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>
96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
<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>
|