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

client/src/api/auth.ts

@@ -99,6 +99,20 @@ export async function fetchWecomConfig() {
   return apiRequestData<WecomEntryConfig>("/api/auth/wecom/config", { auth: false });
 }
 
+export type WecomJsSdkSignature = {
+  corpId: string;
+  timestamp: number;
+  nonceStr: string;
+  signature: string;
+};
+
+export async function fetchWecomJsSdkSignature(url: string) {
+  return apiRequestData<WecomJsSdkSignature>("/api/auth/wecom/js-sdk-signature", {
+    method: "POST",
+    body: JSON.stringify({ url }),
+  });
+}
+
 export async function startWecomBind(returnTo = "/settings/profile") {
   return apiRequestData<{ loginUrl: string }>("/api/auth/wecom/bind", {
     method: "POST",

client/src/api/invoicePool.ts

@@ -254,7 +254,13 @@ export async function bindInvoice(
 }
 
 export async function fetchInvoiceSignedUrl(invoiceId: string) {
-  return apiRequestData<{ signedUrl: string; expiresAt: string }>(
+  return apiRequestData<{
+    signedUrl: string;
+    expiresAt: string;
+    originalName: string | null;
+    mimeType: string | null;
+    fileSize: number | null;
+  }>(
     `/api/invoice-pool/${invoiceId}/signed-url`,
     {
       method: "POST",

client/src/api/reimbursements.ts

@@ -175,6 +175,8 @@ export type ReimbursementDetail = {
     sellerName: string | null;
     totalAmount: string | null;
     originalName: string | null;
+    mimeType: string | null;
+    fileSize: number | null;
     linkedItemId: string | null;
   }>;
   attachments: Array<{
@@ -525,6 +527,23 @@ export async function downloadReimbursementAttachment(reimbursementId: string, a
   return apiRequestBlob(buildAttachmentFileUrl(reimbursementAttachmentFileUrl(reimbursementId, attachmentId), reason));
 }
 
+export async function fetchReimbursementAttachmentPreviewUrl(
+  reimbursementId: string,
+  attachmentId: string,
+  reason?: string,
+) {
+  return apiRequestData<{
+    signedUrl: string;
+    expiresAt: string;
+    originalName: string;
+    mimeType: string;
+    fileSize: number;
+  }>(`/api/reimbursements/${reimbursementId}/attachments/${attachmentId}/preview-url`, {
+    method: "POST",
+    body: JSON.stringify(reason ? { reason } : {}),
+  });
+}
+
 
 export async function linkReimbursementProject(reimbursementId: string, projectId: string | null) {
   return apiRequestData<{ projectId: string | null; project: { id: string; projectNo: string; name: string } | null }>(`/api/reimbursements/${reimbursementId}/link-project`, {

client/src/lib/wecomFilePreview.ts

@@ -0,0 +1,63 @@
+import { fetchWecomConfig, fetchWecomJsSdkSignature } from "../api/auth";
+import { isWecomWebView } from "./runtimeContext";
+
+export type NativePreviewFile = {
+  url: string;
+  name: string | null | undefined;
+  size: number | null | undefined;
+};
+
+let configuredSdkPromise: Promise<typeof import("@wecom/jssdk")> | null = null;
+
+function currentPageUrl() {
+  const url = new URL(window.location.href);
+  url.hash = "";
+  return url.href;
+}
+
+async function configuredWecomSdk() {
+  if (!configuredSdkPromise) {
+    configuredSdkPromise = Promise.all([import("@wecom/jssdk"), fetchWecomConfig()])
+      .then(([ww, config]) => {
+        if (!config.corpId) {
+          throw new Error("企业微信文件预览未配置");
+        }
+        ww.register({
+          corpId: config.corpId,
+          jsApiList: ["previewFile"],
+          async getConfigSignature(url) {
+            const signed = await fetchWecomJsSdkSignature(url || currentPageUrl());
+            return {
+              timestamp: signed.timestamp,
+              nonceStr: signed.nonceStr,
+              signature: signed.signature,
+            };
+          },
+        });
+        return ww;
+      })
+      .catch((error) => {
+        configuredSdkPromise = null;
+        throw error;
+      });
+  }
+  return configuredSdkPromise;
+}
+
+export async function previewFileInWecom(file: NativePreviewFile) {
+  if (!isWecomWebView()) {
+    return false;
+  }
+  const name = file.name?.trim();
+  const size = Number(file.size);
+  if (!name || !/\.[a-z0-9]{1,10}$/i.test(name) || !Number.isSafeInteger(size) || size <= 0) {
+    throw new Error("文件信息不完整，暂时无法预览");
+  }
+  const ww = await configuredWecomSdk();
+  await ww.previewFile({ url: file.url, name, size });
+  return true;
+}
+
+export function openFileInBrowser(url: string) {
+  window.open(url, "_blank", "noopener,noreferrer");
+}

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

client/src/pages/ReimbursementDetailPage.tsx

@@ -12,6 +12,7 @@ import {
   deleteReimbursement,
   deleteReimbursementItem,
   downloadReimbursementAttachment,
+  fetchReimbursementAttachmentPreviewUrl,
   fetchReimbursementDetail,
   MAX_REIMBURSEMENT_ATTACHMENT_FILES,
   precheckReimbursement,
@@ -26,10 +27,13 @@ import { remindWorkflowTask } from "../api/workflow";
 import {
   bindInvoice,
   fetchBindableInvoices,
+  fetchInvoiceSignedUrl,
   unbindInvoice,
   uploadInvoice,
 } from "../api/invoicePool";
 import { toast } from "sonner";
+import { isWecomWebView } from "../lib/runtimeContext";
+import { openFileInBrowser, previewFileInWecom } from "../lib/wecomFilePreview";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { CardSkeleton } from "../components/common/CardSkeleton";
@@ -674,10 +678,37 @@ export function ReimbursementDetailPage() {
 
   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(buildActionErrorMessage(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);
@@ -687,12 +718,12 @@ export function ReimbursementDetailPage() {
     },
   });
 
-  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 });
   }
 
   if (!reimbursementId) {
@@ -1423,6 +1454,15 @@ export function ReimbursementDetailPage() {
                                 <span className="badge-neutral">
                                   {resolveInvoiceStatusLabel(item.status)}
                                 </span>
+                                <Button
+                                  type="button"
+                                  variant="secondary"
+                                  size="sm"
+                                  disabled={openInvoiceMutation.isPending}
+                                  onClick={() => openInvoiceMutation.mutate(item.id)}
+                                >
+                                  查看原件
+                                </Button>
                                 {canUnbindInvoices ? (
                                   <Button
                                     type="button"
@@ -1515,7 +1555,7 @@ export function ReimbursementDetailPage() {
                             disabled={openAttachmentMutation.isPending}
                             onClick={() => void handleOpenAttachment(attachment)}
                           >
-                            查看
+                            查看原件
                           </Button>
                           {canEditItems ? (
                             <Button