权限管理界面重构：角色概览、生效管理与编辑权限整合

【界面优化】
- 移除权限模板列表和角色概览卡片上的"系统预设"标签，视觉上减少噪音
- 将 PermissionTemplateSelector 改为纯展示组件，重命名为"角色权限概览"
- 移除"应用此模板"按钮及预览面板，卡片仅展示各角色权限统计
- 角色描述改为鼠标悬浮 tooltip 显示，节省卡片空间
- 未生效角色以虚线边框 + 降低透明度区分，悬浮提示状态说明

【生效管理】
- Study 模型新增 active_roles JSON 字段，记录项目已生效角色列表
- 新增 /studies/{study_id}/active-roles GET/PUT 接口
- 数据库迁移 20260518_01：studies 表添加 active_roles 列
- 成员管理的项目角色下拉列表仅显示已生效角色，未生效角色不可分配

【模板管理抽屉重构】
- 抽屉改为三标签页：模板列表 / 生效管理 / 编辑权限
- 生效管理：开关控制各角色生效状态，保存后同步后端
- 编辑权限：左右分栏设计，左侧角色列表点击选中，右侧实时展示权限勾选
- 原独立的角色权限编辑抽屉合并至此，角色概览卡片"编辑权限"直接跳转对应标签页

【操作类型标签统一】
- 系统级权限和编辑权限界面的操作类型标签统一使用细分类型
- 操作类型从粗粒度 read/write 细化为 read/create/update/delete/export
- 颜色规范：读取灰色、创建绿色、更新黄色、删除红色、导出无色
- 权限模板管理接口限制为 ADMIN 角色，修复原先权限过宽的问题

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

frontend/src/api/projectPermissions.ts

@@ -98,3 +98,28 @@ export const applyPermissionTemplate = (studyId: string, payload: ApplyTemplateR
     `/api/v1/studies/${studyId}/permission-templates/${payload.template_id}/apply`,
     payload,
   );
+
+// 系统级权限
+export interface SystemPermissionItem {
+  permission_key: string;
+  module: string;
+  module_label: string;
+  action: string;
+  description: string;
+  roles: string[];
+}
+
+export interface SystemPermissionsResponse {
+  permissions: SystemPermissionItem[];
+  module_labels: Record<string, string>;
+}
+
+export const fetchSystemPermissions = () =>
+  apiGet<SystemPermissionsResponse>(`/api/v1/system-permissions`);
+
+// 项目角色生效管理
+export const fetchActiveRoles = (studyId: string) =>
+  apiGet<{ active_roles: string[] }>(`/api/v1/studies/${studyId}/active-roles`);
+
+export const updateActiveRoles = (studyId: string, activeRoles: string[]) =>
+  apiPut<{ active_roles: string[] }>(`/api/v1/studies/${studyId}/active-roles`, { active_roles: activeRoles });

frontend/src/components/Layout.vue

@@ -33,6 +33,10 @@
             <el-icon><Document /></el-icon>
             <span>{{ TEXT.menu.auditLogs }}</span>
           </el-menu-item>
+          <el-menu-item v-if="isAdmin" index="/admin/permissions">
+            <el-icon><Key /></el-icon>
+            <span>{{ TEXT.menu.permissionManagement }}</span>
+          </el-menu-item>
         </el-menu-item-group>
 
         <el-menu-item-group v-if="study.currentStudy && hasAnyProjectModuleAccess" class="menu-group">
@@ -212,9 +216,9 @@ import { useStudyStore } from "../store/study";
 import { fetchStudies } from "../api/studies";
 import { fetchSites } from "../api/sites";
 import { TEXT } from "../locales";
