启动与授权-初步优化

frontend/src/components/attachments/AttachmentList.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card>
     <div class="header">
-      <span>{{ TEXT.common.labels.attachments }}</span>
+      <span>{{ headerTitle }}</span>
       <AttachmentUploader
         :study-id="studyId"
         :entity-type="entityType"
@@ -27,7 +27,7 @@
       <el-table-column :label="TEXT.common.labels.actions" width="220">
         <template #default="scope">
           <el-button link type="primary" size="small" @click="preview(scope.row)">
-            {{ TEXT.common.actions.view }}
+            {{ 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
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { fetchAttachments, deleteAttachment } from "../../api/attachments";
 import AttachmentUploader from "./AttachmentUploader.vue";
@@ -74,6 +74,7 @@ const props = defineProps<{
   studyId: string;
   entityType: string;
   entityId: string;
+  title?: string;
 }>();
 
 const attachments = ref<any[]>([]);
@@ -83,9 +84,12 @@ 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 headerTitle = computed(() => props.title || TEXT.common.labels.attachments);
 
 const load = async () => {
   if (!props.studyId || !props.entityId) return;
@@ -122,25 +126,72 @@ const uploaderLabel = (row: any) => {
   return displayUser(row.uploaded_by_id || row.uploaded_by, { members: memberMap });
 };
 
-const download = (row: any) => {
+const getDownloadUrl = (row: any) => {
   const token = localStorage.getItem("ctms_token");
-  const url = token ? `/api/v1/attachments/${row.id}/download?token=${token}` : `/api/v1/attachments/${row.id}/download`;
-  window.open(url, "_blank");
+  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 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 getFileName = (row: any) => (row?.filename || "").toLowerCase();
+const getMimeType = (row: any) => (row?.mime_type || row?.content_type || "").toLowerCase();
+
 const detectPreviewType = (row: any) => {
-  const mime = (row?.mime_type || row?.content_type || "").toLowerCase();
+  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 token = localStorage.getItem("ctms_token");
-  previewUrl.value = row?.url || (token ? `/api/v1/attachments/${row.id}/download?token=${token}` : `/api/v1/attachments/${row.id}/download`);
+  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;
   }
@@ -172,6 +223,13 @@ onMounted(async () => {
   await Promise.all([loadMembers()]);
   load();
 });
+
+watch(previewVisible, (visible) => {
+  if (!visible && previewObjectUrl.value) {
+    URL.revokeObjectURL(previewObjectUrl.value);
+    previewObjectUrl.value = "";
+  }
+});
 </script>
 
 <style scoped>