feat(desktop): implement phase 2 native capabilities

frontend/src/components/attachments/AttachmentList.vue

@@ -5,6 +5,7 @@
         <span>{{ headerTitle }}</span>
         <div v-if="canShowUploader && tableUploadGroup" class="immediate-upload">
           <el-upload
+            v-if="!nativeFiles"
             :http-request="uploadImmediate"
             :show-file-list="false"
             :limit="1"
@@ -13,6 +14,9 @@
           >
             <el-button type="primary" :loading="isImmediateUploading">{{ TEXT.common.actions.upload }}</el-button>
           </el-upload>
+          <el-button v-else type="primary" :loading="isImmediateUploading" @click="pickImmediateNative">
+            {{ TEXT.common.actions.upload }}
+          </el-button>
           <el-progress v-if="tableProgress > 0 && tableProgress < 100" :percentage="tableProgress" :stroke-width="6" />
         </div>
       </div>
@@ -41,6 +45,7 @@
                 {{ 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 link type="primary" size="small" @click="openExternally(scope.row)">打开</el-button>
               <el-button
                 v-if="canDelete(scope.row)"
                 link
@@ -58,6 +63,7 @@
     <div v-else class="upload-grid" :class="{ 'upload-grid--three': uploadCardColumns === 3 }">
       <div v-for="group in uploadGroups" :key="group.key" class="attachment-upload-item">
         <el-upload
+          v-if="!nativeFiles"
           class="attachment-card-upload"
           :show-file-list="false"
           multiple
@@ -79,6 +85,21 @@
             </div>
           </div>
         </el-upload>
+        <div
+          v-else
+          class="attachment-upload-card"
+          :class="{
+            'is-disabled': !canUploadGroup(group),
+            'attachment-upload-card--centered': centerUploadCardContent,
+          }"
+          @click="pickPendingNative(group)"
+        >
+          <div v-if="showUploadCardLabels" class="upload-card-label">{{ group.label }}</div>
+          <div class="upload-trigger">
+            <el-icon class="upload-icon"><UploadFilled /></el-icon>
+            <span class="upload-text">{{ group.uploadText || "点击上传文件" }}</span>
+          </div>
+        </div>
         <div v-if="pendingMap[group.key]?.length" class="pending-list">
           <div
             v-for="item in pendingMap[group.key]"
@@ -122,7 +143,7 @@
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { UploadFilled } from "@element-plus/icons-vue";
-import { fetchAttachments, deleteAttachment, uploadAttachment } from "../../api/attachments";
+import { fetchAttachments, deleteAttachment, downloadAttachment, uploadAttachment } from "../../api/attachments";
 import { formatFileSize } from "./attachmentUtils";
 import { useAuthStore } from "../../store/auth";
 import { useStudyStore } from "../../store/study";
@@ -131,6 +152,7 @@ import { displayDateTime, getUserDisplayName } from "../../utils/display";
 import { getAttachmentPermissionKey } from "../../utils/attachmentPermissions";
 import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
 import { TEXT } from "../../locales";
+import { clientRuntime, openFile, pickFiles, saveFile } from "../../runtime";
 
 type AttachmentEntityGroup = {
   entityType: string;
@@ -182,6 +204,7 @@ const previewType = ref<"image" | "pdf" | "other">("other");
 const previewTitle = ref(TEXT.common.labels.preview);
 const previewError = ref("");
 const previewLoading = ref(false);
+const nativeFiles = clientRuntime.capabilities().nativeFiles;
 const headerTitle = computed(() => props.title || TEXT.common.labels.attachments);
 const displayMode = computed(() => props.mode || "table");
 const maxSize = computed(() => props.maxSizeMb ?? 50);
@@ -240,10 +263,9 @@ const validateFile = (file: File) => {
 
 const pendingFileKey = (file: File) => `${file.name}-${file.size}-${file.lastModified}`;
 
-const queuePendingUpload = (fileType: string, uploadFile: any) => {
+const queuePendingFile = (fileType: string, file: File) => {
   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))) {
@@ -251,6 +273,17 @@ const queuePendingUpload = (fileType: string, uploadFile: any) => {
   }
 };
 
+const queuePendingUpload = (fileType: string, uploadFile: any) => {
+  const file = uploadFile?.raw as File | undefined;
+  if (file) queuePendingFile(fileType, file);
+};
+
+const pickPendingNative = async (group: UploadGroup) => {
+  if (!canUploadGroup(group)) return;
+  const selected = await pickFiles({ multiple: true, title: group.label });
+  selected.forEach((file) => queuePendingFile(group.key, file));
+};
+
 const removePendingUpload = (fileType: string, item: PendingUploadItem) => {
   pendingMap[fileType] = (pendingMap[fileType] || []).filter((current) => pendingFileKey(current.file) !== pendingFileKey(item.file));
 };
@@ -317,6 +350,11 @@ const uploadImmediate = async (options: any) => {
   }
 };
 
+const pickImmediateNative = async () => {
+  const [file] = await pickFiles({ multiple: false, title: headerTitle.value });
+  if (file) await uploadImmediate({ file });
+};
+
 const load = async () => {
   if (!props.studyId || !props.entityId) return;
   loading.value = true;
@@ -352,25 +390,35 @@ const uploaderLabel = (row: any) => {
   return row.uploaded_by_id || row.uploaded_by || TEXT.common.fallback;
 };
 
-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 fetchAttachmentBlob = async (row: any): Promise<Blob> => {
+  const response = await downloadAttachment(row.id);
+  return new Blob([response.data], {
+    type: response.headers?.["content-type"] || row?.content_type || "application/octet-stream",
+  });
 };
 
-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 = async (row: any) => {
+  try {
+    await saveFile({
+      suggestedName: row?.filename || "download",
+      mimeType: row?.content_type,
+      data: await fetchAttachmentBlob(row),
+    });
+  } catch {
+    ElMessage.error(TEXT.common.messages.downloadFailed);
+  }
 };
 
-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 openExternally = async (row: any) => {
+  try {
+    await openFile({
+      suggestedName: row?.filename || "attachment",
+      mimeType: row?.content_type,
+      data: await fetchAttachmentBlob(row),
+    });
+  } catch {
+    ElMessage.error(TEXT.common.messages.previewNotSupported);
+  }
 };
 
 const getFileName = (row: any) => (row?.filename || "").toLowerCase();
@@ -386,37 +434,29 @@ const detectPreviewType = (row: any) => {
   return "other";
 };
 
-const previewImage = async (downloadUrl: string) => {
+const previewImage = async (row: any) => {
   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();
+    const blob = await fetchAttachmentBlob(row);
     if (previewObjectUrl.value) URL.revokeObjectURL(previewObjectUrl.value);
     previewObjectUrl.value = URL.createObjectURL(blob);
     previewUrl.value = previewObjectUrl.value;
   } catch {
-    previewUrl.value = downloadUrl;
+    previewError.value = TEXT.common.messages.previewNotSupported;
   } finally {
     previewLoading.value = false;
   }
 };
 
-const preview = (row: any) => {
+const preview = async (row: any) => {
   previewError.value = "";
   previewType.value = detectPreviewType(row);
   previewTitle.value = row?.filename || TEXT.common.labels.preview;
-  const downloadUrl = getDownloadUrl(row);
-  if (previewType.value === "image") {
+  if (previewType.value === "image" || previewType.value === "pdf") {
     previewUrl.value = "";
-    previewImage(downloadUrl);
-  } else if (previewType.value === "pdf") {
-    previewUrl.value = getPreviewUrl(row);
+    await previewImage(row);
   } else {
-    previewUrl.value = downloadUrl;
+    previewUrl.value = "";
   }
   if (previewType.value === "other") {
     previewError.value = TEXT.common.messages.previewNotSupported;