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

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

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

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

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

frontend/src/views/startup/EthicsDetail.vue

@@ -5,13 +5,9 @@
         <div class="unified-section-header">
           <div class="ctms-section-title">{{ TEXT.modules.startupFeasibilityEthics.ethicsDetailTitle }}</div>
           <div class="ctms-section-actions">
-            <el-button type="primary" :disabled="isInactiveSite(detail.site_id)" @click="goEdit">
+            <el-button v-if="canUpdateEthics" type="primary" :disabled="isInactiveSite(detail.site_id)" @click="openEditor">
               {{ TEXT.common.actions.edit }}
             </el-button>
-            <el-button @click="goBack">
-              <el-icon class="el-icon--left"><ArrowLeft /></el-icon>
-              {{ TEXT.common.actions.back }}
-            </el-button>
           </div>
         </div>
         <el-descriptions :column="2" border class="ctms-descriptions">
@@ -33,17 +29,22 @@
           entity-type="startup_ethics"
           :entity-id="recordId"
           :readonly="isInactiveSite(detail.site_id)"
+          :hide-uploader="true"
         />
       </section>
     </div>
+    <EthicsEditorDrawer
+      v-model="editorVisible"
+      :record-id="recordId"
+      @success="handleEditorSuccess"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
-import { ArrowLeft } from "@element-plus/icons-vue";
 import dayjs from "dayjs";
 import { useStudyStore } from "../../store/study";
 import { getEthics } from "../../api/startup";
@@ -53,11 +54,14 @@ import { displayDate } from "../../utils/display";
 import AttachmentList from "../../components/attachments/AttachmentList.vue";
 import type { StageStatus } from "../ia/project-overview/overview.adapter";
 import { TEXT } from "../../locales";
+import { usePermission } from "../../utils/permission";
+import EthicsEditorDrawer from "./EthicsEditorDrawer.vue";
 
 const route = useRoute();
-const router = useRouter();
 const study = useStudyStore();
+const { can } = usePermission();
 const loading = ref(false);
+const editorVisible = ref(false);
 const recordId = route.params.recordId as string;
 const studyId = study.currentStudy?.id || "";
 const sites = ref<Site[]>([]);
