迁移合同费用通用附件

1、删除旧费用附件 API、CRUD、模型和专用前端面板，统一改用通用附件能力。

2、调整合同费用接口为 study_id 语义，并补充合同、凭证、发票等附件类型的权限映射。

3、将合同费用新建和编辑改为抽屉流程，详情页与列表页复用同一编辑组件。

4、补充数据库迁移、附件列表、合同费用抽屉和权限场景测试，覆盖旧权限移除与新流程。

frontend/src/api/feeContracts.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = () => readFileSync(resolve(__dirname, "./feeContracts.ts"), "utf8");
+
+describe("feeContracts API naming", () => {
+  it("uses study_id for contract fee project identity", () => {
+    const source = readSource();
+
+    expect(source).toContain("study_id: string");
+    expect(source).toContain("params: { study_id: string; center_id?: string; q?: string }");
+    expect(source).not.toContain("project_id: string");
+    expect(source).not.toContain("projectId");
+    expect(source).not.toContain("centerId");
+  });
+
+  it("does not expose currency in contract fee payloads because amounts are fixed to ten-thousand yuan", () => {
+    const source = readSource();
+
+    expect(source).not.toContain("currency?: string");
+  });
+});

frontend/src/api/feeContracts.ts

@@ -2,12 +2,11 @@ import { apiDelete, apiGet, apiPatch, apiPost } from "./axios";
 import type { FeeApiResponse } from "../types/api";
 
 export interface ContractFeePayload {
-  project_id: string;
+  study_id: string;
   center_id: string;
   contract_no?: string | null;
   signed_date?: string | null;
   contract_amount: number;
-  currency?: string;
   remark?: string | null;
   contract_cases: number;
   actual_cases?: number | null;
@@ -17,7 +16,6 @@ export interface ContractFeeUpdatePayload {
   contract_no?: string | null;
   signed_date?: string | null;
   contract_amount?: number;
-  currency?: string;
   remark?: string | null;
   contract_cases?: number;
   actual_cases?: number | null;
@@ -32,7 +30,7 @@ export interface ContractPaymentPayload {
   remark?: string | null;
 }
 
-export const listContractFees = (params: { projectId: string; centerId?: string; q?: string }) =>
+export const listContractFees = (params: { study_id: string; center_id?: string; q?: string }) =>
   apiGet<FeeApiResponse<any[]>>("/api/v1/fees/contracts", { params });
 
 export const getContractFee = (contractId: string) => apiGet<FeeApiResponse<any>>(`/api/v1/fees/contracts/${contractId}`);

frontend/src/components/attachments/AttachmentList.test.ts

@@ -0,0 +1,117 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readAttachmentList = () => readFileSync(resolve(__dirname, "./AttachmentList.vue"), "utf8");
+
+describe("AttachmentList permissions", () => {
+  it("does not require project member list permission to render uploaders", () => {
+    const source = readAttachmentList();
+
+    expect(source).not.toContain("listMembers");
+  });
+
+  it("matches the contract-fee attachment table layout", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain('prop="filename" :label="TEXT.common.labels.filename" min-width="360" show-overflow-tooltip');
+    expect(source).toContain(':label="TEXT.common.labels.size" min-width="180"');
+    expect(source).toContain(':label="TEXT.common.labels.uploader" min-width="180"');
+    expect(source).toContain('prop="uploaded_at" :label="TEXT.common.labels.uploadedAt" min-width="180" show-overflow-tooltip');
+    expect(source).toContain(':label="TEXT.common.labels.actions" min-width="180"');
+    expect(source).not.toContain('width="160"');
+    expect(source).toContain('class="attachment-actions"');
+    expect(source).toContain("flex-wrap: nowrap;");
+    expect(source).toContain("gap: 4px;");
+  });
+
+  it("can aggregate multiple attachment entity types into one table with an attachment type column", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain("entityGroups?: AttachmentEntityGroup[]");
+    expect(source).toContain('v-if="hasEntityGroups"');
+    expect(source).toContain('label="附件类型"');
+    expect(source).toContain("scope.row.attachment_type_label");
+    expect(source).toContain("fetchAttachments(props.studyId, group.entityType, props.entityId)");
+    expect(source).toContain("attachment_type_label: group.label");
+    expect(source).toContain("attachment_entity_type: group.entityType");
+  });
+
+  it("can reload attachments when the parent refresh key changes", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain("refreshKey?: number");
+    expect(source).toContain("() => props.refreshKey");
+    expect(source).toContain("load();");
+  });
+
+  it("can hide the uploader while keeping the attachment table visible", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain("hideUploader?: boolean");
+    expect(source).toContain("canShowUploader");
+    expect(source).toContain("!props.hideUploader && canCreate.value");
+  });
+
+  it("hides the default attachment title row when uploader is hidden and no explicit title is provided", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain("const showHeader = computed(() => !!props.title || canShowUploader.value)");
+    expect(source).toContain('<div v-if="showHeader" class="header">');
+  });
+
+  it("uses the shared upload implementation for table-mode immediate uploads", () => {
+    const source = readAttachmentList();
+
+    expect(source).not.toContain("AttachmentUploader");
+    expect(source).toContain(':http-request="uploadImmediate"');
+    expect(source).toContain("const uploadImmediate = async");
+    expect(source).toContain("await uploadFile(group, file, props.entityId)");
+    expect(source).toContain("ElMessage.success(TEXT.common.messages.uploadSuccess)");
+    expect(source).toContain("load();");
+  });
+
+  it("supports upload-card mode without rendering the table header", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain('mode?: "table" | "upload"');
+    expect(source).toContain("displayMode");
+    expect(source).toContain('v-if="displayMode === \'table\'"');
+    expect(source).toContain("v-else");
+    expect(source).toContain('class="attachment-upload-card"');
+    expect(source).toContain(':auto-upload="false"');
+    expect(source).toContain("queuePendingUpload(group.key, file)");
+    expect(source).toContain("点击上传文件");
+  });
+
+  it("allows create forms to choose attachments before the entity id exists", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain("const pendingSnapshot = () =>");
+    expect(source).toContain("const uploadPending = async");
+    expect(source).toContain("const targetEntityId = entityId || props.entityId");
+    expect(source).toContain("defineExpose({");
+    expect(source).toContain("pendingSnapshot");
+    expect(source).toContain("uploadPending");
+    expect(source).toContain("pendingMap[group.key] = remainItems");
+    expect(source).toContain("throw new Error(TEXT.common.messages.uploadFailed)");
+  });
+
+  it("fails pending upload when selected files have no saved entity id", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain("const hasPendingUploads = computed");
+    expect(source).toContain("if (!targetEntityId && hasPendingUploads.value)");
+    expect(source).toContain("throw new Error(TEXT.common.messages.uploadFailed)");
+  });
+
+  it("uses entity groups as upload groups when an editor has multiple attachment types", () => {
+    const source = readAttachmentList();
+
+    expect(source).toContain("const uploadGroups = computed");
+    expect(source).toContain("props.entityGroups.map((group)");
+    expect(source).toContain("key: group.entityType");
+    expect(source).toContain("entityType: group.entityType");
+    expect(source).toContain("uploadAttachment(props.studyId, group.entityType, targetEntityId, file");
+  });
+});

frontend/src/components/attachments/AttachmentList.vue

@@ -1,48 +1,98 @@
 <template>
   <div class="attachment-list-panel unified-shell">
