统一业务页面权限与抽屉编辑

1、将 FAQ 分类和问题维护改为抽屉交互，并按分类、问题、回复的细粒度权限控制入口。

2、将注意事项、可行性和伦理记录接入详情页抽屉编辑，创建时支持先保存主记录再上传附件。

3、将参与者基础信息编辑改为抽屉，详情页按可读权限显示病史、访视、AE 和 PD 标签页。

4、补充业务页面权限一致性测试，覆盖停用中心、无权限入口和面包屑上下文。

frontend/src/components/FaqCategoryForm.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = () => readFileSync(resolve(__dirname, "./FaqCategoryForm.vue"), "utf8");
+
+describe("FaqCategoryForm drawer editor", () => {
+  it("uses the shared right-side drawer pattern instead of a dialog", () => {
+    const source = readSource();
+
+    expect(source).toContain("<el-drawer");
+    expect(source).toContain("faq-category-editor-drawer");
+    expect(source).toContain('direction="rtl"');
+    expect(source).toContain("editor-header");
+    expect(source).toContain("drawer-footer");
+    expect(source).not.toContain("<el-dialog");
+  });
+
+  it("labels the required name field as category name", () => {
+    const source = readSource();
+
+    expect(source).toContain("TEXT.modules.knowledgeMedicalConsult.categoryName");
+    expect(source).not.toContain(':label="TEXT.common.fields.name"');
+  });
+});

frontend/src/components/FaqCategoryForm.vue

@@ -1,24 +1,47 @@
 <template>
-  <el-dialog append-to=".layout-main .content-wrapper" :model-value="modelValue" :title="isEdit ? TEXT.modules.knowledgeMedicalConsult.editCategory : TEXT.modules.knowledgeMedicalConsult.newCategory" width="480px" @close="close">
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-      <el-form-item :label="TEXT.common.fields.name" prop="name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item :label="TEXT.common.fields.description">
-        <el-input v-model="form.description" type="textarea" :rows="2" />
-      </el-form-item>
-      <el-form-item :label="TEXT.common.fields.sortOrder">
-        <el-input-number v-model="form.sort_order" :min="0" :step="1" />
-      </el-form-item>
-      <el-form-item :label="TEXT.common.fields.enabled">
-        <el-switch v-model="form.is_active" />
-      </el-form-item>
+  <el-drawer
+    v-if="modelValue"
+    :model-value="modelValue"
+    direction="rtl"
+    size="520px"
+    :close-on-click-modal="true"
+    :show-close="false"
+    class="faq-category-editor-drawer"
+    @update:model-value="emit('update:modelValue', $event)"
+    @close="close"
+  >
+    <template #header>
+      <div class="editor-header">
+        <div class="editor-title">{{ isEdit ? TEXT.modules.knowledgeMedicalConsult.editCategory : TEXT.modules.knowledgeMedicalConsult.newCategory }}</div>
+      </div>
+    </template>
+    <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="faq-category-form">
+      <div class="form-group">
+        <div class="form-group-title">
+          <span class="group-dot group-dot-basic"></span>
+          {{ TEXT.modules.knowledgeMedicalConsult.title }}
+        </div>
+        <el-form-item :label="TEXT.modules.knowledgeMedicalConsult.categoryName" prop="name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item :label="TEXT.common.fields.description">
+          <el-input v-model="form.description" type="textarea" :rows="2" />
+        </el-form-item>
+        <el-form-item :label="TEXT.common.fields.sortOrder">
+          <el-input-number v-model="form.sort_order" :min="0" :step="1" />
+        </el-form-item>
+        <el-form-item :label="TEXT.common.fields.enabled">
+          <el-switch v-model="form.is_active" />
+        </el-form-item>
+      </div>
     </el-form>
     <template #footer>
-      <el-button @click="close">{{ TEXT.common.actions.cancel }}</el-button>
-      <el-button type="primary" :loading="submitting" @click="onSubmit">{{ TEXT.common.actions.save }}</el-button>
+      <div class="drawer-footer">
+        <el-button @click="close">{{ TEXT.common.actions.cancel }}</el-button>
+        <el-button type="primary" :loading="submitting" @click="onSubmit">{{ TEXT.common.actions.save }}</el-button>
+      </div>
     </template>