-import { 
+import {
   Monitor, User, Suitcase, House, Calendar, Flag, ChatDotRound,
-  CircleCheck, Box, Coin, Notebook, Document, ArrowDown, SwitchButton, Files
+  CircleCheck, Box, Coin, Notebook, Document, ArrowDown, SwitchButton, Files, Key
 } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 import { getProjectRoutePermission, hasProjectPermission, projectRouteLandingPaths } from "../utils/projectRoutePermissions";

frontend/src/components/PermissionTemplateSelector.vue

@@ -1,204 +1,125 @@
 <template>
   <div class="template-selector">
     <div class="selector-header">
-      <h3>快速配置角色权限</h3>
-      <p class="selector-desc">选择预设模板，一键应用到项目角色权限</p>
+      <h3>角色权限概览</h3>
+      <p class="selector-desc">展示当前项目各角色的权限配置状态</p>
     </div>
 
     <div class="template-grid">
-      <div
+      <el-tooltip
         v-for="template in templates"
         :key="template.id"
+        :content="template.description"
+        placement="top"
+        :disabled="!template.description"
+      >
+      <div
         class="template-card"
-        :class="{ selected: selectedId === template.id, system: template.is_system }"
-        @click="select(template)"
+        :class="{ inactive: template.category && !isRoleActive(template.category) }"
       >
         <div class="card-header">
           <span class="card-icon">{{ roleIcon(template.category) }}</span>
           <div class="card-title-wrap">
-            <span class="card-name">{{ template.name }}</span>
-            <el-tag v-if="template.is_system" size="small" type="info">系统预设</el-tag>
-            <el-tag v-else size="small" type="success">自定义</el-tag>
+            <span class="card-name">{{ template.category ? (ROLE_LABELS[template.category] || template.name) : template.name }}</span>
+            <el-tag v-if="!template.is_system" size="small" type="success">自定义</el-tag>
           </div>
+          <el-button
+            v-if="template.category"
+            size="small"
+            type="primary"
+            link
+            class="edit-role-btn"
+            @click.stop="emit('edit-role', template.category!)"
+          >编辑权限</el-button>
         </div>
-        <p class="card-desc">{{ template.description }}</p>
         <div class="card-stats">
-          <span class="stat">
-            <el-icon><Check /></el-icon>
-            {{ countEnabled(template) }} 项已启用
-          </span>
-          <span class="stat disabled">
-            <el-icon><Close /></el-icon>
-            {{ countDisabled(template) }} 项已禁用
-          </span>
-        </div>
-      </div>
-
-      <!-- 自定义模板入口 -->
-      <div class="template-card add-card" @click="showCreateDialog = true">
-        <el-icon class="add-icon"><Plus /></el-icon>
-        <span>保存当前配置为模板</span>
-      </div>
-    </div>
-
-    <!-- 预览面板 -->
-    <transition name="slide-up">
-      <div v-if="selected" class="preview-panel">
-        <div class="preview-header">
-          <div class="preview-title">
-            <span class="preview-icon">{{ roleIcon(selected.category) }}</span>
-            <strong>{{ selected.name }}</strong>
-            <span class="preview-desc">{{ selected.description }}</span>
-          </div>
-          <div class="preview-actions">
-            <el-button @click="selected = null">取消</el-button>
-            <el-button type="primary" :loading="applying" @click="applyTemplate">
+          <template v-if="props.currentPermissions && template.category && props.currentPermissions[template.category]">
+            <span class="stat">
               <el-icon><Check /></el-icon>
-              应用此模板
-            </el-button>
-          </div>
-        </div>
-
-        <div class="preview-body">
-          <div v-for="(rolePerms, role) in selected.permissions" :key="role" class="role-preview">
-            <div class="role-label">{{ role }}</div>
-            <div class="perm-summary">
-              <el-tag type="success" size="small">启用 {{ countRoleEnabled(rolePerms) }}</el-tag>
-              <el-tag type="danger" size="small">禁用 {{ countRoleDisabled(rolePerms) }}</el-tag>
-            </div>
-          </div>
+              {{ countCurrentEnabled(template.category) }} 项已启用
+            </span>
+            <span class="stat disabled">
+              <el-icon><Close /></el-icon>
+              {{ countCurrentDisabled(template.category) }} 项已禁用
+            </span>
+          </template>
+          <template v-else>
+            <span class="stat">
+              <el-icon><Check /></el-icon>
+              {{ countEnabled(template) }} 项已启用
+            </span>
+            <span class="stat disabled">
+              <el-icon><Close /></el-icon>
+              {{ countDisabled(template) }} 项已禁用
+            </span>
+          </template>
         </div>
       </div>
-    </transition>
-
-    <!-- 创建自定义模板对话框 -->
-    <el-dialog v-model="showCreateDialog" title="保存为自定义模板" width="480px">
-      <el-form :model="createForm" label-width="80px">
-        <el-form-item label="模板名称" required>
-          <el-input v-model="createForm.name" placeholder="请输入模板名称" />
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input v-model="createForm.description" type="textarea" :rows="2" placeholder="可选描述" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showCreateDialog = false">取消</el-button>
-        <el-button type="primary" :loading="creating" @click="createTemplate">保存</el-button>
-      </template>
-    </el-dialog>
+      </el-tooltip>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
-import { Check, Close, Plus } from "@element-plus/icons-vue";
+import { Check, Close } from "@element-plus/icons-vue";
 import {
   fetchPermissionTemplates,
-  createPermissionTemplate,
-  applyPermissionTemplate,
   type PermissionTemplate,
 } from "@/api/projectPermissions";
 
 const props = defineProps<{
   studyId: string;
   currentPermissions?: Record<string, Record<string, boolean>>;
+  activeRoles?: string[];
 }>();
 
 const emit = defineEmits<{
-  applied: [permissions: Record<string, Record<string, { allowed: boolean }>>];
+  "edit-role": [role: string];
 }>();
 
 const templates = ref<PermissionTemplate[]>([]);
-const selectedId = ref<string | null>(null);
-const selected = computed(() => templates.value.find((t) => t.id === selectedId.value) ?? null);
-const applying = ref(false);
-const creating = ref(false);
-const showCreateDialog = ref(false);
-const createForm = ref({ name: "", description: "" });
+
+const ROLE_LABELS: Record<string, string> = {
+  PM: "项目负责人", CRA: "CRA", PV: "PV",
+  MEDICAL_REVIEW: "医学审核", IMP: "药品管理员", QA: "QA",
+};
 
 const roleIcon = (category: string | null) => {
   const icons: Record<string, string> = {
-    PM: "👑",
-    CRA: "📋",
-    PV: "🔍",
-    MEDICAL_REVIEW: "🏥",
-    IMP: "📦",
-    QA: "✅",
+    PM: "👑", CRA: "📋", PV: "🔍",
+    MEDICAL_REVIEW: "🏥", IMP: "📦", QA: "✅",
   };
   return icons[category ?? ""] ?? "📄";
 };
 
+const isRoleActive = (role: string) => props.activeRoles?.includes(role) ?? false;
+
 const countEnabled = (t: PermissionTemplate) => {
   let n = 0;
-  for (const perms of Object.values(t.permissions) as Record<string, boolean>[]) {
+  for (const perms of Object.values(t.permissions) as Record<string, boolean>[])
     n += (Object.values(perms) as boolean[]).filter(Boolean).length;
-  }
   return n;
 };
 
 const countDisabled = (t: PermissionTemplate) => {
   let n = 0;
-  for (const perms of Object.values(t.permissions) as Record<string, boolean>[]) {
+  for (const perms of Object.values(t.permissions) as Record<string, boolean>[])
     n += (Object.values(perms) as boolean[]).filter((v) => !v).length;
-  }
   return n;
 };
 
-const countRoleEnabled = (perms: Record<string, boolean>) =>
-  Object.values(perms).filter(Boolean).length;
-
-const countRoleDisabled = (perms: Record<string, boolean>) =>
-  Object.values(perms).filter((v) => !v).length;
-
-const select = (t: PermissionTemplate) => {
-  selectedId.value = selectedId.value === t.id ? null : t.id;
+const countCurrentEnabled = (role: string) => {
+  const perms = props.currentPermissions?.[role];
+  if (!perms) return 0;
+  return Object.values(perms).filter(Boolean).length;
 };
 
-const applyTemplate = async () => {
-  if (!selected.value) return;
-  applying.value = true;
-  try {
-    const res = await applyPermissionTemplate(props.studyId, {
-      template_id: selected.value.id,
-      override: true,
-    });
-    ElMessage.success(`已应用模板「${selected.value.name}」`);
-    emit("applied", res.data.permissions);
-    selectedId.value = null;
-  } catch {
-    ElMessage.error("应用模板失败");
-  } finally {
-    applying.value = false;
-  }
-};
-
-const createTemplate = async () => {
-  if (!createForm.value.name.trim()) {
-    ElMessage.warning("请输入模板名称");
-    return;
-  }
-  if (!props.currentPermissions) {
-    ElMessage.warning("当前没有权限配置可保存");
-    return;
-  }
-  creating.value = true;
-  try {
-    await createPermissionTemplate({
-      name: createForm.value.name,
-      description: createForm.value.description || undefined,
-      template_type: "CUSTOM",
-      permissions: props.currentPermissions,
-    });
-    ElMessage.success("模板保存成功");
-    showCreateDialog.value = false;
-    createForm.value = { name: "", description: "" };
-    await loadTemplates();
-  } catch {
-    ElMessage.error("保存模板失败");
-  } finally {
-    creating.value = false;
-  }
+const countCurrentDisabled = (role: string) => {
+  const perms = props.currentPermissions?.[role];
+  if (!perms) return 0;
+  return Object.values(perms).filter((v) => !v).length;
 };
 
 const loadTemplates = async () => {
@@ -246,19 +167,24 @@ onMounted(loadTemplates);
   padding: 14px;
   border: 1.5px solid #e4e7ed;
   border-radius: 8px;
-  cursor: pointer;
   transition: all 0.2s;
   background: #fff;
 }
 
-.template-card:hover {
-  border-color: #409eff;
-  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+.template-card.inactive {
+  border-style: dashed;
+  background: #fafafa;
+  opacity: 0.75;
 }
 
-.template-card.selected {
+.template-card:hover {
+  border-color: #c0c4cc;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.template-card:not(.inactive):hover {
   border-color: #409eff;
-  background: #ecf5ff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
 }
 
 .card-header {
@@ -268,11 +194,6 @@ onMounted(loadTemplates);
   margin-bottom: 6px;
 }
 
-.card-icon {
-  font-size: 20px;
-  line-height: 1;
-}
-
 .card-title-wrap {
   display: flex;
   flex-direction: column;
@@ -285,11 +206,23 @@ onMounted(loadTemplates);
   color: #303133;
 }
 
-.card-desc {
-  font-size: 12px;
+.template-card.inactive .card-name {
   color: #909399;
-  margin: 0 0 8px;
-  line-height: 1.4;
+}
+
+.edit-role-btn {
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.template-card:hover .edit-role-btn {
+  opacity: 1;
+}
+
+.card-icon {
+  font-size: 20px;
+  line-height: 1;
 }
 
 .card-stats {
@@ -299,6 +232,10 @@ onMounted(loadTemplates);
   color: #67c23a;
 }
 
+.template-card.inactive .card-stats {
+  color: #b0b0b0;
+}
+
 .card-stats .stat {
   display: flex;
   align-items: center;
@@ -309,92 +246,7 @@ onMounted(loadTemplates);
   color: #f56c6c;
 }
 
-.add-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  border-style: dashed;
-  color: #909399;
-  font-size: 13px;
-  min-height: 110px;
-}
-
-.add-card:hover {
-  color: #409eff;
-  border-color: #409eff;
-}
-
-.add-icon {
-  font-size: 24px;
-}
-
-.preview-panel {
-  border: 1.5px solid #409eff;
-  border-radius: 8px;
-  background: #ecf5ff;
-  padding: 14px 16px;
-}
-
-.preview-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.preview-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-}
-
-.preview-icon {
-  font-size: 18px;
-}
-
-.preview-desc {
-  color: #909399;
-  font-size: 12px;
-}
-
-.preview-body {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.role-preview {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: #fff;
-  border-radius: 6px;
-  padding: 6px 10px;
-}
-
-.role-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: #303133;
-  min-width: 60px;
-}
-
-.perm-summary {
-  display: flex;
-  gap: 6px;
-}
-
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.25s ease;
-}
-
-.slide-up-enter-from,
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(8px);
+.template-card.inactive .card-stats .stat.disabled {
+  color: #c0c4cc;
 }
 </style>

frontend/src/locales/zh-CN.ts

@@ -257,6 +257,7 @@ export const TEXT = {
     accountManagement: "账号管理",
     projectManagement: "项目管理",
     auditLogs: "审计日志",
+    permissionManagement: "权限管理",
     currentProject: "当前项目",
     projectOverview: "项目总览",
     projectMilestones: "项目里程碑",

frontend/src/router/index.ts

@@ -16,10 +16,9 @@ import AuditLogs from "../views/admin/AuditLogs.vue";
 import AdminUsers from "../views/admin/Users.vue";
 import AdminUserApproval from "../views/admin/AdminUserApproval.vue";
 import AdminProjects from "../views/admin/Projects.vue";
-import ProjectMembers from "../views/admin/ProjectMembers.vue";
 import AdminSites from "../views/admin/Sites.vue";
+import PermissionManagement from "../views/admin/PermissionManagement.vue";
 import ProjectDetail from "../views/admin/ProjectDetail.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";
@@ -437,15 +436,11 @@ const routes: RouteRecordRaw[] = [
       },
       {
         path: "projects/:projectId/members",
-        name: "AdminProjectMembers",
-        component: ProjectMembers,
-        meta: { title: TEXT.modules.adminProjectMembers.memberLabel, adminProjectPermission: { module: "project_members", action: "read" } },
+        redirect: (to) => ({ path: "/admin/permissions", query: { projectId: to.params.projectId as string, sub: "members" } }),
       },
       {
         path: "projects/:id/api-permissions",
-        name: "AdminApiPermissions",
-        component: ApiPermissions,
-        meta: { title: "接口级权限管理", adminProjectPermission: { module: "project_members", action: "write" } },
+        redirect: (to) => ({ path: "/admin/permissions", query: { projectId: to.params.id as string } }),
       },
       {
         path: "projects/:projectId/sites",
@@ -459,6 +454,12 @@ const routes: RouteRecordRaw[] = [
         component: AuditLogs,
         meta: { title: TEXT.menu.auditLogs, adminProjectPermission: { module: "audit_export", action: "read" } },
       },
+      {
+        path: "permissions",
+        name: "AdminPermissions",
+        component: PermissionManagement,
+        meta: { title: TEXT.menu.permissionManagement, requiresAdmin: true },
+      },
     ],
   },
   {

frontend/src/views/admin/Projects.vue

@@ -141,7 +141,7 @@ const canProject = (row: Study, module: string, action: "read" | "write") => {
 };
 
 const goMembers = (row: Study) => {
-  router.push(`/admin/projects/${row.id}/members`);
+  router.push(`/admin/permissions?projectId=${row.id}&sub=members`);
 };
 
 const goSites = (row: Study) => {
@@ -149,7 +149,7 @@ const goSites = (row: Study) => {
 };
 
 const goPermissions = (row: Study) => {
-  router.push(`/admin/projects/${row.id}/api-permissions`);
+  router.push(`/admin/permissions?projectId=${row.id}`);
 };
 
 const goAuditLogs = async (row: Study) => {