@@ -66,6 +70,7 @@ const siteMap = computed(() => new Map(sites.value.map((site) => [site.id, site.
 const siteActiveMap = computed(() => new Map(sites.value.map((site) => [site.id, !!site.is_active])));
 const displaySite = (siteId?: string) => siteMap.value.get(siteId || "") || TEXT.common.fallback;
 const isInactiveSite = (siteId?: string) => Boolean(siteId) && siteActiveMap.value.get(siteId || "") === false;
+const canUpdateEthics = computed(() => can("startup.ethics.update"));
 
 const detail = reactive<any>({
   site_id: "",
@@ -134,6 +139,12 @@ const load = async () => {
   try {
     const { data } = await getEthics(studyId, recordId);
     Object.assign(detail, data);
+    const siteName = displaySite(detail.site_id);
+    const hasSiteName = siteName !== TEXT.common.fallback;
+    study.setViewContext({
+      siteName,
+      pageTitle: detail.approval_no || (hasSiteName ? siteName : TEXT.modules.startupFeasibilityEthics.ethicsDetailTitle),
+    });
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
   } finally {
@@ -141,18 +152,24 @@ const load = async () => {
   }
 };
 
-const goEdit = () => {
+const openEditor = () => {
+  if (!canUpdateEthics.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
   if (isInactiveSite(detail.site_id)) {
     ElMessage.warning("中心已停用");
     return;
   }
-  router.push(`/startup/ethics/${recordId}/edit`);
+  editorVisible.value = true;
 };
-const goBack = () => router.push("/startup/feasibility-ethics");
 
-onMounted(() => {
-  loadSites();
-  load();
+const handleEditorSuccess = async () => {
+  await load();
+};
+onMounted(async () => {
+  await loadSites();
+  await load();
 });
 </script>
 

frontend/src/views/startup/EthicsEditorDrawer.vue

@@ -0,0 +1,277 @@
+<template>
+  <el-drawer
+    v-if="modelValue"
+    :model-value="modelValue"
+    direction="rtl"
+    size="620px"
+    :close-on-click-modal="true"
+    :before-close="drawerDirtyGuard.beforeClose"
+    :show-close="false"
+    class="ethics-editor-drawer"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #header>
+      <div class="editor-header">
+        <div class="editor-title">{{ recordId ? TEXT.modules.startupFeasibilityEthics.ethicsEditTitle : TEXT.modules.startupFeasibilityEthics.ethicsNewTitle }}</div>
+      </div>
+    </template>
+
+    <el-form :model="form" label-position="top" class="startup-editor-form">
+      <div class="form-group">
+        <div class="form-group-title">
+          <span class="group-dot group-dot-basic"></span>
+          {{ TEXT.modules.startupFeasibilityEthics.ethicsTab }}
+        </div>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.site">
+              <el-select v-model="form.site_id" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.select" clearable class="full-width">
+                <el-option v-for="site in siteOptions" :key="site.value" :label="site.label" :value="site.value" :disabled="site.disabled" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.approvalNo">
+              <el-input v-model="form.approval_no" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.input + TEXT.common.fields.approvalNo" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.submitDate">
+              <el-date-picker v-model="form.submit_date" :disabled="isReadOnly" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" class="full-width" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.acceptDate">
+              <el-date-picker v-model="form.accept_date" :disabled="isReadOnly" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" class="full-width" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.meetingDate">
+              <el-date-picker v-model="form.meeting_date" :disabled="isReadOnly" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" class="full-width" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.approvedDate">
+              <el-date-picker v-model="form.approved_date" :disabled="isReadOnly" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" class="full-width" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="form-group">
+        <div class="form-group-title">
+          <span class="group-dot group-dot-attachment"></span>
+          {{ TEXT.common.labels.attachments }}
+        </div>
+        <AttachmentList
+          ref="attachmentPanelRef"
+          :study-id="studyId"
+          entity-type="startup_ethics"
+          :entity-id="recordId || ''"
+          :mode="'upload'"
+          :readonly="isReadOnly"
+        />
+      </div>
+    </el-form>
+
+    <template #footer>
+      <div class="drawer-footer">
+        <el-button @click="emit('update:modelValue', false)">{{ TEXT.common.actions.cancel }}</el-button>
+        <el-button type="primary" :loading="saving" :disabled="isReadOnly" @click="submit">{{ TEXT.common.actions.save }}</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { createEthics, getEthics, updateEthics } from "../../api/startup";
+import { fetchSites } from "../../api/sites";
+import { useStudyStore } from "../../store/study";
+import type { Site } from "../../types/api";
+import { TEXT } from "../../locales";
+import { usePermission } from "../../utils/permission";
+import { useDrawerDirtyGuard } from "../../utils/drawerDirtyGuard";
+import AttachmentList from "../../components/attachments/AttachmentList.vue";
+
+const props = defineProps<{ modelValue: boolean; recordId?: string }>();
+const emit = defineEmits<{
+  (event: "update:modelValue", value: boolean): void;
+  (event: "success", id: string): void;
+}>();
+
+const study = useStudyStore();
+const { can } = usePermission();
+const saving = ref(false);
+const sites = ref<Site[]>([]);
+const attachmentPanelRef = ref<InstanceType<typeof AttachmentList> | null>(null);
+const studyId = computed(() => study.currentStudy?.id || "");
+const isEdit = computed(() => !!props.recordId);
+
+const form = reactive({
+  site_id: "",
+  submit_date: "",
+  accept_date: "",
+  meeting_date: "",
+  approved_date: "",
+  approval_no: "",
+});
+
+const siteOptions = computed(() =>
+  sites.value.map((site) => ({ value: site.id, label: site.name || TEXT.common.fallback, disabled: !site.is_active }))
+);
+const siteActiveMap = computed(() => new Map(sites.value.map((site) => [site.id, !!site.is_active])));
+const canCreateEthics = computed(() => can("startup.ethics.create"));
+const canUpdateEthics = computed(() => can("startup.ethics.update"));
+const canSaveEthics = computed(() => (isEdit.value ? canUpdateEthics.value : canCreateEthics.value));
+const isInactiveSite = computed(() => isEdit.value && !!form.site_id && siteActiveMap.value.get(form.site_id) === false);
+const isReadOnly = computed(() => !canSaveEthics.value || isInactiveSite.value);
+const drawerDirtyGuard = useDrawerDirtyGuard(() => ({
+  form,
+  attachments: attachmentPanelRef.value?.pendingSnapshot() || [],
+}));
+const reset = () => {
+  form.site_id = "";
+  form.submit_date = "";
+  form.accept_date = "";
+  form.meeting_date = "";
+  form.approved_date = "";
+  form.approval_no = "";
+};
+
+const loadSites = async () => {
+  if (!studyId.value) return;
+  try {
+    const { data } = await fetchSites(studyId.value, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
+  }
+};
+
+const load = async () => {
+  reset();
+  await loadSites();
+  if (!isEdit.value || !studyId.value || !props.recordId) {
+    drawerDirtyGuard.syncBaseline();
+    return;
+  }
+  try {
+    const { data } = await getEthics(studyId.value, props.recordId);
+    Object.assign(form, {
+      site_id: data.site_id || "",
+      submit_date: data.submit_date || "",
+      accept_date: data.accept_date || "",
+      meeting_date: data.meeting_date || "",
+      approved_date: data.approved_date || "",
+      approval_no: data.approval_no || "",
+    });
+    drawerDirtyGuard.syncBaseline();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
+  }
+};
+
+const submit = async () => {
+  if (!studyId.value) return;
+  if (!canSaveEthics.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
+  if (isInactiveSite.value || (form.site_id && siteActiveMap.value.get(form.site_id) === false)) {
+    ElMessage.warning("中心已停用");
+    return;
+  }
+  saving.value = true;
+  try {
+    const payload = {
+      site_id: form.site_id || null,
+      submit_date: form.submit_date || null,
+      accept_date: form.accept_date || null,
+      meeting_date: form.meeting_date || null,
+      approved_date: form.approved_date || null,
+      approval_no: form.approval_no || null,
+    };
+    const id = props.recordId || (await createEthics(studyId.value, payload)).data.id;
+    if (props.recordId) {
+      await updateEthics(studyId.value, props.recordId, payload);
+    }
+    await attachmentPanelRef.value?.uploadPending(id);
+    ElMessage.success(props.recordId ? TEXT.common.messages.saveSuccess : TEXT.common.messages.createSuccess);
+    drawerDirtyGuard.syncBaseline();
+    emit("success", id);
+    emit("update:modelValue", false);
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
+  } finally {
+    saving.value = false;
+  }
+};
+
+watch(
+  () => [props.modelValue, props.recordId, studyId.value] as const,
+  ([visible]) => {
+    if (visible) load();
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.editor-header {
+  display: flex;
+  align-items: center;
+}
+
+.editor-title {
+  color: var(--ctms-text-main);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.startup-editor-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);
+}
+
+.group-dot-attachment {
+  background: #22c55e;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

frontend/src/views/startup/EthicsForm.vue

@@ -85,18 +85,17 @@
         </el-form>
       </section>
       <section class="unified-section">
-        <template v-if="isEdit && recordId">
-          <div class="ctms-section-header">
-            <div class="ctms-section-title">{{ TEXT.common.labels.attachments }}</div>
-          </div>
-          <AttachmentList
-            :study-id="studyId"
-            entity-type="startup_ethics"
-            :entity-id="recordId"
-            :readonly="isReadOnly"
-          />
-        </template>
-        <StateEmpty v-else :description="TEXT.modules.startupFeasibilityEthics.ethicsUploadHint" />
+        <div class="ctms-section-header">
+          <div class="ctms-section-title">{{ TEXT.common.labels.attachments }}</div>
+        </div>
+        <AttachmentList
+          ref="attachmentPanelRef"
+          :study-id="studyId"
+          entity-type="startup_ethics"
+          :entity-id="recordId || ''"
+          :readonly="isReadOnly"
+          :mode="'upload'"
+        />
       </section>
     </div>
   </div>
@@ -112,13 +111,15 @@ import { createEthics, getEthics, updateEthics } from "../../api/startup";
 import { fetchSites } from "../../api/sites";
 import type { Site } from "../../types/api";
 import AttachmentList from "../../components/attachments/AttachmentList.vue";
-import StateEmpty from "../../components/StateEmpty.vue";
 import { TEXT } from "../../locales";
+import { usePermission } from "../../utils/permission";
 
 const route = useRoute();
 const router = useRouter();
 const study = useStudyStore();
+const { can } = usePermission();
 const saving = ref(false);
+const attachmentPanelRef = ref<InstanceType<typeof AttachmentList> | null>(null);
 
 const recordId = computed(() => route.params.recordId as string | undefined);
 const isEdit = computed(() => !!recordId.value);
@@ -135,7 +136,11 @@ const siteActiveMap = computed(() => {
   });
   return map;
 });
-const isReadOnly = computed(() => isEdit.value && !!form.site_id && siteActiveMap.value[form.site_id] === false);
+const canCreateEthics = computed(() => can("startup.ethics.create"));
+const canUpdateEthics = computed(() => can("startup.ethics.update"));
+const canSaveEthics = computed(() => (isEdit.value ? canUpdateEthics.value : canCreateEthics.value));
+const isInactiveSite = computed(() => isEdit.value && !!form.site_id && siteActiveMap.value[form.site_id] === false);
+const isReadOnly = computed(() => !canSaveEthics.value || isInactiveSite.value);
 
 const form = reactive({
   site_id: "",
@@ -175,7 +180,11 @@ const load = async () => {
 
 const submit = async () => {
   if (!studyId.value) return;
-  if (isReadOnly.value) {
+  if (!canSaveEthics.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
+  if (isInactiveSite.value) {
     ElMessage.warning("中心已停用");
     return;
   }
@@ -193,15 +202,16 @@ const submit = async () => {
       approved_date: form.approved_date || null,
       approval_no: form.approval_no || null,
     };
+    let savedId = recordId.value || "";
     if (isEdit.value && recordId.value) {
       await updateEthics(studyId.value, recordId.value, payload);
-      ElMessage.success(TEXT.common.messages.saveSuccess);
-      router.push(`/startup/ethics/${recordId.value}`);
     } else {
       const { data } = await createEthics(studyId.value, payload);
-      ElMessage.success(TEXT.common.messages.createSuccess);
-      router.push(`/startup/ethics/${data.id}`);
+      savedId = data.id;
     }
+    await attachmentPanelRef.value?.uploadPending(savedId);
+    ElMessage.success(isEdit.value ? TEXT.common.messages.saveSuccess : TEXT.common.messages.createSuccess);
+    router.push(`/startup/ethics/${savedId}`);
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
   } finally {

frontend/src/views/startup/FeasibilityDetail.vue

@@ -5,13 +5,9 @@
         <div class="unified-section-header">
           <div class="ctms-section-title">{{ TEXT.modules.startupFeasibilityEthics.feasibilityDetailTitle }}</div>
           <div class="ctms-section-actions">
-            <el-button type="primary" :disabled="isInactiveSite(detail.site_id)" @click="goEdit">
+            <el-button v-if="canUpdateInitiation" type="primary" :disabled="isInactiveSite(detail.site_id)" @click="openEditor">
               {{ TEXT.common.actions.edit }}
             </el-button>
-            <el-button @click="goBack">
-              <el-icon class="el-icon--left"><ArrowLeft /></el-icon>
-              {{ TEXT.common.actions.back }}
-            </el-button>
           </div>
         </div>
         <el-descriptions :column="2" border class="ctms-descriptions">
@@ -32,17 +28,22 @@
           entity-type="startup_feasibility"
           :entity-id="recordId"
           :readonly="isInactiveSite(detail.site_id)"
+          :hide-uploader="true"
         />
       </section>
     </div>
+    <FeasibilityEditorDrawer
+      v-model="editorVisible"
+      :record-id="recordId"
+      @success="handleEditorSuccess"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
-import { ArrowLeft } from "@element-plus/icons-vue";
 import dayjs from "dayjs";
 import { useStudyStore } from "../../store/study";
 import { getFeasibility } from "../../api/startup";
@@ -52,11 +53,14 @@ import { displayDate } from "../../utils/display";
 import AttachmentList from "../../components/attachments/AttachmentList.vue";
 import type { StageStatus } from "../ia/project-overview/overview.adapter";
 import { TEXT } from "../../locales";
+import { usePermission } from "../../utils/permission";
+import FeasibilityEditorDrawer from "./FeasibilityEditorDrawer.vue";
 
 const route = useRoute();
-const router = useRouter();
 const study = useStudyStore();
+const { can } = usePermission();
 const loading = ref(false);
+const editorVisible = ref(false);
 const recordId = route.params.recordId as string;
 const studyId = study.currentStudy?.id || "";
 const sites = ref<Site[]>([]);
@@ -65,6 +69,7 @@ const siteMap = computed(() => new Map(sites.value.map((site) => [site.id, site.
 const siteActiveMap = computed(() => new Map(sites.value.map((site) => [site.id, !!site.is_active])));
 const displaySite = (siteId?: string) => siteMap.value.get(siteId || "") || TEXT.common.fallback;
 const isInactiveSite = (siteId?: string) => Boolean(siteId) && siteActiveMap.value.get(siteId || "") === false;
+const canUpdateInitiation = computed(() => can("startup.initiation.update"));
 
 const detail = reactive<any>({
   site_id: "",
@@ -132,6 +137,12 @@ const load = async () => {
   try {
     const { data } = await getFeasibility(studyId, recordId);
     Object.assign(detail, data);
+    const siteName = displaySite(detail.site_id);
+    const hasSiteName = siteName !== TEXT.common.fallback;
+    study.setViewContext({
+      siteName,
+      pageTitle: detail.project_no || (hasSiteName ? siteName : TEXT.modules.startupFeasibilityEthics.feasibilityDetailTitle),
+    });
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
   } finally {
@@ -139,18 +150,24 @@ const load = async () => {
   }
 };
 
-const goEdit = () => {
+const openEditor = () => {
+  if (!canUpdateInitiation.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
   if (isInactiveSite(detail.site_id)) {
     ElMessage.warning("中心已停用");
     return;
   }
-  router.push(`/startup/feasibility/${recordId}/edit`);
+  editorVisible.value = true;
 };
-const goBack = () => router.push("/startup/feasibility-ethics");
 
-onMounted(() => {
-  loadSites();
-  load();
+const handleEditorSuccess = async () => {
+  await load();
+};
+onMounted(async () => {
+  await loadSites();
+  await load();
 });
 </script>
 

frontend/src/views/startup/FeasibilityEditorDrawer.vue

@@ -0,0 +1,266 @@
+<template>
+  <el-drawer
+    v-if="modelValue"
+    :model-value="modelValue"
+    direction="rtl"
+    size="620px"
+    :close-on-click-modal="true"
+    :before-close="drawerDirtyGuard.beforeClose"
+    :show-close="false"
+    class="feasibility-editor-drawer"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #header>
+      <div class="editor-header">
+        <div class="editor-title">{{ recordId ? TEXT.modules.startupFeasibilityEthics.feasibilityEditTitle : TEXT.modules.startupFeasibilityEthics.feasibilityNewTitle }}</div>
+      </div>
+    </template>
+
+    <el-form :model="form" label-position="top" class="startup-editor-form">
+      <div class="form-group">
+        <div class="form-group-title">
+          <span class="group-dot group-dot-basic"></span>
+          {{ TEXT.modules.startupFeasibilityEthics.feasibilityTab }}
+        </div>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.site">
+              <el-select v-model="form.site_id" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.select" clearable class="full-width">
+                <el-option v-for="site in siteOptions" :key="site.value" :label="site.label" :value="site.value" :disabled="site.disabled" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.projectNo">
+              <el-input v-model="form.project_no" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.input + TEXT.common.fields.projectNo" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="8">
+            <el-form-item :label="TEXT.common.fields.submitDate">
+              <el-date-picker v-model="form.submit_date" :disabled="isReadOnly" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" class="full-width" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="TEXT.common.fields.acceptDate">
+              <el-date-picker v-model="form.accept_date" :disabled="isReadOnly" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" class="full-width" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="TEXT.common.fields.approvedDate">
+              <el-date-picker v-model="form.approved_date" :disabled="isReadOnly" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" class="full-width" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="form-group">
+        <div class="form-group-title">
+          <span class="group-dot group-dot-attachment"></span>
+          {{ TEXT.common.labels.attachments }}
+        </div>
+        <AttachmentList
+          ref="attachmentPanelRef"
+          :study-id="studyId"
+          entity-type="startup_feasibility"
+          :entity-id="recordId || ''"
+          :mode="'upload'"
+          :readonly="isReadOnly"
+        />
+      </div>
+    </el-form>
+
+    <template #footer>
+      <div class="drawer-footer">
+        <el-button @click="emit('update:modelValue', false)">{{ TEXT.common.actions.cancel }}</el-button>
+        <el-button type="primary" :loading="saving" :disabled="isReadOnly" @click="submit">{{ TEXT.common.actions.save }}</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { createFeasibility, getFeasibility, updateFeasibility } from "../../api/startup";
+import { fetchSites } from "../../api/sites";
+import { useStudyStore } from "../../store/study";
+import type { Site } from "../../types/api";
+import { TEXT } from "../../locales";
+import { usePermission } from "../../utils/permission";
+import { useDrawerDirtyGuard } from "../../utils/drawerDirtyGuard";
+import AttachmentList from "../../components/attachments/AttachmentList.vue";
+
+const props = defineProps<{ modelValue: boolean; recordId?: string }>();
+const emit = defineEmits<{
+  (event: "update:modelValue", value: boolean): void;
+  (event: "success", id: string): void;
+}>();
+
+const study = useStudyStore();
+const { can } = usePermission();
+const saving = ref(false);
+const sites = ref<Site[]>([]);
+const attachmentPanelRef = ref<InstanceType<typeof AttachmentList> | null>(null);
+const studyId = computed(() => study.currentStudy?.id || "");
+const isEdit = computed(() => !!props.recordId);
+
+const form = reactive({
+  site_id: "",
+  submit_date: "",
+  accept_date: "",
+  approved_date: "",
+  project_no: "",
+});
+
+const siteOptions = computed(() =>
+  sites.value.map((site) => ({ value: site.id, label: site.name || TEXT.common.fallback, disabled: !site.is_active }))
+);
+const siteActiveMap = computed(() => new Map(sites.value.map((site) => [site.id, !!site.is_active])));
+const canCreateInitiation = computed(() => can("startup.initiation.create"));
+const canUpdateInitiation = computed(() => can("startup.initiation.update"));
+const canSaveInitiation = computed(() => (isEdit.value ? canUpdateInitiation.value : canCreateInitiation.value));
+const isInactiveSite = computed(() => isEdit.value && !!form.site_id && siteActiveMap.value.get(form.site_id) === false);
+const isReadOnly = computed(() => !canSaveInitiation.value || isInactiveSite.value);
+const drawerDirtyGuard = useDrawerDirtyGuard(() => ({
+  form,
+  attachments: attachmentPanelRef.value?.pendingSnapshot() || [],
+}));
+const reset = () => {
+  form.site_id = "";
+  form.submit_date = "";
+  form.accept_date = "";
+  form.approved_date = "";
+  form.project_no = "";
+};
+
+const loadSites = async () => {
+  if (!studyId.value) return;
+  try {
+    const { data } = await fetchSites(studyId.value, { limit: 500 });
+    sites.value = Array.isArray(data) ? data : data.items || [];
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
+  }
+};
+
+const load = async () => {
+  reset();
+  await loadSites();
+  if (!isEdit.value || !studyId.value || !props.recordId) {
+    drawerDirtyGuard.syncBaseline();
+    return;
+  }
+  try {
+    const { data } = await getFeasibility(studyId.value, props.recordId);
+    Object.assign(form, {
+      site_id: data.site_id || "",
+      submit_date: data.submit_date || "",
+      accept_date: data.accept_date || "",
+      approved_date: data.approved_date || "",
+      project_no: data.project_no || "",
+    });
+    drawerDirtyGuard.syncBaseline();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
+  }
+};
+
+const submit = async () => {
+  if (!studyId.value) return;
+  if (!canSaveInitiation.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
+  if (isInactiveSite.value || (form.site_id && siteActiveMap.value.get(form.site_id) === false)) {
+    ElMessage.warning("中心已停用");
+    return;
+  }
+  saving.value = true;
+  try {
+    const payload = {
+      site_id: form.site_id || null,
+      submit_date: form.submit_date || null,
+      accept_date: form.accept_date || null,
+      approved_date: form.approved_date || null,
+      project_no: form.project_no || null,
+    };
+    const id = props.recordId || (await createFeasibility(studyId.value, payload)).data.id;
+    if (props.recordId) {
+      await updateFeasibility(studyId.value, props.recordId, payload);
+    }
+    await attachmentPanelRef.value?.uploadPending(id);
+    ElMessage.success(props.recordId ? TEXT.common.messages.saveSuccess : TEXT.common.messages.createSuccess);
+    drawerDirtyGuard.syncBaseline();
+    emit("success", id);
+    emit("update:modelValue", false);
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
+  } finally {
+    saving.value = false;
+  }
+};
+
+watch(
+  () => [props.modelValue, props.recordId, studyId.value] as const,
+  ([visible]) => {
+    if (visible) load();
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.editor-header {
+  display: flex;
+  align-items: center;
+}
+
+.editor-title {
+  color: var(--ctms-text-main);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.startup-editor-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);
+}
+
+.group-dot-attachment {
+  background: #22c55e;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

frontend/src/views/startup/FeasibilityForm.vue

@@ -73,18 +73,17 @@
         </el-form>
       </section>
       <section class="unified-section">
-        <template v-if="isEdit && recordId">
-          <div class="ctms-section-header">
-            <div class="ctms-section-title">{{ TEXT.common.labels.attachments }}</div>
-          </div>
-          <AttachmentList
-            :study-id="studyId"
-            entity-type="startup_feasibility"
-            :entity-id="recordId"
-            :readonly="isReadOnly"
-          />
-        </template>
-        <StateEmpty v-else :description="TEXT.modules.startupFeasibilityEthics.feasibilityUploadHint" />
+        <div class="ctms-section-header">
+          <div class="ctms-section-title">{{ TEXT.common.labels.attachments }}</div>
+        </div>
+        <AttachmentList
+          ref="attachmentPanelRef"
+          :study-id="studyId"
+          entity-type="startup_feasibility"
+          :entity-id="recordId || ''"
+          :readonly="isReadOnly"
+          :mode="'upload'"
+        />
       </section>
     </div>
   </div>
@@ -100,13 +99,15 @@ import { createFeasibility, getFeasibility, updateFeasibility } from "../../api/
 import { fetchSites } from "../../api/sites";
 import type { Site } from "../../types/api";
 import AttachmentList from "../../components/attachments/AttachmentList.vue";
-import StateEmpty from "../../components/StateEmpty.vue";
 import { TEXT } from "../../locales";
+import { usePermission } from "../../utils/permission";
 
 const route = useRoute();
 const router = useRouter();
 const study = useStudyStore();
+const { can } = usePermission();
 const saving = ref(false);
+const attachmentPanelRef = ref<InstanceType<typeof AttachmentList> | null>(null);
 
 const recordId = computed(() => route.params.recordId as string | undefined);
 const isEdit = computed(() => !!recordId.value);
@@ -123,7 +124,11 @@ const siteActiveMap = computed(() => {
   });
   return map;
 });
-const isReadOnly = computed(() => isEdit.value && !!form.site_id && siteActiveMap.value[form.site_id] === false);
+const canCreateInitiation = computed(() => can("startup.initiation.create"));
+const canUpdateInitiation = computed(() => can("startup.initiation.update"));
+const canSaveInitiation = computed(() => (isEdit.value ? canUpdateInitiation.value : canCreateInitiation.value));
+const isInactiveSite = computed(() => isEdit.value && !!form.site_id && siteActiveMap.value[form.site_id] === false);
+const isReadOnly = computed(() => !canSaveInitiation.value || isInactiveSite.value);
 
 const form = reactive({
   site_id: "",
@@ -161,7 +166,11 @@ const load = async () => {
 
 const submit = async () => {
   if (!studyId.value) return;
-  if (isReadOnly.value) {
+  if (!canSaveInitiation.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
+  if (isInactiveSite.value) {
     ElMessage.warning("中心已停用");
     return;
   }
@@ -178,15 +187,16 @@ const submit = async () => {
       approved_date: form.approved_date || null,
       project_no: form.project_no || null,
     };
+    let savedId = recordId.value || "";
     if (isEdit.value && recordId.value) {
       await updateFeasibility(studyId.value, recordId.value, payload);
-      ElMessage.success(TEXT.common.messages.saveSuccess);
-      router.push(`/startup/feasibility/${recordId.value}`);
     } else {
       const { data } = await createFeasibility(studyId.value, payload);
-      ElMessage.success(TEXT.common.messages.createSuccess);
-      router.push(`/startup/feasibility/${data.id}`);
+      savedId = data.id;
     }
+    await attachmentPanelRef.value?.uploadPending(savedId);
+    ElMessage.success(isEdit.value ? TEXT.common.messages.saveSuccess : TEXT.common.messages.createSuccess);
+    router.push(`/startup/feasibility/${savedId}`);
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
   } finally {

frontend/src/views/startup/StartupFormDetailPermissions.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const read = (relativePath: string) => readFileSync(resolve(__dirname, relativePath), "utf8");
+
+describe("startup initiation and ethics form/detail permissions", () => {
+  it("uses startup initiation create/update permissions in feasibility form and detail", () => {
+    const formSource = read("./FeasibilityForm.vue");
+    const detailSource = read("./FeasibilityDetail.vue");
+
+    expect(formSource).toContain('const canCreateInitiation = computed(() => can("startup.initiation.create"))');
+    expect(formSource).toContain('const canUpdateInitiation = computed(() => can("startup.initiation.update"))');
+    expect(formSource).toContain("const canSaveInitiation = computed(() => (isEdit.value ? canUpdateInitiation.value : canCreateInitiation.value))");
+    expect(formSource).toContain("if (!canSaveInitiation.value)");
+    expect(detailSource).toContain('const canUpdateInitiation = computed(() => can("startup.initiation.update"))');
+    expect(detailSource).toContain('v-if="canUpdateInitiation"');
+    expect(detailSource).toContain("if (!canUpdateInitiation.value)");
+  });
+
+  it("uses startup ethics create/update permissions in ethics form and detail", () => {
+    const formSource = read("./EthicsForm.vue");
+    const detailSource = read("./EthicsDetail.vue");
+
+    expect(formSource).toContain('const canCreateEthics = computed(() => can("startup.ethics.create"))');
+    expect(formSource).toContain('const canUpdateEthics = computed(() => can("startup.ethics.update"))');
+    expect(formSource).toContain("const canSaveEthics = computed(() => (isEdit.value ? canUpdateEthics.value : canCreateEthics.value))");
+    expect(formSource).toContain("if (!canSaveEthics.value)");
+    expect(detailSource).toContain('const canUpdateEthics = computed(() => can("startup.ethics.update"))');
+    expect(detailSource).toContain('v-if="canUpdateEthics"');
+    expect(detailSource).toContain("if (!canUpdateEthics.value)");
+  });
+
+  it("keeps detail attachment areas display-only and moves upload into editor drawers", () => {
+    const feasibilityDetail = read("./FeasibilityDetail.vue");
+    const ethicsDetail = read("./EthicsDetail.vue");
+    const feasibilityDrawer = read("./FeasibilityEditorDrawer.vue");
+    const ethicsDrawer = read("./EthicsEditorDrawer.vue");
+
+    expect(feasibilityDetail).toContain(":hide-uploader=\"true\"");
+    expect(ethicsDetail).toContain(":hide-uploader=\"true\"");
+    expect(feasibilityDrawer).toContain("AttachmentList");
+    expect(feasibilityDrawer).toContain('ref="attachmentPanelRef"');
+    expect(feasibilityDrawer).toContain('entity-type="startup_feasibility"');
+    expect(feasibilityDrawer).toContain(":entity-id=\"recordId || ''\"");
+    expect(feasibilityDrawer).toContain(':mode="\'upload\'"');
+    expect(feasibilityDrawer).toContain("attachments: attachmentPanelRef.value?.pendingSnapshot() || []");
+    expect(feasibilityDrawer).toContain("await attachmentPanelRef.value?.uploadPending(id)");
+    expect(feasibilityDrawer).not.toContain("PendingAttachmentUpload");
+    expect(ethicsDrawer).toContain("AttachmentList");
+    expect(ethicsDrawer).toContain('ref="attachmentPanelRef"');
+    expect(ethicsDrawer).toContain('entity-type="startup_ethics"');
+    expect(ethicsDrawer).toContain(":entity-id=\"recordId || ''\"");
+    expect(ethicsDrawer).toContain(':mode="\'upload\'"');
+    expect(ethicsDrawer).toContain("attachments: attachmentPanelRef.value?.pendingSnapshot() || []");
+    expect(ethicsDrawer).toContain("await attachmentPanelRef.value?.uploadPending(id)");
+    expect(ethicsDrawer).not.toContain("PendingAttachmentUpload");
+    expect(feasibilityDrawer).not.toContain('class="attachment-group"');
+    expect(ethicsDrawer).not.toContain('class="attachment-group"');
+  });
+
+  it("allows legacy feasibility and ethics forms to queue attachments before the record exists", () => {
+    const feasibilityForm = read("./FeasibilityForm.vue");
+    const ethicsForm = read("./EthicsForm.vue");
+
+    expect(feasibilityForm).toContain("<AttachmentList");
+    expect(feasibilityForm).toContain('ref="attachmentPanelRef"');
+    expect(feasibilityForm).toContain('entity-type="startup_feasibility"');
+    expect(feasibilityForm).toContain(':entity-id="recordId || \'\'"');
+    expect(feasibilityForm).toContain(':mode="\'upload\'"');
+    expect(feasibilityForm).toContain("await attachmentPanelRef.value?.uploadPending(savedId)");
+    expect(feasibilityForm).not.toContain('v-if="isEdit && recordId"');
+    expect(feasibilityForm).not.toContain("StateEmpty");
+
+    expect(ethicsForm).toContain("<AttachmentList");
+    expect(ethicsForm).toContain('ref="attachmentPanelRef"');
+    expect(ethicsForm).toContain('entity-type="startup_ethics"');
+    expect(ethicsForm).toContain(':entity-id="recordId || \'\'"');
+    expect(ethicsForm).toContain(':mode="\'upload\'"');
+    expect(ethicsForm).toContain("await attachmentPanelRef.value?.uploadPending(savedId)");
+    expect(ethicsForm).not.toContain('v-if="isEdit && recordId"');
+    expect(ethicsForm).not.toContain("StateEmpty");
+  });
+});