权限监控与管理界面全面美化

重新设计权限系统所有 UI 组件的视觉风格,统一配色、圆角、阴影和交互动效:
- 实时概览:统计卡片加图标和渐变色条,健康评分改为环形进度,告警改为卡片式
- 趋势分析:图表卡片加彩色图标标识,ECharts 配色升级为渐变面积填充
- 访问日志:指标卡片带图标,日志审计改为卡片式入口,IP排行前三高亮
- IP属地:工具栏重设计,排行列表前三渐变高亮,指标卡片统一新风格
- 系统级权限:从 el-table 改为自定义卡片列表,模块块独立圆角卡片
- 项目权限配置:空状态引导优化,成员表格加头像,工具栏加背景容器
- 角色概览卡片:加进度条可视化,hover 微动效
- 接口权限矩阵:工具栏分离布局,表格圆角包裹
- 角色管理抽屉:侧边栏选中态渐变,操作行 hover 高亮

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Cheng Zhou
2026-05-20 14:36:35 +08:00
parent e95eeed90e
commit 6cefa620e4
68 changed files with 6927 additions and 984 deletions
+3 -2
View File
@@ -82,6 +82,7 @@ import ProjectForm from "./ProjectForm.vue";
import { useStudyStore } from "../../store/study";
import { useAuthStore } from "../../store/auth";
import { isSystemAdmin } from "../../utils/roles";
import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
import { TEXT } from "../../locales";
const projects = ref<Study[]>([]);
@@ -127,7 +128,7 @@ const openCreate = () => {
};
const MODULE_TO_OPERATION: Record<string, Record<string, string>> = {
project_members: { read: "project_members:read", write: "project_members:update" },
project_members: { read: "project_members:list", write: "project_members:update" },
sites: { read: "sites:read", write: "sites:update" },
audit_export: { read: "audit_logs:read", write: "audit_logs:read" },
};
@@ -137,7 +138,7 @@ const canProject = (row: Study, module: string, action: "read" | "write") => {
const role = row.role_in_study || "";
const operationKey = MODULE_TO_OPERATION[module]?.[action];
if (!operationKey) return false;
return !!permissionsByProject.value[row.id]?.[role]?.[operationKey]?.allowed;
return isApiPermissionAllowed(permissionsByProject.value[row.id]?.[role]?.[operationKey]);
};
const goMembers = (row: Study) => {