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

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

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/utils/permission.ts

@@ -3,6 +3,7 @@ import { useAuthStore } from "../store/auth";
 import { useStudyStore } from "../store/study";
 import { TEXT } from "../locales";
 import { getProjectRole, isSystemAdmin } from "./roles";
+import { isApiPermissionAllowed } from "./apiPermissionValue";
 
 const PERMISSIONS: Record<string, string[]> = {
   "subject.create": ["ADMIN"],
@@ -45,32 +46,31 @@ export const usePermission = () => {
   const can = (action: string): boolean => {
     if (systemAdmin.value) return true;
     if (!projectRole.value) return false;
-    const permissionMap: Record<string, { module: string; action: "read" | "write" }> = {
-      "subject.create": { module: "subjects", action: "write" },
-      "subject.enroll": { module: "subjects", action: "write" },
-      "subject.complete": { module: "subjects", action: "write" },
-      "subject.drop": { module: "subjects", action: "write" },
-      "ae.create": { module: "risk_issues", action: "write" },
-      "ae.close": { module: "risk_issues", action: "write" },
-      "project.overview.read": { module: "project_overview", action: "read" },
-      "faq.edit": { module: "faq", action: "write" },
-      "faq.create": { module: "faq", action: "write" },
-      "faq.reply": { module: "faq", action: "write" },
-      "knowledge.notes.write": { module: "shared_library", action: "write" },
-      "shared.library.read": { module: "shared_library", action: "read" },
-      "shared.library.write": { module: "shared_library", action: "write" },
-      "project.members.manage": { module: "project_members", action: "write" },
-      "site.manage": { module: "sites", action: "write" },
-      "site.cra.bind": { module: "sites", action: "write" },
-      "fees.contract.write": { module: "fees", action: "write" },
-      "fees.attachment.delete": { module: "fees", action: "write" },
-      "file.attachment.delete": { module: "file_versions", action: "write" },
-      "audit.export.read": { module: "audit_export", action: "read" },
+    const permissionMap: Record<string, string> = {
+      "subject.create": "subjects:create",
+      "subject.enroll": "subjects:update",
+      "subject.complete": "subjects:update",
+      "subject.drop": "subjects:update",
+      "ae.create": "risk_issues:create",
+      "ae.close": "risk_issues:update",
+      "project.overview.read": "project_overview:read",
+      "faq.edit": "faq:update",
+      "faq.create": "faq:create",
+      "faq.reply": "faq_reply:create",
+      "knowledge.notes.write": "knowledge_notes:create",
+      "shared.library.read": "knowledge_notes:read",
+      "shared.library.write": "knowledge_notes:create",
+      "project.members.manage": "project_members:update",
+      "site.manage": "sites:update",
+      "site.cra.bind": "sites:update",
+      "fees.contract.write": "fees_contracts:create",
+      "fees.attachment.delete": "fees_attachments:delete",
+      "file.attachment.delete": "attachments:delete",
+      "audit.export.read": "audit_logs:read",
     };
-    const mapped = permissionMap[action];
-    if (!mapped) return false;
-    const allowed = projectPermissions.value?.roles?.[projectRole.value]?.[mapped.module]?.[mapped.action];
-    return !!allowed;
+    const operationKey = permissionMap[action];
+    if (!operationKey) return false;
+    return isApiPermissionAllowed(projectPermissions.value?.[projectRole.value]?.[operationKey]);
   };
 
   const reason = (action: string): string => {