实现企微原生材料预览（07-27-yang-jun-reimbursement-readiness）

client/src/pages/MobileReimbursementDetailPage.tsx

@@ -7,6 +7,7 @@ import {
   archiveInvoice,
   bindInvoice,
   fetchBindableInvoices,
+  fetchInvoiceSignedUrl,
   fetchInvoicePoolList,
   unbindInvoice,
   uploadInvoice,
@@ -19,6 +20,7 @@ import {
   deleteReimbursement,
   deleteReimbursementItem,
   downloadReimbursementAttachment,
+  fetchReimbursementAttachmentPreviewUrl,
   fetchReimbursementDetail,
   MAX_REIMBURSEMENT_ATTACHMENT_FILES,
   precheckReimbursement,
@@ -65,6 +67,8 @@ import { TEST_IDS } from "../lib/testIds";
 import { withUploadTimeout } from "../lib/uploadTimeout";
 import { useInvoiceOcrTracker } from "../hooks/useInvoiceOcrTracker";
 import { cn } from "../lib/utils";
+import { isWecomWebView } from "../lib/runtimeContext";
+import { openFileInBrowser, previewFileInWecom } from "../lib/wecomFilePreview";
 
 type ItemFormState = {
   mode: "create" | "edit";
@@ -678,10 +682,37 @@ export function MobileReimbursementDetailPage() {
 
   const { requestDownloadReason, downloadReasonDialog } = useAttachmentDownloadReasonDialog();
 
+  const openInvoiceMutation = useMutation({
+    mutationFn: async (invoiceId: string) => {
+      const result = await fetchInvoiceSignedUrl(invoiceId);
+      const openedInWecom = await previewFileInWecom({
+        url: result.signedUrl,
+        name: result.originalName,
+        size: result.fileSize,
+      });
+      if (!openedInWecom) {
+        openFileInBrowser(result.signedUrl);
+      }
+    },
+    onError: (error) => {
+      toast.error(resolveErrorMessage(error));
+    },
+  });
+
   const openAttachmentMutation = useMutation({
-    mutationFn: ({ attachmentId, reason }: { attachmentId: string; reason?: string }) =>
-      downloadReimbursementAttachment(reimbursementId, attachmentId, reason),
+    mutationFn: async ({ attachment, reason }: {
+      attachment: { id: string; originalName: string; fileSize: number } & AttachmentGovernanceFields;
+      reason?: string;
+    }) => {
+      if (isWecomWebView()) {
+        const result = await fetchReimbursementAttachmentPreviewUrl(reimbursementId, attachment.id, reason);
+        await previewFileInWecom({ url: result.signedUrl, name: result.originalName, size: result.fileSize });
+        return null;
+      }
+      return downloadReimbursementAttachment(reimbursementId, attachment.id, reason);
+    },
     onSuccess: (result) => {
+      if (!result) return;
       const url = URL.createObjectURL(result.blob);
       window.open(url, "_blank", "noopener,noreferrer");
       window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
@@ -691,12 +722,12 @@ export function MobileReimbursementDetailPage() {
     },
   });
 
-  async function handleOpenAttachment(attachment: { id: string; originalName?: string } & AttachmentGovernanceFields) {
+  async function handleOpenAttachment(attachment: { id: string; originalName: string; fileSize: number } & AttachmentGovernanceFields) {
     const reason = await requestDownloadReason(attachment);
     if (reason === null) {
       return;
     }
-    openAttachmentMutation.mutate({ attachmentId: attachment.id, reason });
+    openAttachmentMutation.mutate({ attachment, reason });
   }
 
   const handleSubmit = async () => {
@@ -1028,6 +1059,16 @@ export function MobileReimbursementDetailPage() {
                       移除
                     </Button>
                   ) : null}
+                  <Button
+                    className="mt-3 w-full"
+                    size="sm"
+                    variant="secondary"
+                    type="button"
+                    disabled={openInvoiceMutation.isPending}
+                    onClick={() => openInvoiceMutation.mutate(invoice.id)}
+                  >
+                    查看原件
+                  </Button>
                 </article>
               );
             })}
@@ -1117,7 +1158,7 @@ export function MobileReimbursementDetailPage() {
                     disabled={openAttachmentMutation.isPending}
                     onClick={() => void handleOpenAttachment(attachment)}
                   >
-                    查看
+                    查看原件
                   </Button>
                   {canManageAttachments ? (
                     <Button