-    <div class="header">
-      <span>{{ headerTitle }}</span>
-      <AttachmentUploader
-        v-if="canCreate"
-        :study-id="studyId"
-        :entity-type="entityType"
-        :entity-id="entityId"
-        @uploaded="load"
-      />
-    </div>
-    <el-table :data="attachments" v-loading="loading" style="width: 100%" class="attachment-table" table-layout="fixed">
-      <el-table-column prop="filename" :label="TEXT.common.labels.filename" show-overflow-tooltip />
-      <el-table-column :label="TEXT.common.labels.size">
-        <template #default="scope">{{ formatFileSize(scope.row.file_size ?? scope.row.size) }}</template>
-      </el-table-column>
-      <el-table-column :label="TEXT.common.labels.uploader" show-overflow-tooltip>
-        <template #default="scope">
-          {{ uploaderLabel(scope.row) }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="uploaded_at" :label="TEXT.common.labels.uploadedAt" show-overflow-tooltip>
-        <template #default="scope">
-          {{ displayDateTime(scope.row.uploaded_at) }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="TEXT.common.labels.actions" width="160">
-        <template #default="scope">
-          <el-button link type="primary" size="small" @click="preview(scope.row)">
-            {{ TEXT.common.labels.preview }}
-          </el-button>
-          <el-button link type="primary" size="small" @click="download(scope.row)">{{ TEXT.common.actions.download }}</el-button>
-          <el-button
-            v-if="canDelete(scope.row)"
-            link
-            type="danger"
-            size="small"
-            @click="remove(scope.row)"
+    <template v-if="displayMode === 'table'">
+      <div v-if="showHeader" class="header">
+        <span>{{ headerTitle }}</span>
+        <div v-if="canShowUploader && tableUploadGroup" class="immediate-upload">
+          <el-upload
+            :http-request="uploadImmediate"
+            :show-file-list="false"
+            :limit="1"
+            :disabled="isImmediateUploading"
+            :auto-upload="true"
           >
-            {{ TEXT.common.actions.delete }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+            <el-button type="primary" :loading="isImmediateUploading">{{ TEXT.common.actions.upload }}</el-button>
+          </el-upload>
+          <el-progress v-if="tableProgress > 0 && tableProgress < 100" :percentage="tableProgress" :stroke-width="6" />
+        </div>
+      </div>
+      <el-table :data="attachments" v-loading="loading" style="width: 100%" class="attachment-table" table-layout="fixed">
+        <el-table-column v-if="hasEntityGroups" label="附件类型" min-width="180" show-overflow-tooltip>
+          <template #default="scope">{{ scope.row.attachment_type_label || TEXT.common.fallback }}</template>
+        </el-table-column>
+        <el-table-column prop="filename" :label="TEXT.common.labels.filename" min-width="360" show-overflow-tooltip />
+        <el-table-column :label="TEXT.common.labels.size" min-width="180">
+          <template #default="scope">{{ formatFileSize(scope.row.file_size ?? scope.row.size) }}</template>
+        </el-table-column>
+        <el-table-column :label="TEXT.common.labels.uploader" min-width="180" show-overflow-tooltip>
+          <template #default="scope">
+            {{ uploaderLabel(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="uploaded_at" :label="TEXT.common.labels.uploadedAt" min-width="180" show-overflow-tooltip>
+          <template #default="scope">
+            {{ displayDateTime(scope.row.uploaded_at) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="TEXT.common.labels.actions" min-width="180">
+          <template #default="scope">
+            <div class="attachment-actions">
+              <el-button link type="primary" size="small" @click="preview(scope.row)">
+                {{ TEXT.common.labels.preview }}
+              </el-button>
+              <el-button link type="primary" size="small" @click="download(scope.row)">{{ TEXT.common.actions.download }}</el-button>
+              <el-button
+                v-if="canDelete(scope.row)"
+                link
+                type="danger"
+                size="small"
+                @click="remove(scope.row)"
+              >
+                {{ TEXT.common.actions.delete }}
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+    <div v-else class="upload-grid">
+      <div v-for="group in uploadGroups" :key="group.key" class="attachment-upload-card">
+        <div v-if="showUploadCardLabels" class="upload-card-label">{{ group.label }}</div>
+        <el-upload
+          :show-file-list="false"
+          multiple
+          :disabled="!canUploadGroup(group) || isUploading(group.key)"
+          :auto-upload="false"
+          :on-change="(file: any) => queuePendingUpload(group.key, file)"
+        >
+          <div class="upload-trigger" :class="{ 'is-disabled': !canUploadGroup(group) }">
+            <el-icon class="upload-icon"><Document /></el-icon>
+            <span class="upload-text">点击上传文件</span>
+          </div>
+        </el-upload>
+        <div v-if="pendingMap[group.key]?.length" class="pending-list">
+          <div
+            v-for="item in pendingMap[group.key]"
+            :key="pendingFileKey(item.file)"
+            class="pending-file"
+            :class="{ 'is-failed': item.status === 'failed' }"
+          >
+            <span class="pending-file-name">{{ item.file.name }}</span>
+            <span v-if="item.status === 'failed'" class="pending-file-status">
+              {{ item.error || TEXT.common.messages.uploadFailed }}
+            </span>
+            <el-button link type="danger" size="small" @click="removePendingUpload(group.key, item)">
+              {{ TEXT.common.actions.remove }}
+            </el-button>
+          </div>
+        </div>
+        <el-progress
+          v-if="progressMap[group.key] && progressMap[group.key] < 100"
+          :percentage="progressMap[group.key]"
+          :stroke-width="6"
+        />
+      </div>
+    </div>
   </div>
 
   <el-dialog v-if="previewVisible" append-to-body v-model="previewVisible" :title="previewTitle" width="720px" :close-on-click-modal="false">
@@ -60,33 +110,57 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, reactive, ref, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { fetchAttachments, deleteAttachment } from "../../api/attachments";
-import AttachmentUploader from "./AttachmentUploader.vue";
+import { Document } from "@element-plus/icons-vue";
+import { fetchAttachments, deleteAttachment, uploadAttachment } from "../../api/attachments";
 import { formatFileSize } from "./attachmentUtils";
 import { useAuthStore } from "../../store/auth";
 import { useStudyStore } from "../../store/study";
 import { isSystemAdmin } from "../../utils/roles";
-import { listMembers } from "../../api/members";
-import { displayDateTime, displayUser, getMemberDisplayName, getUserDisplayName } from "../../utils/display";
+import { displayDateTime, getUserDisplayName } from "../../utils/display";
 import { getAttachmentPermissionKey } from "../../utils/attachmentPermissions";
 import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
 import { TEXT } from "../../locales";
 
+type AttachmentEntityGroup = {
+  entityType: string;
+  label: string;
+};
+
+type UploadGroup = {
+  key: string;
+  label: string;
+  entityType: string;
+};
+
+type PendingUploadStatus = "pending" | "uploading" | "failed";
+
+type PendingUploadItem = {
+  file: File;
+  status: PendingUploadStatus;
+  error?: string;
+};
+
 const props = defineProps<{
   studyId: string;
   entityType: string;
   entityId: string;
+  entityGroups?: AttachmentEntityGroup[];
   title?: string;
   readonly?: boolean;
+  hideUploader?: boolean;
+  mode?: "table" | "upload";
+  maxSizeMb?: number;
+  refreshKey?: number;
 }>();
 
 const attachments = ref<any[]>([]);
 const loading = ref(false);
+const progressMap = reactive<Record<string, number>>({});
+const pendingMap = reactive<Record<string, PendingUploadItem[]>>({});
 const auth = useAuthStore();
 const study = useStudyStore();
-const members = ref<any[]>([]);
 const previewVisible = ref(false);
 const previewUrl = ref("");
 const previewObjectUrl = ref("");
@@ -95,27 +169,159 @@ const previewTitle = ref(TEXT.common.labels.preview);
 const previewError = ref("");
 const previewLoading = ref(false);
 const headerTitle = computed(() => props.title || TEXT.common.labels.attachments);
+const displayMode = computed(() => props.mode || "table");
+const maxSize = computed(() => props.maxSizeMb ?? 50);
+const hasEntityGroups = computed(() => !!props.entityGroups?.length);
+const uploadGroups = computed<UploadGroup[]>(() => {
+  if (props.entityGroups?.length) {
+    return props.entityGroups.map((group) => ({
+      key: group.entityType,
+      label: group.label,
+      entityType: group.entityType,
+    }));
+  }
+  return [{ key: props.entityType, label: headerTitle.value, entityType: props.entityType }];
+});
+const showUploadCardLabels = computed(() => uploadGroups.value.length > 1);
 
 const currentRolePermissions = computed(() => {
   const role = study.currentStudyRole || (study.currentStudy as any)?.role_in_study;
   return role ? study.currentPermissions?.[role] : null;
 });
 
-const canUseAttachmentPermission = (action: "create" | "read" | "delete") => {
+const canUseAttachmentPermission = (action: "create" | "read" | "delete", entityType = props.entityType) => {
   if (isSystemAdmin(auth.user)) return true;
-  const operationKey = getAttachmentPermissionKey(props.entityType, action);
+  const operationKey = getAttachmentPermissionKey(entityType, action);
   if (!operationKey) return false;
   return isApiPermissionAllowed(currentRolePermissions.value?.[operationKey]);
 };
 
-const canCreate = computed(() => !props.readonly && canUseAttachmentPermission("create"));
+const canCreate = computed(() => {
+  if (props.readonly) return false;
+  if (displayMode.value === "upload") {
+    return uploadGroups.value.some((group) => canUseAttachmentPermission("create", group.entityType));
+  }
+  return !hasEntityGroups.value && canUseAttachmentPermission("create");
+});
+const canShowUploader = computed(() => !props.hideUploader && canCreate.value);
+const showHeader = computed(() => !!props.title || canShowUploader.value);
+const canUploadGroup = (group: UploadGroup) => canShowUploader.value && canUseAttachmentPermission("create", group.entityType);
+const isUploading = (key: string) => (progressMap[key] || 0) > 0 && (progressMap[key] || 0) < 100;
+const tableUploadGroup = computed(() => uploadGroups.value[0] || null);
+const tableProgress = computed(() => {
+  const group = tableUploadGroup.value;
+  return group ? progressMap[group.key] || 0 : 0;
+});
+const isImmediateUploading = computed(() => tableProgress.value > 0 && tableProgress.value < 100);
+
+const validateFile = (file: File) => {
+  if (file.size > maxSize.value * 1024 * 1024) {
+    ElMessage.error(`${TEXT.common.messages.fileTooLarge} ${maxSize.value}MB`);
+    return false;
+  }
+  return true;
+};
+
+const pendingFileKey = (file: File) => `${file.name}-${file.size}-${file.lastModified}`;
+
+const queuePendingUpload = (fileType: string, uploadFile: any) => {
+  const group = uploadGroups.value.find((item) => item.key === fileType);
+  if (!group || !canUploadGroup(group)) return;
+  const file = uploadFile?.raw as File | undefined;
+  if (!file || !validateFile(file)) return;
+  const next = pendingMap[fileType] || [];
+  if (!next.some((item) => pendingFileKey(item.file) === pendingFileKey(file))) {
+    pendingMap[fileType] = [...next, { file, status: "pending" }];
+  }
+};
+
+const removePendingUpload = (fileType: string, item: PendingUploadItem) => {
+  pendingMap[fileType] = (pendingMap[fileType] || []).filter((current) => pendingFileKey(current.file) !== pendingFileKey(item.file));
+};
+
+const pendingSnapshot = () =>
+  uploadGroups.value.flatMap((group) => (pendingMap[group.key] || []).map((item) => `${group.key}:${pendingFileKey(item.file)}`));
+const hasPendingUploads = computed(() => uploadGroups.value.some((group) => (pendingMap[group.key] || []).length > 0));
+
+const uploadFile = async (group: UploadGroup, file: File, targetEntityId: string) => {
+  if (!props.studyId || !targetEntityId) return;
+  if (!validateFile(file)) throw new Error("invalid file");
+  progressMap[group.key] = 0;
+  await uploadAttachment(props.studyId, group.entityType, targetEntityId, file, {
+    onUploadProgress: (evt: ProgressEvent) => {
+      if (evt.total) {
+        progressMap[group.key] = Math.round((evt.loaded / evt.total) * 100);
+      }
+    },
+  });
+};
+
+const uploadPending = async (entityId?: string) => {
+  const targetEntityId = entityId || props.entityId;
+  if (!targetEntityId && hasPendingUploads.value) {
+    throw new Error(TEXT.common.messages.uploadFailed);
+  }
+  if (!targetEntityId) return;
+  let hasFailure = false;
+  for (const group of uploadGroups.value) {
+    const items = [...(pendingMap[group.key] || [])];
+    const remainItems: PendingUploadItem[] = [];
+    for (const item of items) {
+      try {
+        item.status = "uploading";
+        item.error = "";
+        await uploadFile(group, item.file, targetEntityId);
+      } catch (e: any) {
+        hasFailure = true;
+        item.status = "failed";
+        item.error = e?.response?.data?.message || TEXT.common.messages.uploadFailed;
+        remainItems.push(item);
+      } finally {
+        progressMap[group.key] = 0;
+      }
+    }
+    pendingMap[group.key] = remainItems;
+  }
+  if (hasFailure) throw new Error(TEXT.common.messages.uploadFailed);
+};
+
+const uploadImmediate = async (options: any) => {
+  const file = options?.file as File | undefined;
+  const group = tableUploadGroup.value;
+  if (!file || !group || !props.entityId) return;
+  if (!validateFile(file)) return;
+  try {
+    await uploadFile(group, file, props.entityId);
+    ElMessage.success(TEXT.common.messages.uploadSuccess);
+    load();
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || e?.message || TEXT.common.messages.uploadFailed);
+  } finally {
+    progressMap[group.key] = 0;
+  }
+};
 
 const load = async () => {
   if (!props.studyId || !props.entityId) return;
   loading.value = true;
   try {
-    const { data } = await fetchAttachments(props.studyId, props.entityType, props.entityId);
-    attachments.value = data.items || data || [];
+    if (hasEntityGroups.value && props.entityGroups) {
+      const results = await Promise.all(
+        props.entityGroups.map(async (group) => {
+          const { data } = await fetchAttachments(props.studyId, group.entityType, props.entityId);
+          const items = data.items || data || [];
+          return (Array.isArray(items) ? items : []).map((item: any) => ({
+            ...item,
+            attachment_type_label: group.label,
+            attachment_entity_type: group.entityType,
+          }));
+        })
+      );
+      attachments.value = results.flat();
+    } else {
+      const { data } = await fetchAttachments(props.studyId, props.entityType, props.entityId);
+      attachments.value = data.items || data || [];
+    }
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
   } finally {
@@ -123,26 +329,11 @@ const load = async () => {
   }
 };
 
-const loadMembers = async () => {
-  if (!props.studyId) return;
-  try {
-    const { data } = await listMembers(props.studyId, { limit: 500 });
-    members.value = Array.isArray(data) ? data : data.items || [];
-  } catch {
-    members.value = [];
-  }
-};
-
 const uploaderLabel = (row: any) => {
-  const memberMap = members.value.reduce<Record<string, string>>((acc, cur) => {
-    const username = getMemberDisplayName(cur);
-    if (cur?.user_id && username) acc[cur.user_id] = username;
-    return acc;
-  }, {});
   if (row?.uploaded_by && typeof row.uploaded_by === "object") {
     return getUserDisplayName(row.uploaded_by) || row.uploaded_by.id || TEXT.common.fallback;
   }
-  return displayUser(row.uploaded_by_id || row.uploaded_by, { members: memberMap });
+  return row.uploaded_by_id || row.uploaded_by || TEXT.common.fallback;
 };
 
 const getDownloadUrl = (row: any) => {
@@ -219,7 +410,7 @@ const preview = (row: any) => {
 
 const canDelete = (row: any) => {
   if (props.readonly) return false;
-  return canUseAttachmentPermission("delete");
+  return canUseAttachmentPermission("delete", row?.attachment_entity_type || props.entityType);
 };
 
 const remove = async (row: any) => {
@@ -234,8 +425,7 @@ const remove = async (row: any) => {
   }
 };
 
-onMounted(async () => {
-  await Promise.all([loadMembers()]);
+onMounted(() => {
   load();
 });
 
@@ -245,6 +435,18 @@ watch(previewVisible, (visible) => {
     previewObjectUrl.value = "";
   }
 });
+
+watch(
+  () => props.refreshKey,
+  () => {
+    load();
+  }
+);
+
+defineExpose({
+  pendingSnapshot,
+  uploadPending,
+});
 </script>
 
 <style scoped>
@@ -267,6 +469,120 @@ watch(previewVisible, (visible) => {
   display: none;
 }
 
+.attachment-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.attachment-actions :deep(.el-button) {
+  margin-left: 0;
+  padding: 0 2px;
+}
+
+.immediate-upload {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.upload-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.attachment-upload-card {
+  min-height: 72px;
+  padding: 14px 16px;
+  border: 1px dashed #d0dced;
+  border-radius: 8px;
+  background: #ffffff;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.attachment-upload-card:hover {
+  border-color: var(--ctms-primary);
+  background: #f8faff;
+}
+
+.upload-card-label {
+  margin-bottom: 10px;
+  color: #4a6283;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.upload-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  cursor: pointer;
+}
+
+.upload-trigger.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.upload-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.upload-text {
+  color: var(--ctms-text-secondary);
+  font-size: 13px;
+}
+
+.upload-trigger:not(.is-disabled):hover .upload-text {
+  color: var(--ctms-primary);
+}
+
+.pending-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.pending-file {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--ctms-text-regular);
+  font-size: 12px;
+}
+
+.pending-file.is-failed {
+  color: var(--ctms-danger, #f56c6c);
+}
+
+.pending-file-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pending-file-status {
+  flex: 0 0 auto;
+  color: var(--ctms-danger, #f56c6c);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .upload-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .preview-frame {
   width: 100%;
   height: 520px;

frontend/src/components/attachments/AttachmentUploader.vue

@@ -1,68 +0,0 @@
-<template>
-  <div class="uploader">
-    <el-upload
-      :http-request="doUpload"
-      :show-file-list="false"
-      :limit="1"
-      :disabled="loading"
-      :auto-upload="true"
-    >
-      <el-button type="primary" :loading="loading">{{ TEXT.common.actions.upload }}</el-button>
-    </el-upload>
-    <el-progress v-if="progress > 0 && progress < 100" :percentage="progress" :stroke-width="6" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { ElMessage } from "element-plus";
-import { uploadAttachment } from "../../api/attachments";
-import { TEXT } from "../../locales";
-
-const props = defineProps<{
-  studyId: string;
-  entityType: string;
-  entityId: string;
-  maxSizeMb?: number;
-}>();
-const emit = defineEmits(["uploaded"]);
-
-const progress = ref(0);
-const loading = ref(false);
-const maxSize = props.maxSizeMb ?? 50;
-
-const doUpload = async (options: any) => {
-  const file: File = options.file;
-  if (!file) return;
-  if (file.size > maxSize * 1024 * 1024) {
-    ElMessage.error(`${TEXT.common.messages.fileTooLarge} ${maxSize}MB`);
-    return;
-  }
-  progress.value = 0;
-  loading.value = true;
-  try {
-    await uploadAttachment(props.studyId, props.entityType, props.entityId, file, {
-      onUploadProgress: (evt: ProgressEvent) => {
-        if (evt.total) {
-          progress.value = Math.round((evt.loaded / evt.total) * 100);
-        }
-      },
-    });
-    ElMessage.success(TEXT.common.messages.uploadSuccess);
-    emit("uploaded");
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.uploadFailed);
-  } finally {
-    progress.value = 0;
-    loading.value = false;
-  }
-};
-</script>
-
-<style scoped>
-.uploader {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-</style>

frontend/src/components/fees/FeeAttachmentPanel.vue

@@ -1,410 +0,0 @@
-<template>
-  <div class="fee-attachments">
-    <div v-for="group in groups" :key="group.key" class="group-card unified-shell">
-      <div class="group-header">
-        <div>
-          <div class="group-title">{{ group.label }}</div>
-          <div v-if="group.description" class="group-desc">{{ group.description }}</div>
-        </div>
-        <el-upload
-          v-if="canCreate"
-          :http-request="(options: any) => doUpload(group.key, options)"
-          :show-file-list="false"
-          :limit="1"
-          :disabled="readonly || isUploading(group.key)"
-          :auto-upload="true"
-        >
-          <el-button size="small" type="primary" :loading="isUploading(group.key)" :disabled="readonly">
-            {{ TEXT.common.actions.upload }}
-          </el-button>
-        </el-upload>
-      </div>
-      <el-progress
-        v-if="progressMap[group.key] && progressMap[group.key] < 100"
-        :percentage="progressMap[group.key]"
-        :stroke-width="6"
-      />
-      <StateLoading v-if="loading" :rows="3" />
-      <template v-else>
-        <div v-if="(grouped[group.key] || []).length === 0" class="group-empty">
-          <StateEmpty :description="group.emptyText" />
-        </div>
-        <el-table v-else :data="grouped[group.key]" style="width: 100%" class="group-table" table-layout="fixed">
-          <el-table-column prop="filename" :label="TEXT.common.labels.filename" show-overflow-tooltip />
-          <el-table-column :label="TEXT.common.labels.size">
-            <template #default="scope">{{ formatFileSize(scope.row.size || scope.row.file_size) }}</template>
-          </el-table-column>
-          <el-table-column :label="TEXT.common.labels.uploader" show-overflow-tooltip>
-            <template #default="scope">
-              {{ uploaderLabel(scope.row) }}
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.common.labels.actions" width="160">
-            <template #default="scope">
-              <el-button link type="primary" size="small" @click="preview(scope.row)">
-                {{ TEXT.common.labels.preview }}
-              </el-button>
-              <el-button link type="primary" size="small" @click="download(scope.row)">
-                {{ TEXT.common.actions.download }}
-              </el-button>
-              <el-button
-                v-if="canDelete(scope.row)"
-                link
-                type="danger"
-                size="small"
-                @click="remove(scope.row)"
-              >
-                {{ TEXT.common.actions.delete }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </template>
-    </div>
-  </div>
-
-  <el-dialog append-to=".layout-main .content-wrapper" v-model="previewVisible" :title="previewTitle" width="720px" :close-on-click-modal="false">
-    <div v-if="previewError" class="preview-error">
-      {{ previewError }}
-    </div>
-    <template v-else>
-      <img v-if="previewType === 'image'" :src="previewUrl" class="preview-media" />
-      <iframe v-else-if="previewType === 'pdf'" :src="previewUrl" class="preview-frame" />
-      <div v-else class="preview-error">
-        {{ TEXT.common.messages.previewNotSupported }}
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { fetchAttachments, uploadAttachment, deleteAttachment } from "../../api/attachments";
-import { listMembers } from "../../api/members";
-import { useAuthStore } from "../../store/auth";
-import { useStudyStore } from "../../store/study";
-import { isSystemAdmin } from "../../utils/roles";
-import { formatFileSize } from "../attachments/attachmentUtils";
-import { displayUser, getMemberDisplayName, getUserDisplayName } from "../../utils/display";
-import { getAttachmentPermissionKey } from "../../utils/attachmentPermissions";
-import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
-import StateEmpty from "../StateEmpty.vue";
-import StateLoading from "../StateLoading.vue";
-import { TEXT } from "../../locales";
-
-interface AttachmentGroup {
-  key: string;
-  label: string;
-  description?: string;
-  emptyText?: string;
-}
-
-const props = defineProps<{
-  entityType: string;
-  entityId: string;
-  groups: AttachmentGroup[];
-  readonly?: boolean;
-  maxSizeMb?: number;
-}>();
-
-const loading = ref(false);
-const grouped = reactive<Record<string, any[]>>({});
-const progressMap = reactive<Record<string, number>>({});
-const auth = useAuthStore();
-const study = useStudyStore();
-const members = ref<any[]>([]);
-const previewVisible = ref(false);
-const previewUrl = ref("");
-const previewObjectUrl = ref("");
-const previewType = ref<"image" | "pdf" | "other">("other");
-const previewTitle = ref(TEXT.common.labels.preview);
-const previewError = ref("");
-const previewLoading = ref(false);
-
-const isUploading = (key: string) => (progressMap[key] || 0) > 0 && (progressMap[key] || 0) < 100;
-
-const currentRolePermissions = computed(() => {
-  const role = study.currentStudyRole || (study.currentStudy as any)?.role_in_study;
-  return role ? study.currentPermissions?.[role] : null;
-});
-
-const canUseAttachmentPermission = (action: "create" | "read" | "delete") => {
-  if (isSystemAdmin(auth.user)) return true;
-  const operationKey = getAttachmentPermissionKey(`${props.entityType}_contract`, action);
-  if (!operationKey) return false;
-  return isApiPermissionAllowed(currentRolePermissions.value?.[operationKey]);
-};
-
-const canCreate = computed(() => !props.readonly && canUseAttachmentPermission("create"));
-
-const loadMembers = async () => {
-  const studyId = study.currentStudy?.id;
-  if (!studyId) return;
-  try {
-    const { data } = await listMembers(studyId, { limit: 500 });
-    members.value = Array.isArray(data) ? data : data.items || [];
-  } catch {
-    members.value = [];
-  }
-};
-
-const load = async () => {
-  const studyId = study.currentStudy?.id;
-  if (!studyId || !props.entityType || !props.entityId) return;
-  loading.value = true;
-  try {
-    const results = await Promise.all(
-      props.groups.map(async (group) => {
-        const entityType = `${props.entityType}_${group.key}`;
-        const { data } = await fetchAttachments(studyId, entityType, props.entityId);
-        return { key: group.key, items: data?.items || data || [] };
-      })
-    );
-    results.forEach((group) => {
-      grouped[group.key] = Array.isArray(group.items) ? group.items : [];
-    });
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
-  } finally {
-    loading.value = false;
-  }
-};
-
-const uploaderLabel = (row: any) => {
-  const memberMap = members.value.reduce<Record<string, string>>((acc, cur) => {
-    const username = getMemberDisplayName(cur);
-    if (cur?.user_id && username) acc[cur.user_id] = username;
-    return acc;
-  }, {});
-  if (row?.uploaded_by && typeof row.uploaded_by === "object") {
-    return getUserDisplayName(row.uploaded_by) || row.uploaded_by.id || TEXT.common.fallback;
-  }
-  return displayUser(row.uploaded_by_id || row.uploaded_by, { members: memberMap });
-};
-
-const getDownloadUrl = (row: any) => {
-  const token = localStorage.getItem("ctms_token");
-  return row?.url || (token ? `/api/v1/attachments/${row.id}/download?token=${token}` : `/api/v1/attachments/${row.id}/download`);
-};
-
-const getPreviewUrl = (row: any) => {
-  const token = localStorage.getItem("ctms_token");
-  return token ? `/api/v1/attachments/${row.id}/preview?token=${token}` : `/api/v1/attachments/${row.id}/preview`;
-};
-
-const getFileName = (row: any) => (row?.filename || "").toLowerCase();
-const getMimeType = (row: any) => (row?.mime_type || row?.content_type || "").toLowerCase();
-
-const doUpload = async (fileType: string, options: any) => {
-  const file: File = options.file;
-  if (!file || props.readonly) return;
-  const studyId = study.currentStudy?.id;
-  if (!studyId) return;
-  const maxSize = props.maxSizeMb ?? 50;
-  if (file.size > maxSize * 1024 * 1024) {
-    ElMessage.error(`${TEXT.common.messages.fileTooLarge} ${maxSize}MB`);
-    return;
-  }
-  progressMap[fileType] = 0;
-  try {
-    const entityType = `${props.entityType}_${fileType}`;
-    await uploadAttachment(studyId, entityType, props.entityId, file, {
-      onUploadProgress: (evt: ProgressEvent) => {
-        if (evt.total) {
-          progressMap[fileType] = Math.round((evt.loaded / evt.total) * 100);
-        }
-      },
-    });
-    ElMessage.success(TEXT.common.messages.uploadSuccess);
-    await load();
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.uploadFailed);
-  } finally {
-    progressMap[fileType] = 0;
-  }
-};
-
-const detectPreviewType = (row: any) => {
-  const mime = getMimeType(row);
-  if (mime.startsWith("image/")) return "image";
-  if (mime === "application/pdf") return "pdf";
-  const name = getFileName(row);
-  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".webp", ".svg"].some((ext) => name.endsWith(ext))) return "image";
-  if (name.endsWith(".pdf")) return "pdf";
-  return "other";
-};
-
-const previewImage = async (downloadUrl: string) => {
-  previewLoading.value = true;
-  try {
-    const token = localStorage.getItem("ctms_token");
-    const headers: Record<string, string> = {};
-    if (token) headers.Authorization = `Bearer ${token}`;
-    const response = await fetch(downloadUrl, { headers });
-    if (!response.ok) throw new Error("preview failed");
-    const blob = await response.blob();
-    if (previewObjectUrl.value) URL.revokeObjectURL(previewObjectUrl.value);
-    previewObjectUrl.value = URL.createObjectURL(blob);
-    previewUrl.value = previewObjectUrl.value;
-  } catch {
-    previewUrl.value = downloadUrl;
-  } finally {
-    previewLoading.value = false;
-  }
-};
-
-const preview = (row: any) => {
-  previewError.value = "";
-  previewType.value = detectPreviewType(row);
-  previewTitle.value = row?.filename || TEXT.common.labels.preview;
-  const downloadUrl = getDownloadUrl(row);
-  if (previewType.value === "image") {
-    previewUrl.value = "";
-    previewImage(downloadUrl);
-  } else if (previewType.value === "pdf") {
-    previewUrl.value = getPreviewUrl(row);
-  } else {
-    previewUrl.value = downloadUrl;
-  }
-  if (previewType.value === "other") {
-    previewError.value = TEXT.common.messages.previewNotSupported;
-  }
-  previewVisible.value = true;
-};
-
-const download = (row: any) => {
-  const url = getDownloadUrl(row);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = row?.filename || "download";
-  link.rel = "noopener";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-
-const canDelete = (row: any) => {
-  if (props.readonly) return false;
-  return canUseAttachmentPermission("delete");
-};
-
-const remove = async (row: any) => {
-  const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
-  if (!ok) return;
-  try {
-    await deleteAttachment(row.id);
-    ElMessage.success(TEXT.common.messages.deleteSuccess);
-    load();
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
-  }
-};
-
-watch(
-  () => [props.entityType, props.entityId],
-  () => {
-    load();
-  }
-);
-
-onMounted(async () => {
-  await loadMembers();
-  load();
-});
-
-watch(previewVisible, (visible) => {
-  if (!visible && previewObjectUrl.value) {
-    URL.revokeObjectURL(previewObjectUrl.value);
-    previewObjectUrl.value = "";
-  }
-});
-</script>
-
-<style scoped>
-.fee-attachments {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.group-card {
-  background: #ffffff;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  overflow: hidden;
-}
-
-.group-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px 16px;
-  border-bottom: 1px solid #eaf0f8;
-}
-
-.group-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ctms-text-main);
-}
-
-.group-desc {
-  font-size: 12px;
-  color: var(--ctms-text-secondary);
-  margin-top: 4px;
-}
-
-.group-empty {
-  padding: 12px 16px 0;
-}
-
-.group-table :deep(.el-table__inner-wrapper::before) {
-  display: none;
-}
-
-/* Compact Empty State Override */
-.group-empty :deep(.state) {
-  padding: 16px 0 !important;
-  min-height: auto !important;
-  flex-direction: row;
-  gap: 8px;
-}
-
-.group-empty :deep(.state-icon) {
-  font-size: 20px !important;
-  margin-bottom: 0 !important;
-}
-
-.group-empty :deep(.state-title) {
-  font-size: 13px !important;
-  font-weight: normal !important;
-  margin: 0 !important;
-}
-
-.group-empty :deep(.state-desc) {
-  display: none; /* Hide description in compact mode if desired, or keep it small */
-}
-
-.preview-frame {
-  width: 100%;
-  height: 520px;
-  border: none;
-}
-
-.preview-media {
-  max-width: 100%;
-  max-height: 520px;
-  display: block;
-  margin: 0 auto;
-}
-
-.preview-error {
-  color: var(--ctms-text-secondary);
-  font-size: 13px;
-  padding: 12px 0;
-  text-align: center;
-}
-</style>

frontend/src/locales/zh-CN.ts

@@ -387,6 +387,7 @@ export const TEXT = {
       lastVerified: "最近核销",
       paymentTitle: "分期付款",
       paymentEmpty: "暂无分期付款记录",
+      paymentSeqColumn: "付款期次",
       paymentSeq: "第",
       paymentSeqUnit: "笔",
       paidFlag: "打款状态",
@@ -398,15 +399,12 @@ export const TEXT = {
       verifiedDateRequired: "请填写核销日期",
       verifyRequiresPaid: "核销前需先打款",
       paymentValidationFailed: "请完善分期付款信息",
-      attachmentTitle: "合同附件",
+      attachmentTitle: "附件",
       attachmentContract: "合同",
-      attachmentContractDesc: "上传合同扫描件或签署页",
       attachmentContractEmpty: "暂无合同附件",
       attachmentVoucher: "凭证",
-      attachmentVoucherDesc: "上传打款凭证或收据",
       attachmentVoucherEmpty: "暂无凭证附件",
       attachmentInvoice: "发票",
-      attachmentInvoiceDesc: "上传发票或税务凭证",
       attachmentInvoiceEmpty: "暂无发票附件",
       uploadHint: "保存后可上传合同/凭证/发票附件",
     },
@@ -427,6 +425,8 @@ export const TEXT = {
       title: "设备管理",
       subtitle: "设备台账与状态跟踪",
       listTitle: "设备列表",
+      detailTitle: "设备详情",
+      detailSubtitle: "查看设备基础信息、资质文件与校准设置",
       emptyDescription: "设备管理模块正在建设中，敬请期待。",
     },
     fileVersionManagement: {
@@ -654,6 +654,7 @@ export const TEXT = {
       detailTitle: "医学咨询详情",
       newCategory: "新增分类",
       editCategory: "编辑分类",
+      categoryName: "分类名称",
       newItem: "新建咨询",
       editItem: "编辑咨询",
       confirmDeleteCategory: "确认删除分类「{name}」？",
@@ -1041,12 +1042,10 @@ export const TEXT = {
       待寄出: "待寄出",
       运输中: "运输中",
       已签收: "已签收",
-      已回收: "已回收",
       异常: "异常",
       PENDING: "待寄出",
       IN_TRANSIT: "运输中",
       SIGNED: "已签收",
-      RETURNED: "已回收",
       EXCEPTION: "异常",
     },
     projectStatus: {

frontend/src/utils/attachmentPermissions.test.ts

@@ -3,14 +3,30 @@ import { getAttachmentPermissionKey } from "./attachmentPermissions";
 
 describe("attachment permission mapping", () => {
   it("maps attachment entity types to module attachment permissions", () => {
+    expect(getAttachmentPermissionKey("contract_fee_contract", "create")).toBe("fees_contracts:create");
+    expect(getAttachmentPermissionKey("contract_fee_contract", "read")).toBe("fees_contracts:read");
     expect(getAttachmentPermissionKey("contract_fee_contract", "delete")).toBe("fees_contracts_attachments:delete");
-    expect(getAttachmentPermissionKey("startup_feasibility", "read")).toBe("startup_initiation_attachments:read");
-    expect(getAttachmentPermissionKey("startup_ethics", "create")).toBe("startup_ethics_attachments:create");
-    expect(getAttachmentPermissionKey("startup_kickoff_ppt", "read")).toBe("startup_auth_attachments:read");
+    expect(getAttachmentPermissionKey("startup_feasibility", "create")).toBe("startup_initiation:create");
+    expect(getAttachmentPermissionKey("startup_feasibility", "read")).toBe("startup_initiation:read");
+    expect(getAttachmentPermissionKey("startup_feasibility", "delete")).toBe("startup_initiation_attachments:delete");
+    expect(getAttachmentPermissionKey("startup_ethics", "create")).toBe("startup_ethics:create");
+    expect(getAttachmentPermissionKey("startup_ethics", "read")).toBe("startup_ethics:read");
+    expect(getAttachmentPermissionKey("startup_ethics", "delete")).toBe("startup_ethics_attachments:delete");
+    expect(getAttachmentPermissionKey("startup_kickoff_ppt", "create")).toBe("startup_auth:create");
+    expect(getAttachmentPermissionKey("startup_kickoff_ppt", "read")).toBe("startup_auth:read");
     expect(getAttachmentPermissionKey("training_authorization", "delete")).toBe("startup_auth_attachments:delete");
-    expect(getAttachmentPermissionKey("drug_shipment", "read")).toBe("drug_shipments_attachments:read");
-    expect(getAttachmentPermissionKey("precaution", "create")).toBe("precautions_attachments:create");
-    expect(getAttachmentPermissionKey("faq_replies", "create")).toBe("faq_attachments:create");
+    expect(getAttachmentPermissionKey("drug_shipment", "create")).toBe("drug_shipments:create");
+    expect(getAttachmentPermissionKey("drug_shipment", "read")).toBe("drug_shipments:read");
+    expect(getAttachmentPermissionKey("drug_shipment", "delete")).toBe("drug_shipments_attachments:delete");
+    expect(getAttachmentPermissionKey("material_equipment", "create")).toBe("material_equipments:update");
+    expect(getAttachmentPermissionKey("material_equipment", "read")).toBe("material_equipments:read");
+    expect(getAttachmentPermissionKey("material_equipment", "delete")).toBe("material_equipments_attachments:delete");
+    expect(getAttachmentPermissionKey("precaution", "create")).toBe("precautions:create");
+    expect(getAttachmentPermissionKey("precaution", "read")).toBe("precautions:read");
+    expect(getAttachmentPermissionKey("precaution", "delete")).toBe("precautions_attachments:delete");
+    expect(getAttachmentPermissionKey("faq_replies", "create")).toBe("faq_reply:create");
+    expect(getAttachmentPermissionKey("faq_replies", "read")).toBe("faq:read");
+    expect(getAttachmentPermissionKey("faq_replies", "delete")).toBe("faq_attachments:delete");
   });
 
   it("does not return generic attachments permissions", () => {

frontend/src/utils/attachmentPermissions.ts

@@ -1,25 +1,81 @@
 export type AttachmentPermissionAction = "create" | "read" | "delete";
 
-const ATTACHMENT_PERMISSION_PREFIXES: Record<string, string> = {
-  contract_fee_contract: "fees_contracts_attachments",
-  contract_fee_voucher: "fees_contracts_attachments",
-  contract_fee_invoice: "fees_contracts_attachments",
-  startup_feasibility: "startup_initiation_attachments",
-  startup_ethics: "startup_ethics_attachments",
-  startup_kickoff: "startup_auth_attachments",
-  startup_kickoff_minutes: "startup_auth_attachments",
-  startup_kickoff_signin: "startup_auth_attachments",
-  startup_kickoff_ppt: "startup_auth_attachments",
-  training_authorization: "startup_auth_attachments",
-  drug_shipment: "drug_shipments_attachments",
-  precaution: "precautions_attachments",
-  faq_replies: "faq_attachments",
+const PERMISSIONS_BY_ENTITY_ACTION: Record<string, Record<AttachmentPermissionAction, string>> = {
+  contract_fee_contract: {
+    create: "fees_contracts:create",
+    read: "fees_contracts:read",
+    delete: "fees_contracts_attachments:delete",
+  },
+  contract_fee_voucher: {
+    create: "fees_contracts:create",
+    read: "fees_contracts:read",
+    delete: "fees_contracts_attachments:delete",
+  },
+  contract_fee_invoice: {
+    create: "fees_contracts:create",
+    read: "fees_contracts:read",
+    delete: "fees_contracts_attachments:delete",
+  },
+  startup_feasibility: {
+    create: "startup_initiation:create",
+    read: "startup_initiation:read",
+    delete: "startup_initiation_attachments:delete",
+  },
+  startup_ethics: {
+    create: "startup_ethics:create",
+    read: "startup_ethics:read",
+    delete: "startup_ethics_attachments:delete",
+  },
+  startup_kickoff: {
+    create: "startup_auth:create",
+    read: "startup_auth:read",
+    delete: "startup_auth_attachments:delete",
+  },
+  startup_kickoff_minutes: {
+    create: "startup_auth:create",
+    read: "startup_auth:read",
+    delete: "startup_auth_attachments:delete",
+  },
+  startup_kickoff_signin: {
+    create: "startup_auth:create",
+    read: "startup_auth:read",
+    delete: "startup_auth_attachments:delete",
+  },
+  startup_kickoff_ppt: {
+    create: "startup_auth:create",
+    read: "startup_auth:read",
+    delete: "startup_auth_attachments:delete",
+  },
+  training_authorization: {
+    create: "startup_auth:create",
+    read: "startup_auth:read",
+    delete: "startup_auth_attachments:delete",
+  },
+  drug_shipment: {
+    create: "drug_shipments:create",
+    read: "drug_shipments:read",
+    delete: "drug_shipments_attachments:delete",
+  },
+  material_equipment: {
+    create: "material_equipments:update",
+    read: "material_equipments:read",
+    delete: "material_equipments_attachments:delete",
+  },
+  precaution: {
+    create: "precautions:create",
+    read: "precautions:read",
+    delete: "precautions_attachments:delete",
+  },
+  faq_replies: {
+    create: "faq_reply:create",
+    read: "faq:read",
+    delete: "faq_attachments:delete",
+  },
 };
 
 export const getAttachmentPermissionKey = (
   entityType: string,
   action: AttachmentPermissionAction
 ): string | null => {
-  const prefix = ATTACHMENT_PERMISSION_PREFIXES[entityType];
-  return prefix ? `${prefix}:${action}` : null;
+  return PERMISSIONS_BY_ENTITY_ACTION[entityType]?.[action] || null;
 };

frontend/src/views/fees/ContractFeeDetail.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readDetail = () => readFileSync(resolve(__dirname, "./ContractFeeDetail.vue"), "utf8");
+
+describe("ContractFeeDetail permissions", () => {
+  it("suppresses optional site lookup permission errors on the detail page", () => {
+    const source = readDetail();
+
+    expect(source).toContain('fetchSites(studyId.value, { limit: 500 }, { suppressErrorMessage: true })');
+  });
+
+  it("opens the edit drawer on the detail page without navigating back to the list", () => {
+    const source = readDetail();
+
+    expect(source).toContain("<ContractFeeEditorDrawer");
+    expect(source).toContain("editorVisible.value = true");
+    expect(source).toContain("const handleEditorSaved = () =>");
+    expect(source).not.toContain('router.push({ path: "/fees/contracts"');
+    expect(source).not.toContain("editContractId");
+  });
+
+  it("renders contract fee attachments as one aggregated table with attachment type labels", () => {
+    const source = readDetail();
+
+    expect(source).toContain("<AttachmentList");
+    expect(source).toContain(":entity-groups=\"attachmentGroups\"");
+    expect(source).toContain(":refresh-key=\"attachmentRefreshKey\"");
+    expect(source).toContain("attachmentRefreshKey.value += 1");
+    expect(source).not.toContain("<FeeAttachmentPanel");
+    expect(source).toContain('entityType: "contract_fee_contract"');
+    expect(source).toContain('entityType: "contract_fee_voucher"');
+    expect(source).toContain('entityType: "contract_fee_invoice"');
+  });
+
+  it("does not show attachment group descriptions on the detail page", () => {
+    const source = readDetail();
+
+    expect(source).not.toContain("attachmentContractDesc");
+    expect(source).not.toContain("attachmentVoucherDesc");
+    expect(source).not.toContain("attachmentInvoiceDesc");
+  });
+
+  it("keeps payment table columns evenly distributed with clear labels", () => {
+    const source = readDetail();
+
+    expect(source).toContain(':label="TEXT.modules.feeContracts.paymentSeqColumn"');
+    expect(source).not.toContain('width="20%"');
+    expect(source.match(/min-width="180"/g)).toHaveLength(5);
+    expect(source).not.toContain(".payment-table :deep(col:nth-child(-n + 5))");
+    expect(source).toContain(':label="TEXT.common.fields.amount" align="left" header-align="left" min-width="180"');
+  });
+
+  it("uses ten-thousand yuan as the only amount unit and hides currency", () => {
+    const source = readDetail();
+
+    expect(source).toContain("formatAmountWan(detail.contract_amount)");
+    expect(source).toContain("formatAmountWan(scope.row.amount)");
+    expect(source).toContain('<span class="amount-unit">万</span>');
+    expect(source).not.toContain("TEXT.common.fields.currency");
+    expect(source).not.toContain("detail.currency");
+    expect(source).not.toContain("currencyDefault");
+  });
+});

frontend/src/views/fees/ContractFeeDetail.vue

@@ -14,42 +14,43 @@
           <div class="card-header actions-header">
             <span class="header-title">{{ TEXT.modules.feeContracts.contractInfoTitle }}</span>
             <div class="actions">
-              <el-button type="primary" :disabled="!canWrite || isReadOnly" @click="goEdit" class="header-action-btn copy-btn">
+              <el-button v-if="canWrite" type="primary" :disabled="isReadOnly" @click="goEdit" class="header-action-btn copy-btn">
                 <el-icon class="el-icon--left"><Edit /></el-icon>
                 {{ TEXT.common.actions.edit }}
               </el-button>
-              <el-button @click="goBack" class="header-action-btn">
-                {{ TEXT.common.actions.back }}
-              </el-button>
             </div>
           </div>
         </template>
-        <el-descriptions :column="4" border class="custom-descriptions">
-          <el-descriptions-item :label="TEXT.common.fields.site" label-class-name="desc-label">
-            {{ centerName || TEXT.common.fallback }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.contractNo" label-class-name="desc-label">
-            {{ detail.contract_no || TEXT.common.fallback }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.signedDate" label-class-name="desc-label">
-            {{ displayDate(detail.signed_date) }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="TEXT.modules.feeContracts.contractAmount" label-class-name="desc-label">
-            <span class="amount-text">{{ formatAmountWan(detail.contract_amount) }}</span>
-          </el-descriptions-item>
-          <el-descriptions-item :label="TEXT.modules.feeContracts.contractCases" label-class-name="desc-label">
-            {{ detail.contract_cases ?? TEXT.common.fallback }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="TEXT.modules.feeContracts.actualCases" label-class-name="desc-label">
-            {{ detail.actual_cases ?? TEXT.common.fallback }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.currency" label-class-name="desc-label">
-            {{ detail.currency || TEXT.common.fields.currencyDefault }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.remark" label-class-name="desc-label" :span="4">
-            {{ detail.remark || TEXT.common.fallback }}
-          </el-descriptions-item>
-        </el-descriptions>
+        <div class="info-grid">
+          <div class="info-item info-item--highlight">
+            <span class="info-label">{{ TEXT.modules.feeContracts.contractAmount }}</span>
+            <span class="info-value amount-value">{{ formatAmountWan(detail.contract_amount) }}<span class="amount-unit">万</span></span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">{{ TEXT.common.fields.site }}</span>
+            <span class="info-value">{{ centerName || TEXT.common.fallback }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">{{ TEXT.common.fields.contractNo }}</span>
+            <span class="info-value">{{ detail.contract_no || TEXT.common.fallback }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">{{ TEXT.common.fields.signedDate }}</span>
+            <span class="info-value">{{ displayDate(detail.signed_date) }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">{{ TEXT.modules.feeContracts.contractCases }}</span>
+            <span class="info-value">{{ detail.contract_cases ?? TEXT.common.fallback }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">{{ TEXT.modules.feeContracts.actualCases }}</span>
+            <span class="info-value">{{ detail.actual_cases ?? TEXT.common.fallback }}</span>
+          </div>
+          <div class="info-item info-item--full">
+            <span class="info-label">{{ TEXT.common.fields.remark }}</span>
+            <span class="info-value">{{ detail.remark || TEXT.common.fallback }}</span>
+          </div>
+        </div>
       </el-card>
 
       <el-card class="section-card unified-shell" shadow="never">
@@ -59,17 +60,17 @@
           </div>
         </template>
         <el-table :data="detail.payments" style="width: 100%" :header-cell-style="{ background: '#f8f9fb' }" table-layout="fixed">
-          <el-table-column :label="TEXT.modules.feeContracts.paymentSeq">
+          <el-table-column :label="TEXT.modules.feeContracts.paymentSeqColumn" min-width="180">
             <template #default="scope">
               <span class="seq-tag">{{ TEXT.modules.feeContracts.paymentSeq }}{{ scope.row.seq }}{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.common.fields.amount" align="right">
+          <el-table-column :label="TEXT.common.fields.amount" align="left" header-align="left" min-width="180">
             <template #default="scope">
               <span class="amount-text">{{ formatAmountWan(scope.row.amount) }}</span>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.paidFlag">
+          <el-table-column :label="TEXT.modules.feeContracts.paidFlag" min-width="180">
             <template #default="scope">
               <div v-if="scope.row.is_paid" class="status-cell">
                 <el-tag type="success" size="small">{{ TEXT.modules.feeContracts.isPaid }}</el-tag>
@@ -78,7 +79,7 @@
               <span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.verifiedFlag">
+          <el-table-column :label="TEXT.modules.feeContracts.verifiedFlag" min-width="180">
             <template #default="scope">
               <div v-if="scope.row.is_verified" class="status-cell">
                 <el-tag type="info" size="small">{{ TEXT.modules.feeContracts.isVerified }}</el-tag>
@@ -87,7 +88,7 @@
               <span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.common.fields.remark" show-overflow-tooltip>
+          <el-table-column :label="TEXT.common.fields.remark" min-width="180" show-overflow-tooltip>
             <template #default="scope">{{ scope.row.remark || TEXT.common.fallback }}</template>
           </el-table-column>
           <template #empty>
@@ -102,21 +103,31 @@
             <span class="header-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
           </div>
         </template>
-        <FeeAttachmentPanel
+        <AttachmentList
           v-if="contractId"
-          :entity-type="'contract_fee'"
+          :study-id="studyId"
+          entity-type="contract_fee"
           :entity-id="contractId"
-          :groups="attachmentGroups"
+          :entity-groups="attachmentGroups"
           :readonly="isReadOnly"
+          :hide-uploader="true"
+          :refresh-key="attachmentRefreshKey"
         />
       </el-card>
     </template>
+
+    <ContractFeeEditorDrawer
+      v-model="editorVisible"
+      :contract-id="contractId"
+      :sites="sites"
+      @saved="handleEditorSaved"
+    />
   </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 { Edit } from "@element-plus/icons-vue";
 import { getContractFee } from "../../api/feeContracts";
@@ -126,23 +137,25 @@ import { usePermission } from "../../utils/permission";
 import { displayDate } from "../../utils/display";
 import StateError from "../../components/StateError.vue";
 import StateLoading from "../../components/StateLoading.vue";
-import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
+import AttachmentList from "../../components/attachments/AttachmentList.vue";
+import ContractFeeEditorDrawer from "./ContractFeeEditorDrawer.vue";
 import { TEXT } from "../../locales";
 
 const route = useRoute();
-const router = useRouter();
 const study = useStudyStore();
 const { can } = usePermission();
 const canWrite = computed(() => can("fees.contract.update"));
 
 const contractId = route.params.contractId as string;
+const studyId = computed(() => study.currentStudy?.id || "");
 const loading = ref(false);
+const editorVisible = ref(false);
 const errorMessage = ref("");
+const attachmentRefreshKey = ref(0);
 const detail = reactive<any>({
   contract_no: "",
   signed_date: "",
   contract_amount: 0,
-  currency: "CNY",
   remark: "",
   contract_cases: 0,
   actual_cases: null,
@@ -162,20 +175,20 @@ const attachmentGroups = [
   {
     key: "contract",
     label: TEXT.modules.feeContracts.attachmentContract,
-    description: TEXT.modules.feeContracts.attachmentContractDesc,
     emptyText: TEXT.modules.feeContracts.attachmentContractEmpty,
+    entityType: "contract_fee_contract",
   },
   {
     key: "voucher",
     label: TEXT.modules.feeContracts.attachmentVoucher,
-    description: TEXT.modules.feeContracts.attachmentVoucherDesc,
     emptyText: TEXT.modules.feeContracts.attachmentVoucherEmpty,
+    entityType: "contract_fee_voucher",
   },
   {
     key: "invoice",
     label: TEXT.modules.feeContracts.attachmentInvoice,
-    description: TEXT.modules.feeContracts.attachmentInvoiceDesc,
     emptyText: TEXT.modules.feeContracts.attachmentInvoiceEmpty,
+    entityType: "contract_fee_invoice",
   },
 ];
 
@@ -185,10 +198,9 @@ const centerName = computed(() => {
 });
 
 const loadSites = async () => {
-  const studyId = study.currentStudy?.id;
-  if (!studyId) return;
+  if (!studyId.value) return;
   try {
-    const { data } = await fetchSites(studyId, { limit: 500 });
+    const { data } = await fetchSites(studyId.value, { limit: 500 }, { suppressErrorMessage: true });
     sites.value = Array.isArray(data) ? data : data.items || [];
   } catch {
     sites.value = [];
@@ -203,11 +215,11 @@ const load = async () => {
     const { data } = await getContractFee(contractId);
     Object.assign(detail, data?.data || {});
     if (!Array.isArray(detail.payments)) detail.payments = [];
-    
-    // 同步中心名称到面包屑
-    if (centerName.value) {
-      study.setViewContext({ siteName: centerName.value });
-    }
+    const siteName = centerName.value || TEXT.common.fallback;
+    study.setViewContext({
+      siteName,
+      pageTitle: detail.contract_no || TEXT.menu.feeContracts,
+    });
   } catch (e: any) {
     errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
   } finally {
@@ -222,13 +234,21 @@ const formatAmountWan = (value: any) => {
 };
 
 const goEdit = () => {
+  if (!canWrite.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
   if (isReadOnly.value) {
     ElMessage.warning("中心已停用");
     return;
   }
-  router.push(`/fees/contracts/${contractId}/edit`);
+  editorVisible.value = true;
+};
+
+const handleEditorSaved = () => {
+  load();
+  attachmentRefreshKey.value += 1;
 };
-const goBack = () => router.push("/fees/contracts");
 
 onMounted(async () => {
   await loadSites();
@@ -240,7 +260,8 @@ onMounted(async () => {
 .page {
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 16px;
+  padding: 4px 0;
 }
 
 .actions {
@@ -249,14 +270,14 @@ onMounted(async () => {
 }
 
 .header-action-btn {
-  height: 36px;
+  height: 34px;
   border-radius: 8px;
   padding: 0 16px;
 }
 
 .detail-card, .section-card {
-  border-radius: 12px;
-  border: 1px solid var(--ctms-border-color);
+  border-radius: 14px;
+  border: 1px solid var(--unified-shell-divider, #eaf0f8);
   overflow: hidden;
 }
 
@@ -275,23 +296,72 @@ onMounted(async () => {
 }
 
 .header-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--ctms-text-main);
-  border-left: 4px solid var(--el-color-primary);
-  padding-left: 12px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--unified-title-color, #0f2345);
+  border-left: 3px solid var(--el-color-primary);
+  padding-left: 10px;
 }
 
-.custom-descriptions :deep(.desc-label) {
-  background-color: var(--ctms-bg-color-page) !important;
-  color: var(--ctms-text-secondary);
-  width: 150px;
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+  padding: 20px 24px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  transition: background 0.15s ease;
+}
+
+.info-item:hover {
+  background: #f8fafc;
+}
+
+.info-item--highlight {
+  background: linear-gradient(135deg, #f0f6ff 0%, #eef3fb 100%);
+  border-radius: 10px;
+}
+
+.info-item--highlight:hover {
+  background: linear-gradient(135deg, #e8f1ff 0%, #e6edfa 100%);
+}
+
+.info-item--full {
+  grid-column: 1 / -1;
+}
+
+.info-label {
+  font-size: 12px;
   font-weight: 500;
+  color: var(--unified-muted-color, #6f84a8);
+  letter-spacing: 0.02em;
 }
 
-.amount-text {
-  font-family: var(--el-font-family);
-  font-weight: 600;
+.info-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--ctms-text-main);
+  word-break: break-all;
+}
+
+.amount-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--ctms-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.amount-unit {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--unified-muted-color, #6f84a8);
+  margin-left: 2px;
 }
 
 .seq-tag {
@@ -313,17 +383,31 @@ onMounted(async () => {
 }
 
 .text-muted {
-  color: var(--ctms-text-placeholder);
+  color: var(--ctms-text-placeholder, #94a3b8);
   font-size: 13px;
 }
+
 .table-empty {
-  min-height: 220px;
+  min-height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #8a97ab;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
-  letter-spacing: 0.02em;
+}
+
+@media (max-width: 960px) {
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+    padding: 16px;
+  }
+}
+
+@media (max-width: 640px) {
+  .info-grid {
+    grid-template-columns: 1fr;
+    padding: 12px;
+  }
 }
 </style>

frontend/src/views/fees/ContractFeeEditorDrawer.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readDrawer = () => readFileSync(resolve(__dirname, "./ContractFeeEditorDrawer.vue"), "utf8");
+const readLocale = () => readFileSync(resolve(__dirname, "../../locales/zh-CN.ts"), "utf8");
+
+describe("ContractFeeEditorDrawer attachments", () => {
+  it("uses upload-card mode for attachments instead of the detail table", () => {
+    const source = readDrawer();
+
+    expect(source).toContain('ref="attachmentPanelRef"');
+    expect(source).toContain("<AttachmentList");
+    expect(source).toContain(":entity-groups=\"attachmentGroups\"");
+    expect(source).not.toContain("PendingAttachmentUpload");
+    expect(source).not.toContain("FeeAttachmentPanel");
+    expect(source).not.toContain("attachmentContractDesc");
+    expect(source).not.toContain("attachmentVoucherDesc");
+    expect(source).not.toContain("attachmentInvoiceDesc");
+  });
+
+  it("uploads selected attachments only after the form save succeeds", () => {
+    const source = readDrawer();
+
+    expect(source).toContain("const attachmentPanelRef = ref<InstanceType<typeof AttachmentList> | null>(null)");
+    expect(source).toContain("await attachmentPanelRef.value?.uploadPending(savedId)");
+    expect(source).toContain("attachments: attachmentPanelRef.value?.pendingSnapshot() || []");
+    expect(source.indexOf("await attachmentPanelRef.value?.uploadPending(savedId)")).toBeLessThan(
+      source.indexOf('emit("update:modelValue", false)')
+    );
+  });
+
+  it("shows attachment upload cards while creating a new contract fee", () => {
+    const source = readDrawer();
+
+    expect(source).toContain('class="form-group attachment-form-group"');
+    expect(source).toContain(':entity-id="form.id"');
+    expect(source).toContain("<AttachmentList");
+    expect(source).not.toContain('<div v-if="form.id" class="form-group">');
+  });
+
+  it("labels the section as attachments instead of contract attachments", () => {
+    const source = readLocale();
+
+    expect(source).toContain('attachmentTitle: "附件"');
+    expect(source).not.toContain('attachmentTitle: "合同附件"');
+  });
+
+  it("uses a payment grid that keeps date pickers inside their columns", () => {
+    const source = readDrawer();
+
+    expect(source).toContain('class="payment-grid"');
+    expect(source).toContain('class="payment-field payment-field--amount"');
+    expect(source).toContain('class="payment-field payment-field--status"');
+    expect(source).toContain('class="payment-field payment-field--remark"');
+    expect(source).toContain("grid-template-columns: minmax(180px, 0.9fr) repeat(2, minmax(220px, 1fr));");
+    expect(source).toContain("min-width: 0;");
+    expect(source).toContain(".status-picker :deep(.el-date-editor.el-input)");
+  });
+
+  it("uses ten-thousand yuan as the only amount unit and removes currency selection", () => {
+    const source = readDrawer();
+
+    expect(source).toContain(':label="`${TEXT.modules.feeContracts.contractAmount}（万元）`"');
+    expect(source).toContain(':label="`${TEXT.common.fields.amount}（万元）`"');
+    expect(source).toContain("contract_amount: Number(detail.contract_amount || 0) / 10000");
+    expect(source).toContain("amount: Number(payment.amount || 0) / 10000");
+    expect(source).toContain("contract_amount: Number(form.contract_amount || 0) * 10000");
+    expect(source).toContain("amount: Number(payment.amount || 0) * 10000");
+    expect(source).not.toContain("prop=\"currency\"");
+    expect(source).not.toContain("form.currency");
+    expect(source).not.toContain("payload.currency");
+    expect(source).not.toContain("currency:");
+  });
+});

frontend/src/views/fees/ContractFeeEditorDrawer.vue

@@ -0,0 +1,795 @@
+<template>
+  <el-drawer
+    v-if="modelValue"
+    :model-value="modelValue"
+    direction="rtl"
+    size="720px"
+    :close-on-click-modal="true"
+    :before-close="drawerDirtyGuard.beforeClose"
+    :show-close="false"
+    class="contract-fee-editor-drawer"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #header>
+      <div class="editor-header">
+        <div class="editor-title">{{ contractId ? TEXT.modules.feeContracts.editTitle : TEXT.modules.feeContracts.newTitle }}</div>
+      </div>
+    </template>
+
+    <StateError v-if="drawerErrorMessage" :description="drawerErrorMessage">
+      <template #action>
+        <el-button type="primary" @click="reloadEditingDetail">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="drawerLoading" :rows="6" />
+
+    <el-form v-else ref="formRef" :model="form" :rules="rules" label-position="top" class="contract-fee-form">
+      <div class="form-group">
+        <div class="form-group-title">
+          <span class="group-dot group-dot-basic"></span>
+          {{ TEXT.modules.feeContracts.contractInfoTitle }}
+        </div>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.site" prop="center_id">
+              <el-select
+                v-model="form.center_id"
+                :disabled="!!contractId || isFormReadOnly"
+                :placeholder="TEXT.common.placeholders.select"
+                class="full-width"
+              >
+                <el-option
+                  v-for="site in sites"
+                  :key="site.id"
+                  :label="site.name || TEXT.common.fallback"
+                  :value="site.id"
+                  :disabled="!site.is_active"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.contractNo" prop="contract_no">
+              <el-input v-model="form.contract_no" :disabled="isFormReadOnly" :placeholder="TEXT.common.placeholders.input" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item :label="TEXT.common.fields.signedDate" prop="signed_date">
+              <el-date-picker
+                v-model="form.signed_date"
+                :disabled="isFormReadOnly"
+                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="8">
+            <el-form-item :label="`${TEXT.modules.feeContracts.contractAmount}（万元）`" prop="contract_amount">
+              <el-input-number
+                v-model="form.contract_amount"
+                :disabled="isFormReadOnly"
+                :min="0"
+                :precision="2"
+                :step="1"
+                class="full-width"
+                controls-position="right"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="TEXT.modules.feeContracts.contractCases" prop="contract_cases">
+              <el-input-number v-model="form.contract_cases" :disabled="isFormReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="TEXT.modules.feeContracts.actualCases" prop="actual_cases">
+              <el-input-number v-model="form.actual_cases" :disabled="isFormReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item :label="TEXT.common.fields.remark" prop="remark">
+          <el-input v-model="form.remark" :disabled="isFormReadOnly" type="textarea" :rows="3" :placeholder="TEXT.common.placeholders.input" />
+        </el-form-item>
+        <div v-if="selectedSiteInactive" class="inactive-hint">
+          <span class="hint-icon">!</span>
+          <span>中心已停用，当前记录不可编辑</span>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="form-group-title action-title">
+          <span>
+            <span class="group-dot group-dot-payment"></span>
+            {{ TEXT.modules.feeContracts.paymentTitle }}
+          </span>
+          <el-button type="primary" size="small" :disabled="isFormReadOnly" @click="addPayment">
+            <el-icon class="el-icon--left"><Plus /></el-icon>
+            {{ TEXT.common.actions.add }}
+          </el-button>
+        </div>
+
+        <div v-if="payments.length === 0" class="section-empty">
+          {{ TEXT.modules.feeContracts.paymentEmpty }}
+        </div>
+
+        <div v-else class="payment-list">
+          <div v-for="(payment, index) in payments" :key="payment.tempId" class="payment-item">
+            <div class="payment-item-header">
+              <div class="payment-seq">
+                <span class="seq-circle">{{ index + 1 }}</span>
+                <span class="seq-text">{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
+              </div>
+              <el-button link type="danger" :disabled="isFormReadOnly" @click="removePayment(index)">
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </div>
+            <div class="payment-grid">
+              <div class="payment-field payment-field--amount">
+                <el-form-item :label="`${TEXT.common.fields.amount}（万元）`" :error="paymentErrors[index]?.amount">
+                  <el-input-number v-model="payment.amount" :disabled="isFormReadOnly" :min="0" :precision="2" class="full-width" controls-position="right" />
+                </el-form-item>
+              </div>
+              <div class="payment-field payment-field--status">
+                <el-form-item :label="TEXT.modules.feeContracts.paidFlag" :error="paymentErrors[index]?.paid_date">
+                  <div class="status-control">
+                    <el-checkbox v-model="payment.is_paid" :disabled="isFormReadOnly" @change="() => onPaidToggle(payment)">
+                      {{ TEXT.modules.feeContracts.isPaid }}
+                    </el-checkbox>
+                    <el-date-picker
+                      v-if="payment.is_paid"
+                      v-model="payment.paid_date"
+                      type="date"
+                      value-format="YYYY-MM-DD"
+                      :placeholder="TEXT.common.placeholders.select"
+                      :disabled="isFormReadOnly"
+                      class="status-picker"
+                      size="small"
+                    />
+                  </div>
+                </el-form-item>
+              </div>
+              <div class="payment-field payment-field--status">
+                <el-form-item :label="TEXT.modules.feeContracts.verifiedFlag" :error="paymentErrors[index]?.verified_date">
+                  <div class="status-control">
+                    <el-checkbox v-model="payment.is_verified" :disabled="isFormReadOnly" @change="() => onVerifiedToggle(payment)">
+                      {{ TEXT.modules.feeContracts.isVerified }}
+                    </el-checkbox>
+                    <el-date-picker
+                      v-if="payment.is_verified"
+                      v-model="payment.verified_date"
+                      type="date"
+                      value-format="YYYY-MM-DD"
+                      :placeholder="TEXT.common.placeholders.select"
+                      :disabled="isFormReadOnly"
+                      class="status-picker"
+                      size="small"
+                    />
+                  </div>
+                </el-form-item>
+              </div>
+              <div class="payment-field payment-field--remark">
+                <el-form-item :label="TEXT.common.fields.remark" class="mb-0">
+                  <el-input v-model="payment.remark" :disabled="isFormReadOnly" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
+                </el-form-item>
+              </div>
+            </div>
+            <div v-if="paymentErrors[index]?.verification" class="payment-error">
+              {{ paymentErrors[index].verification }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group attachment-form-group">
+        <div class="form-group-title">
+          <span class="group-dot group-dot-attachment"></span>
+          {{ TEXT.modules.feeContracts.attachmentTitle }}
+        </div>
+        <AttachmentList
+          ref="attachmentPanelRef"
+          :study-id="currentStudyId"
+          :entity-type="'contract_fee'"
+          :entity-id="form.id"
+          :entity-groups="attachmentGroups"
+          :mode="'upload'"
+          :readonly="isFormReadOnly"
+        />
+      </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="isFormReadOnly || drawerLoading" @click="saveForm">{{ TEXT.common.actions.save }}</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+import { Delete, Plus } from "@element-plus/icons-vue";
+import {
+  createContractFee,
+  createContractPayment,
+  deleteContractPayment,
+  getContractFee,
+  updateContractFee,
+  updateContractPayment,
+} from "../../api/feeContracts";
+import { useStudyStore } from "../../store/study";
+import { usePermission } from "../../utils/permission";
+import { useDrawerDirtyGuard } from "../../utils/drawerDirtyGuard";
+import AttachmentList from "../../components/attachments/AttachmentList.vue";
+import StateError from "../../components/StateError.vue";
+import StateLoading from "../../components/StateLoading.vue";
+import { TEXT } from "../../locales";
+
+type ContractFormModel = {
+  id: string;
+  study_id: string;
+  center_id: string;
+  contract_no: string;
+  signed_date: string;
+  contract_amount: number;
+  remark: string;
+  contract_cases: number;
+  actual_cases: number | null;
+};
+
+type PaymentFormModel = {
+  id?: string;
+  tempId: string;
+  amount: number;
+  paid_date: string;
+  verified_date: string;
+  is_paid: boolean;
+  is_verified: boolean;
+  remark: string;
+};
+
+const props = defineProps<{
+  modelValue: boolean;
+  contractId?: string;
+  sites: any[];
+  initialCenterId?: string;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  saved: [contractId: string];
+}>();
+
+const study = useStudyStore();
+const { can } = usePermission();
+const canCreate = computed(() => can("fees.contract.create"));
+const canUpdate = computed(() => can("fees.contract.update"));
+const currentStudyId = computed(() => study.currentStudy?.id || "");
+const drawerLoading = ref(false);
+const drawerErrorMessage = ref("");
+const saving = ref(false);
+const formRef = ref<FormInstance>();
+const attachmentPanelRef = ref<InstanceType<typeof AttachmentList> | null>(null);
+
+const siteActiveMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  props.sites.forEach((site) => {
+    if (site?.id) map[site.id] = !!site.is_active;
+  });
+  return map;
+});
+
+const defaultForm: ContractFormModel = {
+  id: "",
+  study_id: "",
+  center_id: "",
+  contract_no: "",
+  signed_date: "",
+  contract_amount: 0,
+  remark: "",
+  contract_cases: 0,
+  actual_cases: null,
+};
+
+const form = reactive<ContractFormModel>({ ...defaultForm });
+const payments = ref<PaymentFormModel[]>([]);
+const removedPaymentIds = ref<string[]>([]);
+const paymentErrors = ref<Record<string, string>[]>([]);
+const drawerDirtyGuard = useDrawerDirtyGuard(() => ({
+  form,
+  payments: payments.value,
+  removedPaymentIds: removedPaymentIds.value,
+  attachments: attachmentPanelRef.value?.pendingSnapshot() || [],
+}));
+const selectedSiteInactive = computed(() => !!props.contractId && !!form.center_id && siteActiveMap.value[form.center_id] === false);
+const isFormReadOnly = computed(() => (props.contractId ? !canUpdate.value : !canCreate.value) || selectedSiteInactive.value);
+
+const attachmentGroups = [
+  {
+    entityType: "contract_fee_contract",
+    label: TEXT.modules.feeContracts.attachmentContract,
+  },
+  {
+    entityType: "contract_fee_voucher",
+    label: TEXT.modules.feeContracts.attachmentVoucher,
+  },
+  {
+    entityType: "contract_fee_invoice",
+    label: TEXT.modules.feeContracts.attachmentInvoice,
+  },
+];
+
+const rules: FormRules<ContractFormModel> = {
+  center_id: [{ required: true, message: TEXT.common.messages.required, trigger: "change" }],
+  contract_amount: [{ required: true, type: "number", message: TEXT.common.messages.required, trigger: "change" }],
+  contract_cases: [{ required: true, type: "number", message: TEXT.common.messages.required, trigger: "change" }],
+};
+
+const resetForm = () => {
+  Object.assign(form, { ...defaultForm, study_id: study.currentStudy?.id || "", center_id: props.initialCenterId || "" });
+  payments.value = [];
+  removedPaymentIds.value = [];
+  paymentErrors.value = [];
+  drawerErrorMessage.value = "";
+  formRef.value?.clearValidate();
+};
+
+const normalizePayment = (payment: any): PaymentFormModel => ({
+  id: payment.id,
+  tempId: payment.id || `${Date.now()}-${Math.random()}`,
+  amount: Number(payment.amount || 0) / 10000,
+  paid_date: payment.paid_date || "",
+  verified_date: payment.verified_date || "",
+  is_paid: !!payment.is_paid,
+  is_verified: !!payment.is_verified,
+  remark: payment.remark || "",
+});
+
+const loadEditingDetail = async (id: string) => {
+  drawerLoading.value = true;
+  drawerErrorMessage.value = "";
+  try {
+    const { data } = await getContractFee(id);
+    const detail = data?.data || {};
+    Object.assign(form, {
+      id: detail.id || id,
+      study_id: detail.study_id || study.currentStudy?.id || "",
+      center_id: detail.center_id || "",
+      contract_no: detail.contract_no || "",
+      signed_date: detail.signed_date || "",
+      contract_amount: Number(detail.contract_amount || 0) / 10000,
+      remark: detail.remark || "",
+      contract_cases: Number(detail.contract_cases || 0),
+      actual_cases: detail.actual_cases ?? null,
+    });
+    payments.value = (detail.payments || []).map(normalizePayment);
+    removedPaymentIds.value = [];
+    paymentErrors.value = [];
+    formRef.value?.clearValidate();
+    drawerDirtyGuard.syncBaseline();
+  } catch (e: any) {
+    drawerErrorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
+  } finally {
+    drawerLoading.value = false;
+  }
+};
+
+const reloadEditingDetail = () => {
+  if (props.contractId) loadEditingDetail(props.contractId);
+};
+
+const addPayment = () => {
+  if (isFormReadOnly.value) {
+    ElMessage.warning(selectedSiteInactive.value ? "中心已停用" : "权限不足");
+    return;
+  }
+  payments.value.push({
+    tempId: `${Date.now()}-${Math.random()}`,
+    amount: 0,
+    paid_date: "",
+    verified_date: "",
+    is_paid: false,
+    is_verified: false,
+    remark: "",
+  });
+};
+
+const removePayment = (index: number) => {
+  if (isFormReadOnly.value) {
+    ElMessage.warning(selectedSiteInactive.value ? "中心已停用" : "权限不足");
+    return;
+  }
+  const payment = payments.value[index];
+  if (payment?.id) {
+    removedPaymentIds.value.push(payment.id);
+  }
+  payments.value.splice(index, 1);
+};
+
+const onPaidToggle = (payment: PaymentFormModel) => {
+  if (isFormReadOnly.value) return;
+  if (!payment.is_paid) {
+    payment.paid_date = "";
+    payment.is_verified = false;
+    payment.verified_date = "";
+  }
+};
+
+const onVerifiedToggle = (payment: PaymentFormModel) => {
+  if (isFormReadOnly.value) return;
+  if (payment.is_verified && !payment.is_paid) {
+    payment.is_paid = true;
+  }
+  if (!payment.is_verified) {
+    payment.verified_date = "";
+  }
+};
+
+const validatePayments = () => {
+  const errors: Record<string, string>[] = [];
+  let ok = true;
+  payments.value.forEach((payment, index) => {
+    const entry: Record<string, string> = {};
+    if (payment.amount === null || payment.amount === undefined || Number(payment.amount) < 0) {
+      entry.amount = TEXT.modules.feeContracts.amountInvalid;
+      ok = false;
+    }
+    if (payment.is_paid && !payment.paid_date) {
+      entry.paid_date = TEXT.modules.feeContracts.paidDateRequired;
+      ok = false;
+    }
+    if (payment.is_verified && !payment.verified_date) {
+      entry.verified_date = TEXT.modules.feeContracts.verifiedDateRequired;
+      ok = false;
+    }
+    if (payment.is_verified && !payment.is_paid) {
+      entry.verification = TEXT.modules.feeContracts.verifyRequiresPaid;
+      ok = false;
+    }
+    errors[index] = entry;
+  });
+  paymentErrors.value = errors;
+  return ok;
+};
+
+const saveForm = async () => {
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
+  if (isFormReadOnly.value) {
+    ElMessage.warning(selectedSiteInactive.value ? "中心已停用" : "权限不足");
+    return;
+  }
+  if (form.center_id && siteActiveMap.value[form.center_id] === false) {
+    ElMessage.warning("中心已停用");
+    return;
+  }
+  const formOk = await formRef.value?.validate?.().catch(() => false);
+  if (!formOk) return;
+  if (!validatePayments()) {
+    ElMessage.error(TEXT.modules.feeContracts.paymentValidationFailed);
+    return;
+  }
+  saving.value = true;
+  try {
+    const payload = {
+      study_id: studyId,
+      center_id: form.center_id,
+      contract_no: form.contract_no || null,
+      signed_date: form.signed_date || null,
+      contract_amount: Number(form.contract_amount || 0) * 10000,
+      remark: form.remark || null,
+      contract_cases: Number(form.contract_cases || 0),
+      actual_cases: form.actual_cases === null ? null : Number(form.actual_cases),
+    };
+    const updatePayload = {
+      contract_amount: payload.contract_amount,
+      contract_no: payload.contract_no,
+      signed_date: payload.signed_date,
+      remark: payload.remark,
+      contract_cases: payload.contract_cases,
+      actual_cases: payload.actual_cases,
+    };
+
+    let savedId = props.contractId || form.id;
+    if (props.contractId && savedId) {
+      await updateContractFee(savedId, updatePayload);
+    } else {
+      const { data } = await createContractFee(payload);
+      savedId = data?.data?.id;
+      form.id = savedId || "";
+    }
+
+    if (savedId) {
+      for (const paymentId of removedPaymentIds.value) {
+        await deleteContractPayment(paymentId);
+      }
+      removedPaymentIds.value = [];
+      for (const payment of payments.value) {
+        const paymentPayload = {
+          amount: Number(payment.amount || 0) * 10000,
+          paid_date: payment.paid_date || null,
+          verified_date: payment.verified_date || null,
+          is_paid: !!payment.is_paid,
+          is_verified: !!payment.is_verified,
+          remark: payment.remark || null,
+        };
+        if (payment.id) {
+          await updateContractPayment(payment.id, paymentPayload);
+        } else {
+          const { data } = await createContractPayment(savedId, paymentPayload);
+          payment.id = data?.data?.id;
+          payment.tempId = payment.id || payment.tempId;
+        }
+      }
+      await attachmentPanelRef.value?.uploadPending(savedId);
+    }
+
+    drawerDirtyGuard.syncBaseline();
+    emit("update:modelValue", false);
+    emit("saved", savedId || "");
+    ElMessage.success(TEXT.common.messages.saveSuccess);
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || e?.message || TEXT.common.messages.saveFailed);
+  } finally {
+    saving.value = false;
+  }
+};
+
+watch(
+  () => props.modelValue,
+  async (visible) => {
+    if (!visible) return;
+    resetForm();
+    if (props.contractId) {
+      await loadEditingDetail(props.contractId);
+    } else {
+      drawerDirtyGuard.syncBaseline();
+    }
+  },
+);
+</script>
+
+<style scoped>
+:deep(.contract-fee-editor-drawer > .el-drawer__header) {
+  margin-bottom: 0;
+  padding: 22px 20px 8px;
+}
+
+:deep(.contract-fee-editor-drawer > .el-drawer__body) {
+  padding: 0 20px 4px;
+}
+
+.editor-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+  line-height: 1.2;
+}
+
+.contract-fee-form {
+  padding: 0 4px 0 0;
+}
+
+.form-group {
+  border: 1px solid #e8eef6;
+  border-radius: 10px;
+  padding: 16px 18px 8px;
+  background: #fbfcfe;
+  transition: border-color 0.2s ease;
+}
+
+.form-group:hover {
+  border-color: #d0dced;
+}
+
+.form-group + .form-group {
+  margin-top: 14px;
+}
+
+.form-group-title {
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 14px;
+  color: #1a3560;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-title {
+  justify-content: space-between;
+}
+
+.action-title > span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.group-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.group-dot-basic {
+  background: #3b82f6;
+}
+
+.group-dot-payment {
+  background: #f0ad2c;
+}
+
+.group-dot-attachment {
+  background: #22c55e;
+}
+
+.inactive-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: #fff7d6;
+  border: 1px solid #fde68a;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #92400e;
+  margin-bottom: 8px;
+}
+
+.hint-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #f59e0b;
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.section-empty {
+  padding: 28px 0;
+  display: flex;
+  justify-content: center;
+  color: #8a97ab;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.payment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.payment-item {
+  border: 1px solid #e8eef6;
+  border-radius: 8px;
+  padding: 18px 20px 16px;
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+  box-shadow: 0 8px 20px rgba(38, 73, 119, 0.05);
+}
+
+.payment-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.payment-seq {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.seq-circle {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: #3f5f7a;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.seq-text {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+}
+
+.payment-grid {
+  display: grid;
+  grid-template-columns: minmax(180px, 0.9fr) repeat(2, minmax(220px, 1fr));
+  gap: 14px 18px;
+  align-items: start;
+}
+
+.payment-field {
+  min-width: 0;
+}
+
+.payment-field--remark {
+  grid-column: 1 / -1;
+}
+
+.status-control {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.status-picker {
+  width: 100%;
+  min-width: 0;
+}
+
+.status-picker :deep(.el-date-editor.el-input),
+.status-picker :deep(.el-input__wrapper) {
+  width: 100%;
+  min-width: 0;
+}
+
+.payment-error {
+  color: var(--ctms-danger);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.contract-fee-form :deep(.el-form-item) {
+  margin-bottom: 12px;
+}
+
+.contract-fee-form :deep(.el-form-item__label) {
+  font-size: 13px;
+  font-weight: 600;
+  color: #4a6283;
+  padding-bottom: 4px;
+}
+
+@media (max-width: 760px) {
+  .payment-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .payment-field--remark {
+    grid-column: auto;
+  }
+}
+</style>

frontend/src/views/fees/ContractFeeForm.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-
-const readSource = () => readFileSync(resolve(__dirname, "./ContractFeeForm.vue"), "utf8");
-
-describe("ContractFeeForm.vue", () => {
-  it("keeps contract fields in a four-column contract info section", () => {
-    const source = readSource();
-
-    expect(source).toContain("contractInfoTitle");
-    expect(source).not.toContain("feeSettlementTitle");
-    expect(source).not.toContain("settlement_amount");
-    expect(source).not.toContain("final_payment_amount");
-    expect(source).toContain(':lg="6"');
-    expect(source).toContain('prop="contract_no"');
-    expect(source).toContain('prop="signed_date"');
-    expect(source).toContain('prop="currency"');
-    expect(source).toContain('prop="remark"');
-    expect(source).toContain("form.contract_no");
-    expect(source).toContain("form.signed_date");
-    expect(source).toContain("form.currency");
-    expect(source).toContain("form.remark");
-  });
-
-  it("allows system admins to edit without project permission matrix entries", () => {
-    const source = readSource();
-
-    expect(source).toContain("useAuthStore");
-    expect(source).toContain("isSystemAdmin");
-    expect(source).toContain("if (isAdmin.value) return true;");
-  });
-});

frontend/src/views/fees/ContractFeeForm.vue

@@ -1,693 +0,0 @@
-<template>
-  <div class="page">
-    <StateError v-if="errorMessage" :description="errorMessage">
-      <template #action>
-        <el-button type="primary" @click="loadDetail">{{ TEXT.common.actions.retry }}</el-button>
-      </template>
-    </StateError>
-
-    <StateLoading v-else-if="loading" :rows="6" />
-
-    <template v-else>
-        <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" label-position="top">
-          <el-card class="form-card unified-shell" shadow="never">
-          <template #header>
-            <div class="card-header actions-header">
-              <span class="header-title">{{ TEXT.modules.feeContracts.contractInfoTitle }}</span>
-              <el-button @click="goBack">{{ TEXT.common.actions.back }}</el-button>
-            </div>
-          </template>
-          <el-row :gutter="24">
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item :label="TEXT.common.fields.site" prop="center_id" required>
-                <el-select
-                  v-model="form.center_id"
-                  :disabled="isEdit || isReadOnly"
-                  :placeholder="TEXT.common.placeholders.select"
-                  class="full-width"
-                >
-                  <el-option
-                    v-for="site in sites"
-                    :key="site.id"
-                    :label="site.name || TEXT.common.fallback"
-                    :value="site.id"
-                    :disabled="!site.is_active"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item :label="TEXT.common.fields.contractNo" prop="contract_no">
-                <el-input v-model="form.contract_no" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.input" />
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item :label="TEXT.common.fields.signedDate" prop="signed_date">
-                <el-date-picker
-                  v-model="form.signed_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 :xs="24" :sm="12" :lg="6">
-              <el-form-item :label="TEXT.modules.feeContracts.contractAmount" prop="contract_amount" required>
-                <el-input-number
-                  v-model="form.contract_amount"
-                  :disabled="isReadOnly"
-                  :min="0"
-                  :precision="2"
-                  :step="1000"
-                  class="full-width"
-                  controls-position="right"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item :label="TEXT.modules.feeContracts.contractCases" prop="contract_cases" required>
-                <el-input-number v-model="form.contract_cases" :disabled="isReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item :label="TEXT.modules.feeContracts.actualCases" prop="actual_cases">
-                <el-input-number v-model="form.actual_cases" :disabled="isReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item :label="TEXT.common.fields.currency" prop="currency">
-                <el-select v-model="form.currency" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.select" class="full-width">
-                  <el-option label="CNY" value="CNY" />
-                  <el-option label="USD" value="USD" />
-                  <el-option label="EUR" value="EUR" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item :label="TEXT.common.fields.remark" prop="remark">
-                <el-input v-model="form.remark" :disabled="isReadOnly" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-card>
-
-        <el-card class="form-card section-margin attachment-card unified-shell" shadow="never">
-          <template #header>
-            <div class="card-header actions-header">
-              <span class="header-title">{{ TEXT.modules.feeContracts.paymentTitle }}</span>
-              <el-button type="primary" :disabled="isReadOnly" @click="addPayment">
-                <el-icon class="el-icon--left"><Plus /></el-icon>
-                {{ TEXT.common.actions.add }}
-              </el-button>
-            </div>
-          </template>
-
-          <div v-if="payments.length === 0" class="section-empty">
-            {{ TEXT.modules.feeContracts.paymentEmpty }}
-          </div>
-          
-          <div v-else class="payment-list">
-            <transition-group name="list">
-              <div v-for="(payment, index) in payments" :key="payment.tempId" class="payment-item">
-                <div class="payment-item-header">
-                  <div class="payment-seq">
-                    <span class="seq-circle">{{ index + 1 }}</span>
-                    <span class="seq-text">{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
-                  </div>
-                  <el-button link type="danger" :disabled="isReadOnly" @click="removePayment(index)">
-                    <el-icon><Delete /></el-icon>
-                  </el-button>
-                </div>
-                
-                <el-row :gutter="16">
-                  <el-col :span="8">
-                    <el-form-item :label="TEXT.common.fields.amount" :error="paymentErrors[index]?.amount">
-                      <el-input-number v-model="payment.amount" :disabled="isReadOnly" :min="0" :precision="2" class="full-width" controls-position="right" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item :label="TEXT.modules.feeContracts.paidFlag" :error="paymentErrors[index]?.paid_date">
-                      <div class="status-control">
-                        <el-checkbox v-model="payment.is_paid" :disabled="isReadOnly" @change="() => onPaidToggle(payment)">
-                          {{ TEXT.modules.feeContracts.isPaid }}
-                        </el-checkbox>
-                        <el-date-picker
-                          v-if="payment.is_paid"
-                          v-model="payment.paid_date"
-                          type="date"
-                          value-format="YYYY-MM-DD"
-                          :placeholder="TEXT.common.placeholders.select"
-                          :disabled="isReadOnly"
-                          class="status-picker"
-                          size="small"
-                        />
-                      </div>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item :label="TEXT.modules.feeContracts.verifiedFlag" :error="paymentErrors[index]?.verified_date">
-                      <div class="status-control">
-                        <el-checkbox v-model="payment.is_verified" :disabled="isReadOnly" @change="() => onVerifiedToggle(payment)">
-                          {{ TEXT.modules.feeContracts.isVerified }}
-                        </el-checkbox>
-                        <el-date-picker
-                          v-if="payment.is_verified"
-                          v-model="payment.verified_date"
-                          type="date"
-                          value-format="YYYY-MM-DD"
-                          :placeholder="TEXT.common.placeholders.select"
-                          :disabled="isReadOnly"
-                          class="status-picker"
-                          size="small"
-                        />
-                      </div>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                
-                <el-form-item :label="TEXT.common.fields.remark" class="mb-0">
-                  <el-input v-model="payment.remark" :disabled="isReadOnly" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
-                </el-form-item>
-                
-                <div v-if="paymentErrors[index]?.verification" class="payment-error">
-                  {{ paymentErrors[index].verification }}
-                </div>
-              </div>
-            </transition-group>
-          </div>
-        </el-card>
-
-        <el-card class="form-card section-margin unified-shell" shadow="never">
-          <template #header>
-            <div class="card-header">
-              <span class="header-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
-            </div>
-          </template>
-          <FeeAttachmentPanel
-            v-if="form.id"
-            :entity-type="'contract_fee'"
-            :entity-id="form.id"
-            :groups="attachmentGroups"
-            :readonly="isReadOnly"
-          />
-
-          <StateEmpty v-else :description="TEXT.modules.feeContracts.uploadHint" class="compact-empty" />
-        </el-card>
-
-        <div class="footer-actions">
-          <el-button @click="goBack">{{ TEXT.common.actions.cancel }}</el-button>
-          <el-button type="primary" :loading="saving" :disabled="isReadOnly" @click="submit" class="save-btn">
-            {{ TEXT.common.actions.save }}
-          </el-button>
-        </div>
-      </el-form>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { ElMessage } from "element-plus";
-import { Plus, Delete } from "@element-plus/icons-vue";
-import {
-  createContractFee,
-  createContractPayment,
-  deleteContractPayment,
-  getContractFee,
-  updateContractFee,
-  updateContractPayment,
-} from "../../api/feeContracts";
-import { fetchSites } from "../../api/sites";
-import { useStudyStore } from "../../store/study";
-import { useAuthStore } from "../../store/auth";
-import StateEmpty from "../../components/StateEmpty.vue";
-import StateError from "../../components/StateError.vue";
-import StateLoading from "../../components/StateLoading.vue";
-import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
-import { TEXT } from "../../locales";
-import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
-import { isSystemAdmin } from "../../utils/roles";
-
-const route = useRoute();
-const router = useRouter();
-const study = useStudyStore();
-const auth = useAuthStore();
-
-const loading = ref(false);
-const saving = ref(false);
-const errorMessage = ref("");
-const sites = ref<any[]>([]);
-const siteActiveMap = computed(() => {
-  const map: Record<string, boolean> = {};
-  sites.value.forEach((site) => {
-    if (site?.id) map[site.id] = !!site.is_active;
-  });
-  return map;
-});
-const formRef = ref();
-const form = reactive({
-  id: "",
-  project_id: "",
-  center_id: "",
-  contract_no: "",
-  signed_date: "",
-  contract_amount: 0,
-  currency: "CNY",
-  remark: "",
-  contract_cases: 0,
-  actual_cases: null as number | null,
-});
-
-const payments = ref<any[]>([]);
-const removedPaymentIds = ref<string[]>([]);
-const paymentErrors = ref<Record<string, string>[]>([]);
-
-const contractId = computed(() => route.params.contractId as string | undefined);
-const isEdit = computed(() => !!contractId.value);
-const projectRole = computed(() => study.currentStudyRole || (study.currentStudy as any)?.role_in_study || "");
-const isAdmin = computed(() => isSystemAdmin(auth.user));
-const canMutate = computed(() => {
-  if (isAdmin.value) return true;
-  const operationKey = isEdit.value ? "fees_contracts:update" : "fees_contracts:create";
-  return isApiPermissionAllowed(study.currentPermissions?.[projectRole.value]?.[operationKey]);
-});
-const isReadOnly = computed(() => !canMutate.value || (isEdit.value && !!form.center_id && siteActiveMap.value[form.center_id] === false));
-
-const attachmentGroups = [
-  {
-    key: "contract",
-    label: TEXT.modules.feeContracts.attachmentContract,
-    description: TEXT.modules.feeContracts.attachmentContractDesc,
-    emptyText: TEXT.modules.feeContracts.attachmentContractEmpty,
-  },
-  {
-    key: "voucher",
-    label: TEXT.modules.feeContracts.attachmentVoucher,
-    description: TEXT.modules.feeContracts.attachmentVoucherDesc,
-    emptyText: TEXT.modules.feeContracts.attachmentVoucherEmpty,
-  },
-  {
-    key: "invoice",
-    label: TEXT.modules.feeContracts.attachmentInvoice,
-    description: TEXT.modules.feeContracts.attachmentInvoiceDesc,
-    emptyText: TEXT.modules.feeContracts.attachmentInvoiceEmpty,
-  },
-];
-
-const rules = {
-  center_id: [{ required: true, message: TEXT.common.messages.required, trigger: "change" }],
-  contract_amount: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
-  contract_cases: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
-};
-
-const loadSites = async () => {
-  const studyId = study.currentStudy?.id;
-  if (!studyId) return;
-  try {
-    const { data } = await fetchSites(studyId, { limit: 500 });
-    sites.value = Array.isArray(data) ? data : data.items || [];
-  } catch {
-    sites.value = [];
-  }
-};
-
-const loadDetail = async () => {
-  if (!contractId.value) return;
-  loading.value = true;
-  errorMessage.value = "";
-  removedPaymentIds.value = [];
-  paymentErrors.value = [];
-  try {
-    const { data } = await getContractFee(contractId.value);
-    const detail = data?.data || {};
-    Object.assign(form, {
-      id: detail.id || contractId.value,
-      project_id: detail.project_id || study.currentStudy?.id || "",
-      center_id: detail.center_id || "",
-      contract_no: detail.contract_no || "",
-      signed_date: detail.signed_date || "",
-      contract_amount: Number(detail.contract_amount || 0) / 10000,
-      currency: detail.currency || "CNY",
-      remark: detail.remark || "",
-      contract_cases: Number(detail.contract_cases || 0),
-      actual_cases: detail.actual_cases ?? null,
-    });
-    payments.value = (detail.payments || []).map((payment: any) => ({
-      id: payment.id,
-      tempId: payment.id,
-      amount: Number(payment.amount || 0),
-      paid_date: payment.paid_date || "",
-      verified_date: payment.verified_date || "",
-      is_paid: !!payment.is_paid,
-      is_verified: !!payment.is_verified,
-      remark: payment.remark || "",
-    }));
-  } catch (e: any) {
-    errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
-  } finally {
-    loading.value = false;
-  }
-};
-
-const addPayment = () => {
-  if (isReadOnly.value) {
-    ElMessage.warning("中心已停用");
-    return;
-  }
-  payments.value.push({
-    tempId: `${Date.now()}-${Math.random()}`,
-    amount: 0,
-    paid_date: "",
-    verified_date: "",
-    is_paid: false,
-    is_verified: false,
-    remark: "",
-  });
-};
-
-const removePayment = (index: number) => {
-  if (isReadOnly.value) {
-    ElMessage.warning("中心已停用");
-    return;
-  }
-  const payment = payments.value[index];
-  if (payment?.id) {
-    removedPaymentIds.value.push(payment.id);
-  }
-  payments.value.splice(index, 1);
-};
-
-const onPaidToggle = (payment: any) => {
-  if (isReadOnly.value) return;
-  if (!payment.is_paid) {
-    payment.paid_date = "";
-    payment.is_verified = false;
-    payment.verified_date = "";
-  }
-};
-
-const onVerifiedToggle = (payment: any) => {
-  if (isReadOnly.value) return;
-  if (payment.is_verified && !payment.is_paid) {
-    payment.is_paid = true;
-  }
-  if (!payment.is_verified) {
-    payment.verified_date = "";
-  }
-};
-
-const validatePayments = () => {
-  const errors: Record<string, string>[] = [];
-  let ok = true;
-  payments.value.forEach((payment, index) => {
-    const entry: Record<string, string> = {};
-    if (payment.amount === null || payment.amount === undefined || Number(payment.amount) < 0) {
-      entry.amount = TEXT.modules.feeContracts.amountInvalid;
-      ok = false;
-    }
-    if (payment.is_paid && !payment.paid_date) {
-      entry.paid_date = TEXT.modules.feeContracts.paidDateRequired;
-      ok = false;
-    }
-    if (payment.is_verified && !payment.verified_date) {
-      entry.verified_date = TEXT.modules.feeContracts.verifiedDateRequired;
-      ok = false;
-    }
-    if (payment.is_verified && !payment.is_paid) {
-      entry.verification = TEXT.modules.feeContracts.verifyRequiresPaid;
-      ok = false;
-    }
-    errors[index] = entry;
-  });
-  paymentErrors.value = errors;
-  return ok;
-};
-
-const submit = async () => {
-  if (!study.currentStudy?.id) return;
-  if (!canMutate.value) {
-    ElMessage.warning("权限不足");
-    return;
-  }
-  if (isReadOnly.value) {
-    ElMessage.warning("中心已停用");
-    return;
-  }
-  if (form.center_id && siteActiveMap.value[form.center_id] === false) {
-    ElMessage.warning("中心已停用");
-    return;
-  }
-  const formOk = await formRef.value?.validate?.().catch(() => false);
-  if (!formOk) return;
-  if (!validatePayments()) {
-    ElMessage.error(TEXT.modules.feeContracts.paymentValidationFailed);
-    return;
-  }
-  saving.value = true;
-  try {
-    const payload = {
-      project_id: study.currentStudy.id,
-      center_id: form.center_id,
-      contract_no: form.contract_no || null,
-      signed_date: form.signed_date || null,
-      contract_amount: Number(form.contract_amount || 0) * 10000,
-      currency: form.currency || "CNY",
-      remark: form.remark || null,
-      contract_cases: Number(form.contract_cases || 0),
-      actual_cases: form.actual_cases === null ? null : Number(form.actual_cases),
-    };
-    const updatePayload = {
-      contract_amount: payload.contract_amount,
-      contract_no: payload.contract_no,
-      signed_date: payload.signed_date,
-      currency: payload.currency,
-      remark: payload.remark,
-      contract_cases: payload.contract_cases,
-      actual_cases: payload.actual_cases,
-    };
-
-    let savedId = contractId.value || form.id;
-    if (isEdit.value && savedId) {
-      await updateContractFee(savedId, updatePayload);
-    } else {
-      const { data } = await createContractFee(payload);
-      savedId = data?.data?.id;
-      form.id = savedId || "";
-    }
-
-    if (savedId) {
-      for (const paymentId of removedPaymentIds.value) {
-        await deleteContractPayment(paymentId);
-      }
-      removedPaymentIds.value = [];
-      for (const payment of payments.value) {
-        const paymentPayload = {
-          amount: Number(payment.amount || 0),
-          paid_date: payment.paid_date || null,
-          verified_date: payment.verified_date || null,
-          is_paid: !!payment.is_paid,
-          is_verified: !!payment.is_verified,
-          remark: payment.remark || null,
-        };
-        if (payment.id) {
-          await updateContractPayment(payment.id, paymentPayload);
-        } else {
-          const { data } = await createContractPayment(savedId, paymentPayload);
-          payment.id = data?.data?.id;
-        }
-      }
-    }
-
-    ElMessage.success(TEXT.common.messages.saveSuccess);
-    if (savedId) {
-      router.push(`/fees/contracts/${savedId}`);
-    } else {
-      goBack();
-    }
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
-  } finally {
-    saving.value = false;
-  }
-};
-
-const goBack = () => router.push("/fees/contracts");
-
-onMounted(async () => {
-  await loadSites();
-  if (isEdit.value) {
-    await loadDetail();
-  } else {
-    form.project_id = study.currentStudy?.id || "";
-  }
-});
-</script>
-
-<style scoped>
-.page {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
-}
-
-.form-card {
-  border-radius: 12px;
-  border: 1px solid var(--ctms-border-color);
-  overflow: hidden;
-}
-
-.section-margin {
-  margin-top: 24px;
-}
-
-.attachment-card :deep(.el-card__body) {
-  padding: 0;
-}
-
-.card-header {
-  padding: 4px 0;
-}
-
-.actions-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--ctms-text-main);
-  border-left: 4px solid var(--el-color-primary);
-  padding-left: 12px;
-}
-
-.full-width {
-  width: 100%;
-}
-
-.section-empty {
-  padding: 28px 0;
-  display: flex;
-  justify-content: center;
-  color: #8a97ab;
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.payment-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.payment-item {
-  border: 1px solid var(--ctms-border-color);
-  border-radius: 8px;
-  padding: 16px;
-  background-color: var(--ctms-bg-color-page);
-  transition: all 0.3s;
-}
-
-.payment-item:hover {
-  border-color: var(--ctms-border-color-hover);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
-}
-
-.payment-item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.payment-seq {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.seq-circle {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: var(--el-color-primary);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.seq-text {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ctms-text-main);
-}
-
-.status-control {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.status-picker {
-  width: 100%;
-}
-
-.payment-error {
-  color: var(--ctms-danger);
-  font-size: 12px;
-  margin-top: 8px;
-}
-
-.mb-0 {
-  margin-bottom: 0 !important;
-}
-
-.footer-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-  padding-bottom: 32px;
-}
-
-.save-btn {
-  padding: 0 32px;
-}
-
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.3s ease;
-}
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateY(-20px);
-}
-
-.compact-empty :deep(.state) {
-  padding: 24px 0 !important;
-  flex-direction: row;
-  gap: 12px;
-}
-.compact-empty :deep(.state-icon) {
-  font-size: 24px !important;
-  margin-bottom: 0 !important;
-}
-.compact-empty :deep(.state-title) {
-  font-size: 14px !important;
-  font-weight: normal !important;
-  margin: 0 !important;
-}
-.compact-empty :deep(.state-desc) {
-  margin: 0 !important;
-  font-size: 14px !important;
-}
-</style>

frontend/src/views/fees/ContractFeeLocale.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { TEXT } from "../../locales";
+
+describe("contract fee attachment labels", () => {
+  it("uses a concise attachment section title", () => {
+    expect(TEXT.modules.feeContracts.attachmentTitle).toBe("附件");
+  });
+
+  it("uses a clear payment sequence column label", () => {
+    expect(TEXT.modules.feeContracts.paymentSeqColumn).toBe("付款期次");
+    expect(TEXT.modules.feeContracts.paymentSeq).toBe("第");
+  });
+});

frontend/src/views/fees/ContractFeePermissions.test.ts

@@ -0,0 +1,25 @@
+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("Contract fee project permissions", () => {
+  it("hides list create/delete controls when the matching backend operation is not allowed", () => {
+    const source = read("./ContractFees.vue");
+
+    expect(source).toContain('v-if="canCreate"');
+    expect(source).toContain('v-if="canDelete"');
+    expect(source).toContain("if (!canCreate.value)");
+    expect(source).toContain("if (!canDelete.value)");
+    expect(source).not.toContain(':disabled="!canCreate"');
+    expect(source).not.toContain(':disabled="!canDelete || isInactiveSite(scope.row.center_id)"');
+  });
+
+  it("hides detail edit controls and blocks direct navigation without update permission", () => {
+    const source = read("./ContractFeeDetail.vue");
+
+    expect(source).toContain('v-if="canWrite"');
+    expect(source).toContain("if (!canWrite.value)");
+  });
+});

frontend/src/views/fees/ContractFees.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = () => readFileSync(resolve(__dirname, "./ContractFees.vue"), "utf8");
+
+describe("ContractFees.vue", () => {
+  it("keeps the contract fee table full-width with evenly distributed columns", () => {
+    const source = readSource();
+
+    expect(source).toContain('style="width: 100%"');
+    expect(source).toContain('table-layout="fixed"');
+    expect(source).toContain('prop="center_name" :label="TEXT.common.fields.site" show-overflow-tooltip');
+    expect(source).toContain(':label="TEXT.modules.feeContracts.contractAmount" align="left"');
+    expect(source).not.toContain(':label="TEXT.modules.feeContracts.contractAmount" align="right"');
+    expect(source).toContain(':label="TEXT.modules.feeContracts.caseProgress" align="center"');
+    expect(source).toContain(':label="TEXT.modules.feeContracts.paidSummary"');
+    expect(source).toContain(':label="TEXT.modules.feeContracts.verifySummary"');
+    expect(source).toContain(':label="TEXT.modules.feeContracts.recentDates"');
+    expect(source).toContain(':label="TEXT.common.labels.actions" align="center"');
+    expect(source).not.toContain('width="170"');
+    expect(source).not.toContain('width="150"');
+    expect(source).not.toContain('width="190"');
+    expect(source).not.toContain('width="110"');
+  });
+
+  it("uses the material drawer pattern for creating and editing contract fees", () => {
+    const source = readSource();
+
+    expect(source).toContain("<ContractFeeEditorDrawer");
+    expect(source).toContain('import ContractFeeEditorDrawer from "./ContractFeeEditorDrawer.vue"');
+    expect(source).toContain('@click="openCreate"');
+    expect(source).toContain('@click.stop="openEdit(scope.row)"');
+    expect(source).not.toContain("useDrawerDirtyGuard");
+    expect(source).not.toContain('router.push("/fees/contracts/new")');
+    expect(source).not.toContain("`/fees/contracts/${contractId.value}`");
+  });
+});

frontend/src/views/fees/ContractFees.vue

@@ -80,7 +80,7 @@
             <el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
           </div>
           <div class="filter-spacer"></div>
-          <el-button type="primary" :disabled="!canCreate" @click="goNew" class="header-action-btn">
+          <el-button v-if="canCreate" type="primary" @click="openCreate" class="header-action-btn">
             <el-icon class="el-icon--left"><Plus /></el-icon>
             {{ TEXT.modules.feeContracts.newTitle }}
           </el-button>
@@ -95,26 +95,26 @@
           class="contract-table"
           table-layout="fixed"
         >
-          <el-table-column prop="center_name" :label="TEXT.common.fields.site" width="170" show-overflow-tooltip>
+          <el-table-column prop="center_name" :label="TEXT.common.fields.site" show-overflow-tooltip>
             <template #default="scope">
               <div class="site-cell">
                 <span class="site-name">{{ scope.row.center_name || TEXT.common.fallback }}</span>
               </div>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.contractAmount" width="150" align="right">
+          <el-table-column :label="TEXT.modules.feeContracts.contractAmount" align="left">
             <template #default="scope">
               <span class="amount-text">{{ formatAmountWan(scope.row.contract_amount) }}</span>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.caseProgress" width="170" align="center">
+          <el-table-column :label="TEXT.modules.feeContracts.caseProgress" align="center">
             <template #default="scope">
                <el-tag effect="plain" type="info">
                 {{ displayCases(scope.row.contract_cases, scope.row.actual_cases) }}
                </el-tag>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.paidSummary" width="190">
+          <el-table-column :label="TEXT.modules.feeContracts.paidSummary">
             <template #default="scope">
               <div class="summary-line">
                 <span>{{ TEXT.modules.feeContracts.paidTotal }}</span>
@@ -127,7 +127,7 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.verifySummary" width="190">
+          <el-table-column :label="TEXT.modules.feeContracts.verifySummary">
             <template #default="scope">
               <div class="summary-line">
                 <span>{{ TEXT.modules.feeContracts.verifiedTotal }}</span>
@@ -140,7 +140,7 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.recentDates" width="170">
+          <el-table-column :label="TEXT.modules.feeContracts.recentDates">
              <template #default="scope">
               <div class="date-line">
                 <span class="date-label">{{ TEXT.modules.feeContracts.lastPaid }}</span>
@@ -152,13 +152,24 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.common.labels.actions" width="110">
+          <el-table-column v-if="canUpdate || canDelete" :label="TEXT.common.labels.actions" align="center">
             <template #default="scope">
               <el-button
+                v-if="canUpdate"
+                link
+                type="primary"
+                size="small"
+                :disabled="isInactiveSite(scope.row.center_id)"
+                @click.stop="openEdit(scope.row)"
+              >
+                {{ TEXT.common.actions.edit }}
+              </el-button>
+              <el-button
+                v-if="canDelete"
                 link
                 type="danger"
                 size="small"
-                :disabled="!canDelete || isInactiveSite(scope.row.center_id)"
+                :disabled="isInactiveSite(scope.row.center_id)"
                 @click.stop="remove(scope.row)"
               >
                 {{ TEXT.common.actions.delete }}
@@ -171,6 +182,14 @@
         </el-table>
       </section>
     </div>
+
+    <ContractFeeEditorDrawer
+      v-model="drawerVisible"
+      :contract-id="editingId || undefined"
+      :sites="sites"
+      :initial-center-id="study.currentSite?.id || ''"
+      @saved="handleEditorSaved"
+    />
   </div>
 </template>
 
@@ -187,18 +206,22 @@ import { displayDate } from "../../utils/display";
 import StateLoading from "../../components/StateLoading.vue";
 import StateError from "../../components/StateError.vue";
 import KpiCard from "../../components/KpiCard.vue";
+import ContractFeeEditorDrawer from "./ContractFeeEditorDrawer.vue";
 import { TEXT } from "../../locales";
 
 const router = useRouter();
 const study = useStudyStore();
 const { can } = usePermission();
 const canCreate = computed(() => can("fees.contract.create"));
+const canUpdate = computed(() => can("fees.contract.update"));
 const canDelete = computed(() => can("fees.contract.delete"));
 
 const loading = ref(false);
 const errorMessage = ref("");
 const contracts = ref<any[]>([]);
 const sites = ref<any[]>([]);
+const drawerVisible = ref(false);
+const editingId = ref("");
 const siteActiveMap = computed(() => {
   const map: Record<string, boolean> = {};
   sites.value.forEach((site) => {
@@ -269,12 +292,12 @@ const loadSites = async () => {
 };
 
 const load = async () => {
-  const projectId = study.currentStudy?.id;
-  if (!projectId) return;
+  const studyId = study.currentStudy?.id;
+  if (!studyId) return;
   loading.value = true;
   errorMessage.value = "";
   try {
-    const { data } = await listContractFees({ projectId });
+    const { data } = await listContractFees({ study_id: studyId });
     contracts.value = data?.data || [];
   } catch (e: any) {
     errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
@@ -288,7 +311,29 @@ const resetFilters = () => {
   filters.q = "";
 };
 
-const goNew = () => router.push("/fees/contracts/new");
+const openCreate = () => {
+  if (!canCreate.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
+  editingId.value = "";
+  drawerVisible.value = true;
+};
+
+const openEdit = async (row: any) => {
+  if (!row?.id) return;
+  if (!canUpdate.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
+  if (isInactiveSite(row?.center_id)) {
+    ElMessage.warning("中心已停用");
+    return;
+  }
+  editingId.value = row.id;
+  drawerVisible.value = true;
+};
+
 const goDetail = (id: string) => router.push(`/fees/contracts/${id}`);
 const onRowClick = (row: any) => {
   if (!row?.id) return;
@@ -296,7 +341,11 @@ const onRowClick = (row: any) => {
 };
 
 const remove = async (row: any) => {
-  if (!row?.id || !canDelete.value) return;
+  if (!row?.id) return;
+  if (!canDelete.value) {
+    ElMessage.warning("权限不足");
+    return;
+  }
   if (isInactiveSite(row?.center_id)) {
     ElMessage.warning("中心已停用");
     return;
@@ -312,6 +361,10 @@ const remove = async (row: any) => {
   }
 };
 
+const handleEditorSaved = async () => {
+  await load();
+};
+
 const displayCases = (contractCases: any, actualCases: any) => {
   const contractValue = Number(contractCases ?? 0);
   const actualValue = Number(actualCases ?? 0);
@@ -340,6 +393,17 @@ watch(() => study.currentSite, (newSite: any) => {
   filters.centerId = newSite?.id || "";
 });
 
+watch(
+  () => study.currentStudy?.id,
+  async () => {
+    filters.centerId = study.currentSite?.id || "";
+    filters.q = "";
+    drawerVisible.value = false;
+    await loadSites();
+    await load();
+  }
+);
+
 onMounted(async () => {
   await loadSites();
   load();
@@ -457,6 +521,7 @@ onMounted(async () => {
   font-weight: 500;
   letter-spacing: 0.02em;
 }
+
 </style>
 
 <style>