-  </el-dialog>
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
@@ -44,7 +67,7 @@ const form = reactive({
 });
 
 const rules: FormRules = {
-  name: [{ required: true, message: requiredMessage(TEXT.common.fields.name), trigger: "blur" }],
+  name: [{ required: true, message: requiredMessage(TEXT.modules.knowledgeMedicalConsult.categoryName), trigger: "blur" }],
 };
 
 const isEdit = computed(() => !!props.category);
@@ -117,3 +140,50 @@ const onSubmit = async () => {
   }
 };
 </script>
+
+<style scoped>
+.editor-header {
+  display: flex;
+  align-items: center;
+}
+
+.editor-title {
+  color: var(--ctms-text-main);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.faq-category-form {
+  padding: 0 4px;
+}
+
+.form-group {
+  padding: 16px 0;
+}
+
+.form-group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  color: var(--ctms-text-main);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.group-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.group-dot-basic {
+  background: var(--ctms-primary);
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

frontend/src/components/FaqCategoryPanel.vue

@@ -2,8 +2,8 @@
   <div class="panel unified-shell">
     <div class="header">
       <span>{{ TEXT.common.labels.category }}</span>
-      <div v-if="canMaintain">
-        <PermissionAction action="faq.edit">
+      <div v-if="canCreateCategory">
+        <PermissionAction action="faq.category.create">
           <el-button type="primary" size="small" @click="openForm()">{{ TEXT.modules.knowledgeMedicalConsult.newCategory }}</el-button>
         </PermissionAction>
       </div>
@@ -12,11 +12,11 @@
       <el-menu-item index="">{{ TEXT.common.labels.all }}</el-menu-item>
       <el-menu-item v-for="c in sortedCategories" :key="c.id" :index="c.id">
         <span class="name" :title="c.name">{{ c.name }}</span>
-        <div v-if="canEdit(c) || canDelete" class="actions">
-          <PermissionAction v-if="canEdit(c)" action="faq.edit">
+        <div v-if="canEdit(c) || canDeleteCategory" class="actions">
+          <PermissionAction v-if="canEdit(c)" action="faq.category.update">
             <el-button type="text" size="small" @click.stop="openForm(c)">{{ TEXT.common.actions.edit }}</el-button>
           </PermissionAction>
-          <PermissionAction v-if="canDelete" action="faq.edit">
+          <PermissionAction v-if="canDeleteCategory" action="faq.category.delete">
             <el-button type="text" size="small" class="danger" @click.stop="onDelete(c)">{{ TEXT.common.actions.delete }}</el-button>
           </PermissionAction>
         </div>
@@ -52,8 +52,9 @@ const editing = ref<FaqCategory | null>(null);
 
 const { can } = usePermission();
 const isAdmin = computed(() => !!auth.user?.is_admin);
-const canMaintain = computed(() => can("faq.edit"));
-const canDelete = computed(() => isAdmin.value);
+const canCreateCategory = computed(() => can("faq.category.create"));
+const canUpdateCategory = computed(() => can("faq.category.update"));
+const canDeleteCategory = computed(() => can("faq.category.delete"));
 
 const sortedCategories = computed(() =>
   [...props.categories].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
@@ -62,7 +63,7 @@ const sortedCategories = computed(() =>
 const activeCategory = computed(() => props.modelValue || "");
 
 const canEdit = (c: FaqCategory) => {
-  if (!canMaintain.value) return false;
+  if (!canUpdateCategory.value) return false;
   if (isAdmin.value) return true;
   return c.study_id === study.currentStudy?.id;
 };
@@ -77,13 +78,17 @@ const openForm = (cat?: FaqCategory) => {
 };
 
 const onDelete = async (cat: FaqCategory) => {
+  if (!canDeleteCategory.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
   const ok = await ElMessageBox.confirm(
     TEXT.modules.knowledgeMedicalConsult.confirmDeleteCategory.replace("{name}", cat.name),
     TEXT.common.labels.tips
   ).catch(() => null);
   if (!ok) return;
   try {
-    await deleteFaqCategory(cat.id);
+    await deleteFaqCategory(cat.id, study.currentStudy?.id);
     ElMessage.success(TEXT.common.messages.deleteSuccess);
     emit("refresh");
   } catch (e: any) {

frontend/src/components/FaqItemForm.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = () => readFileSync(resolve(__dirname, "./FaqItemForm.vue"), "utf8");
+
+describe("FaqItemForm drawer", () => {
+  it("uses the unified drawer pattern instead of a dialog", () => {
+    const source = readSource();
+
+    expect(source).toContain("<el-drawer");
+    expect(source).toContain('class="faq-item-editor-drawer"');
+    expect(source).toContain('class="editor-header"');
+    expect(source).toContain('class="drawer-footer"');
+    expect(source).not.toContain("<el-dialog");
+    expect(source).not.toContain('append-to=".layout-main .content-wrapper"');
+  });
+});

frontend/src/components/FaqItemForm.vue

@@ -1,23 +1,47 @@
 <template>
-  <el-dialog append-to=".layout-main .content-wrapper" :model-value="modelValue" :title="isEdit ? TEXT.modules.knowledgeMedicalConsult.editItem : TEXT.modules.knowledgeMedicalConsult.newItem" width="640px" @close="close">
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-      <el-form-item :label="TEXT.common.labels.category" prop="category_id">
-        <el-select v-model="form.category_id" :placeholder="TEXT.common.placeholders.select">
-          <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="TEXT.common.fields.question" prop="question">
-        <el-input v-model="form.question" />
-      </el-form-item>
-      <el-form-item :label="TEXT.common.fields.enabled">
-        <el-switch v-model="form.is_active" />
-      </el-form-item>
+  <el-drawer
+    v-if="modelValue"
+    :model-value="modelValue"
+    direction="rtl"
+    size="620px"
+    :close-on-click-modal="true"
+    :show-close="false"
+    class="faq-item-editor-drawer"
+    @update:model-value="emit('update:modelValue', $event)"
+    @close="close"
+  >
+    <template #header>
+      <div class="editor-header">
+        <div class="editor-title">{{ isEdit ? TEXT.modules.knowledgeMedicalConsult.editItem : TEXT.modules.knowledgeMedicalConsult.newItem }}</div>
+      </div>
+    </template>
+
+    <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="faq-item-form">
+      <div class="form-group">
+        <div class="form-group-title">
+          <span class="group-dot group-dot-basic"></span>
+          {{ TEXT.common.labels.basicInfo }}
+        </div>
+        <el-form-item :label="TEXT.common.labels.category" prop="category_id">
+          <el-select v-model="form.category_id" :placeholder="TEXT.common.placeholders.select" class="full-width">
+            <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="TEXT.common.fields.question" prop="question">
+          <el-input v-model="form.question" />
+        </el-form-item>
+        <el-form-item :label="TEXT.common.fields.enabled">
+          <el-switch v-model="form.is_active" />
+        </el-form-item>
+      </div>
     </el-form>
     <template #footer>
-      <el-button @click="close">{{ TEXT.common.actions.cancel }}</el-button>
-      <el-button type="primary" :loading="submitting" @click="onSubmit">{{ TEXT.common.actions.submit }}</el-button>
+      <div class="drawer-footer">
+        <el-button @click="close">{{ TEXT.common.actions.cancel }}</el-button>
+        <el-button type="primary" :loading="submitting" @click="onSubmit">{{ TEXT.common.actions.submit }}</el-button>
+      </div>
     </template>
-  </el-dialog>
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
@@ -98,3 +122,54 @@ const onSubmit = async () => {
   }
 };
 </script>
+
+<style scoped>
+.editor-header {
+  display: flex;
+  align-items: center;
+}
+
+.editor-title {
+  color: var(--ctms-text-main);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.faq-item-form {
+  padding: 0 4px;
+}
+
+.form-group {
+  padding: 16px 0;
+}
+
+.form-group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  color: var(--ctms-text-main);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.group-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.group-dot-basic {
+  background: var(--ctms-primary);
+}
+
+.full-width {
+  width: 100%;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

frontend/src/components/FaqList.vue

@@ -27,16 +27,16 @@
         <el-tag :type="statusTagType(scope.row.status)" size="small">{{ statusLabel(scope.row.status) }}</el-tag>
       </template>
     </el-table-column>
-    <el-table-column :label="TEXT.common.labels.actions" width="140">
+    <el-table-column v-if="canUpdate || canDelete" :label="TEXT.common.labels.actions" width="140">
       <template #default="scope">
-        <el-button v-if="canDelete(scope.row)" type="text" size="small" class="danger" @click="remove(scope.row)">
+        <el-button v-if="canDelete" type="text" size="small" class="danger" @click.stop="remove(scope.row)">
           {{ TEXT.common.actions.delete }}
         </el-button>
-        <PermissionAction v-if="canEdit" action="faq.edit">
+        <PermissionAction v-if="canUpdate" action="faq.update">
           <el-button
             type="text"
             size="small"
-            @click="toggle(scope.row)"
+            @click.stop="toggle(scope.row)"
             :style="{ color: scope.row.is_active ? '#f56c6c' : '#67c23a' }"
           >
             {{ scope.row.is_active ? TEXT.common.actions.disable : TEXT.common.actions.enable }}
@@ -55,19 +55,18 @@ import { deleteFaqItem, updateFaqItem } from "../api/faqs";
 import type { FaqItem, FaqCategory } from "../api/faqs";
 import PermissionAction from "./PermissionAction.vue";
 import { displayDateTime, displayEnum } from "../utils/display";
-import { useAuthStore } from "../store/auth";
 import { TEXT } from "../locales";
 
 const props = defineProps<{
   items: FaqItem[];
   categories: FaqCategory[];
   loading: boolean;
-  canEdit: boolean;
+  canUpdate: boolean;
+  canDelete: boolean;
 }>();
 const emit = defineEmits(["refresh"]);
 
 const router = useRouter();
-const auth = useAuthStore();
 
 const categoryMap = computed(() =>
   props.categories.reduce<Record<string, string>>((acc, cur) => {
@@ -95,10 +94,11 @@ const statusTagType = (status?: string) => {
   return "info";
 };
 
-const canDelete = (row: FaqItem) => props.canEdit || row.created_by === auth.user?.id;
-
-
 const toggle = async (row: FaqItem) => {
+  if (!props.canUpdate) {
+    ElMessage.warning("权限不足");
+    return;
+  }
   const target = !row.is_active;
   const ok = await ElMessageBox.confirm(
     TEXT.modules.knowledgeMedicalConsult.confirmToggleItem.replace("{action}", target ? TEXT.common.actions.enable : TEXT.common.actions.disable),
@@ -106,7 +106,7 @@ const toggle = async (row: FaqItem) => {
   ).catch(() => null);
   if (!ok) return;
   try {
-    await updateFaqItem(row.id, { is_active: target });
+    await updateFaqItem(row.id, { study_id: row.study_id, is_active: target });
     ElMessage.success(TEXT.common.messages.updateSuccess);
     emit("refresh");
   } catch (e: any) {
@@ -115,13 +115,17 @@ const toggle = async (row: FaqItem) => {
 };
 
 const remove = async (row: FaqItem) => {
+  if (!props.canDelete) {
+    ElMessage.warning("权限不足");
+    return;
+  }
   const ok = await ElMessageBox.confirm(
     TEXT.modules.knowledgeMedicalConsult.confirmDeleteItem.replace("{name}", row.question),
     TEXT.common.labels.tips
   ).catch(() => null);
   if (!ok) return;
   try {
-    await deleteFaqItem(row.id);
+    await deleteFaqItem(row.id, row.study_id);
     ElMessage.success(TEXT.common.messages.deleteSuccess);
     emit("refresh");
   } catch (e: any) {