统一项目角色展示与预设文案

frontend/src/views/admin/PermissionManagement.vue

@@ -63,6 +63,7 @@
                 :study-id="selectedStudyId"
                 :current-permissions="currentPermissionsForTemplate"
                 :active-roles="activeRolesInStudy"
+                :refresh-key="templateRefreshKey"
                 @edit-role="openRoleEditor"
               />
               <ApiEndpointPermissions
@@ -242,11 +243,6 @@
         <!-- 标签页：角色列表 -->
         <el-tab-pane label="角色列表" name="list">
           <div class="drawer-toolbar">
-            <el-select v-model="typeFilter" placeholder="角色类型" clearable style="width: 140px" @change="loadTemplates">
-              <el-option label="预设角色" value="ROLE" />
-              <el-option label="场景角色" value="SCENARIO" />
-              <el-option label="自定义角色" value="CUSTOM" />
-            </el-select>
             <div class="filter-spacer" />
             <el-button type="primary" @click="openCreateTemplate">新增角色</el-button>
           </div>
@@ -378,18 +374,18 @@
     <!-- 新增/编辑角色对话框 -->
     <el-dialog v-model="templateDialogVisible" :title="editingTemplateId ? '编辑角色' : '新增角色'" width="520px" @close="resetTemplateForm">
       <el-form :model="templateForm" :rules="templateRules" ref="templateFormRef" label-width="90px">
-        <el-form-item label="角色名称" prop="name">
-          <el-input v-model="templateForm.name" placeholder="请输入角色名称" />
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input v-model="templateForm.description" type="textarea" :rows="2" placeholder="可选描述" />
-        </el-form-item>
         <el-form-item label="角色类型" prop="template_type">
           <el-select v-model="templateForm.template_type" style="width: 100%" :disabled="Boolean(editingTemplateId)">
             <el-option label="预设角色" value="ROLE" :disabled="!editingTemplateId" />
             <el-option label="自定义角色" value="CUSTOM" :disabled="Boolean(editingTemplateId)" />
           </el-select>
         </el-form-item>
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="templateForm.name" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="templateForm.description" type="textarea" :rows="2" placeholder="可选描述" />
+        </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="templateDialogVisible = false">取消</el-button>
@@ -460,6 +456,7 @@ import { useAuthStore } from "@/store/auth";
 import { displayDateTime } from "@/utils/display";
 import { isApiPermissionAllowed } from "@/utils/apiPermissionValue";
 import { isSystemAdmin } from "@/utils/roles";
+import { useRoleTemplateMeta } from "@/composables/useRoleTemplateMeta";
 import ApiEndpointPermissions from "@/components/ApiEndpointPermissions.vue";
 import PermissionMonitoring from "@/components/PermissionMonitoring.vue";
 import PermissionTemplateSelector from "@/components/PermissionTemplateSelector.vue";
@@ -472,19 +469,7 @@ const selectedProjectRole = computed(() => selectedStudy.value?.role_in_study ||
 const isSelectedProjectPm = computed(() => selectedProjectRole.value === "PM");
 const canManageSelectedProject = computed(() => isAdmin.value || isSelectedProjectPm.value);
 
-const ROLE_LABELS: Record<string, string> = {
-  PM: "项目负责人", CRA: "CRA", PV: "PV",
-  MEDICAL_REVIEW: "医学审核", IMP: "药品管理员",
-};
-const roleLabel = (role: string) => ROLE_LABELS[role] || role;
-
-const activeRoleLabels = computed(() => {
-  const result: Record<string, string> = {};
-  for (const role of activeRolesInStudy.value) {
-    result[role] = roleLabel(role);
-  }
-  return result;
-});
+const { roleLabel, roleDescription, roleIcon, loadRoleTemplates } = useRoleTemplateMeta();
 const ROLE_RANK: Record<string, number> = {
   ADMIN: 100, PM: 80, PV: 50, MEDICAL_REVIEW: 50, CRA: 40, IMP: 40,
 };
@@ -757,33 +742,31 @@ const templateDrawerVisible = ref(false);
 const templateDrawerTab = ref<"list" | "active" | "edit-role">("list");
 const templates = ref<PermissionTemplate[]>([]);
 const templatesLoading = ref(false);
-const typeFilter = ref<string | undefined>(undefined);
+const templateRefreshKey = ref(0);
 const templateDialogVisible = ref(false);
 const editingTemplateId = ref<string | null>(null);
 const templateFormRef = ref<FormInstance>();
 const templateSaving = ref(false);
 
-const ALL_ROLES = [
-  { key: "PM", label: "项目负责人", icon: "👑", desc: "项目管理员，拥有所有权限" },
-  { key: "CRA", label: "CRA", icon: "📋", desc: "数据输入和日常管理人员" },
-  { key: "PV", label: "PV", icon: "🔍", desc: "访视和参与者管理人员" },
-  { key: "MEDICAL_REVIEW", label: "医学审核", icon: "🏥", desc: "医学审核人员" },
-  { key: "IMP", label: "药品管理员", icon: "📦", desc: "物资和设备管理人员" },
-];
-
 const activeRolesDraft = ref<string[]>([]);
 const activeRolesLoading = ref(false);
 const activeRolesSaving = ref(false);
 
 const roleOptions = computed(() => {
-  const options = [...ALL_ROLES];
+  const options = templates.value.filter((template) => template.category).map((template) => ({
+    key: template.category!,
+    label: template.name,
+    icon: roleIcon(template.category),
+    desc: template.description || roleDescription(template.category),
+  }));
   const known = new Set(options.map((role) => role.key));
   for (const role of activeRolesDraft.value) {
     if (!known.has(role)) {
-      options.push({ key: role, label: role, icon: "🔧", desc: "自定义项目角色" });
+      options.push({ key: role, label: roleLabel(role), icon: roleIcon(role), desc: roleDescription(role) });
       known.add(role);
     }
   }
+  options.sort((a, b) => (ROLE_RANK[b.key] ?? 0) - (ROLE_RANK[a.key] ?? 0) || a.key.localeCompare(b.key));
   return options;
 });
 
@@ -840,8 +823,7 @@ const templateRules: FormRules = {
 const typeLabel = (t: string) => ({ ROLE: "预设角色", SCENARIO: "场景角色", CUSTOM: "自定义角色" }[t] ?? t);
 const typeTagType = (t: string) =>
   ({ ROLE: "primary", SCENARIO: "warning", CUSTOM: "success" } as Record<string, any>)[t] ?? "info";
-const templateRoleName = (row: PermissionTemplate) => row.category ? roleLabel(row.category) : row.name;
-const roleDisplayName = (row: PermissionTemplate) => templateRoleName(row);
+const roleDisplayName = (row: PermissionTemplate) => row.name;
 const countEnabledPermissions = (permissions: Record<string, boolean>) =>
   Object.values(permissions).filter(Boolean).length;
 const countPermissions = (row: PermissionTemplate) => {
@@ -858,8 +840,10 @@ const countPermissions = (row: PermissionTemplate) => {
 const loadTemplates = async () => {
   templatesLoading.value = true;
   try {
-    const res = await fetchPermissionTemplates(typeFilter.value ? { template_type: typeFilter.value } : undefined);
+    const res = await fetchPermissionTemplates();
     templates.value = res.data;
+    await loadRoleTemplates();
+    templateRefreshKey.value += 1;
   } catch {
     ElMessage.error("加载角色失败");
   } finally {
@@ -876,7 +860,7 @@ const openCreateTemplate = () => {
 const openEditTemplate = (row: PermissionTemplate) => {
   editingTemplateId.value = row.id;
   templateForm.value = {
-    name: templateRoleName(row), description: row.description ?? "",
+    name: row.name, description: row.description ?? "",
     template_type: row.template_type, category: row.category ?? "",
     recommended_roles: row.recommended_roles ?? "", tags: row.tags ?? "",
   };