实现报销材料连续预览（07-27-yang-jun-reimbursement-readiness）

client/src/pages/ReimbursementDetailPage.tsx

@@ -15,6 +15,7 @@ import {
   downloadReimbursementAttachment,
   fetchReimbursementAttachmentPreviewUrl,
   fetchReimbursementDetail,
+  fetchReimbursementMaterialPreviewBundle,
   MAX_REIMBURSEMENT_ATTACHMENT_FILES,
   precheckReimbursement,
   submitReimbursement,
@@ -34,7 +35,7 @@ import {
 } from "../api/invoicePool";
 import { toast } from "sonner";
 import { isWecomWebView } from "../lib/runtimeContext";
-import { openFileInBrowser, previewFileInWecom } from "../lib/wecomFilePreview";
+import { openFileInBrowser, previewFileInWecom, previewImagesInWecom } from "../lib/wecomFilePreview";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { CardSkeleton } from "../components/common/CardSkeleton";
@@ -61,13 +62,14 @@ import { PageScaffold } from "../components/patterns/PageScaffold";
 import { SectionPanel } from "../components/patterns/SectionPanel";
 import {
   formatInvoiceDisplayTitle,
+  resolveInvoicePartyText,
   resolveInvoiceNextStepText,
   resolveInvoiceStatusLabel,
   resolveInvoiceUserMessage,
 } from "../lib/invoiceStatus";
 import { useInvoiceOcrTracker } from "../hooks/useInvoiceOcrTracker";
 import { resolveReimbursementDisplayCode } from "../lib/reimbursementDisplay";
-import type { AttachmentGovernanceFields } from "../lib/attachmentGovernance";
+import { attachmentRequiresDownloadReason, type AttachmentGovernanceFields } from "../lib/attachmentGovernance";
 import { formatDisplayDate, formatDisplayDateTime } from "../lib/displayFormat";
 import { TEST_IDS } from "../lib/testIds";
 import { PDF_FILE_ACCEPT, rejectedPdfMessage, splitPdfFiles } from "../lib/pdfFiles";
@@ -152,6 +154,7 @@ export function ReimbursementDetailPage() {
   const [selectedAttachmentFiles, setSelectedAttachmentFiles] = useState<File[]>([]);
   const [deleteAttachmentTarget, setDeleteAttachmentTarget] = useState<{ id: string; originalName: string } | null>(null);
   const [invoiceActionError, setInvoiceActionError] = useState("");
+  const [materialPreviewError, setMaterialPreviewError] = useState("");
   const [pendingOcrInvoiceIds, setPendingOcrInvoiceIds] = useState<string[]>([]);
   const [invoiceUploadProgress, setInvoiceUploadProgress] = useState({ completed: 0, total: 0 });
   const [editorInitialValues, setEditorInitialValues] = useState<ItemEditorInitialValues>({
@@ -727,6 +730,36 @@ export function ReimbursementDetailPage() {
     openAttachmentMutation.mutate({ attachment, reason });
   }
 
+  const materialPreviewMutation = useMutation({
+    mutationFn: (reason?: string) => fetchReimbursementMaterialPreviewBundle(reimbursementId, reason),
+    onSuccess: async (bundle) => {
+      setMaterialPreviewError("");
+      if (isWecomWebView()) {
+        try {
+          await previewImagesInWecom(bundle.pages.map((page) => page.url));
+          return;
+        } catch {
+          toast.error("企业微信滑动预览未打开，已切换到页面预览");
+        }
+      }
+      navigate(`/reimbursements/${reimbursementId}/materials`, {
+        state: { bundle, from: `/reimbursements/${reimbursementId}` },
+      });
+    },
+    onError: (error) => {
+      const message = buildActionErrorMessage(error, "连续预览生成失败，可逐份打开原件");
+      setMaterialPreviewError(message);
+      toast.error("连续预览生成失败，可逐份打开原件");
+    },
+  });
+
+  async function handleOpenAllMaterials() {
+    const governedAttachment = (detailQuery.data?.attachments ?? []).find(attachmentRequiresDownloadReason);
+    const reason = governedAttachment ? await requestDownloadReason(governedAttachment) : undefined;
+    if (reason === null) return;
+    materialPreviewMutation.mutate(reason);
+  }
+
   if (!reimbursementId) {
     return (
       <div className="card-std p-5">
@@ -1339,28 +1372,6 @@ export function ReimbursementDetailPage() {
                             {check.standardName}：当前金额超出费用标准。
                           </div>
                         ))}
-                      {detail.invoices
-                        .filter((invoice) => invoice.linkedItemId === item.id)
-                        .map((invoice) => (
-                          <button
-                            key={invoice.id}
-                            type="button"
-                            className="mt-2 flex min-h-11 w-full items-center gap-2 rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2 text-left transition-colors hover:bg-zinc-100 active:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60"
-                            disabled={openInvoiceMutation.isPending}
-                            aria-label={`查看关联发票：${formatInvoiceDisplayTitle(invoice)}`}
-                            onClick={() => openInvoiceMutation.mutate(invoice.id)}
-                          >
-                            <span className="min-w-0 flex-1">
-                              <span className="block truncate text-xs font-semibold text-zinc-800">
-                                发票 · {formatInvoiceDisplayTitle(invoice)}
-                              </span>
-                              <span className="mt-0.5 block truncate text-xs text-zinc-500">
-                                {invoice.sellerName || "未识别销售方"} · ¥{invoice.totalAmount ?? "-"}
-                              </span>
-                            </span>
-                            <ChevronRight aria-hidden="true" className="size-4 shrink-0 text-zinc-400" />
-                          </button>
-                        ))}
                     </TableCell>
                     <TableCell>
                       {canEditItems ? (
@@ -1426,18 +1437,36 @@ export function ReimbursementDetailPage() {
                   <p className="text-sm text-zinc-600">
                     发票 {detail.invoices.length} · 补充附件 {(detail.attachments ?? []).length}
                   </p>
-                  {canOpenInvoiceBindDialog ? (
-                    <Button
-                      data-testid={TEST_IDS.reimbursement.invoiceAdd}
-                      type="button"
-                      variant="secondary"
-                      onClick={() => handleInvoiceDialogOpenChange(true)}
-                    >
-                      添加发票
-                    </Button>
-                  ) : null}
+                  <div className="flex flex-wrap gap-2">
+                    {detail.invoices.length || (detail.attachments ?? []).length ? (
+                      <Button
+                        data-testid="reimbursement-materials-open-all"
+                        type="button"
+                        disabled={materialPreviewMutation.isPending}
+                        onClick={() => void handleOpenAllMaterials()}
+                      >
+                        {materialPreviewMutation.isPending ? "生成预览中..." : "查看全部材料"}
+                      </Button>
+                    ) : null}
+                    {canOpenInvoiceBindDialog ? (
+                      <Button
+                        data-testid={TEST_IDS.reimbursement.invoiceAdd}
+                        type="button"
+                        variant="secondary"
+                        onClick={() => handleInvoiceDialogOpenChange(true)}
+                      >
+                        添加发票
+                      </Button>
+                    ) : null}
+                  </div>
                 </div>
 
+                {materialPreviewError ? (
+                  <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
+                    {materialPreviewError}，可在下方逐份打开原件。
+                  </p>
+                ) : null}
+
                 {invoiceActionError ? (
                   <p
                     className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
@@ -1447,6 +1476,7 @@ export function ReimbursementDetailPage() {
                   </p>
                 ) : null}
 
+                {canOpenInvoiceBindDialog || materialPreviewError ? (
                 <div className="space-y-2" data-testid={TEST_IDS.reimbursement.invoices}>
                   {detail.invoices.map((invoice) => {
                     const invoiceHint = resolveInvoiceNextStepText(invoice);
@@ -1463,7 +1493,7 @@ export function ReimbursementDetailPage() {
                           <span className="min-w-0 flex-1">
                             <span className="block truncate font-medium text-zinc-900">{formatInvoiceDisplayTitle(invoice)}</span>
                             <span className="mt-1 block text-xs text-zinc-500">
-                              {invoice.sellerName || "未识别销售方"} · {invoice.invoiceDate ? formatDisplayDate(invoice.invoiceDate) : "未识别日期"} · ¥{invoice.totalAmount ?? "-"}
+                              {[resolveInvoicePartyText(invoice), invoice.invoiceDate ? formatDisplayDate(invoice.invoiceDate) : "", `¥${invoice.totalAmount ?? "-"}`].filter(Boolean).join(" · ")}
                             </span>
                             <span className="mt-1 block text-xs text-zinc-500">明细：{resolveLinkedItemLabel(invoice.linkedItemId)}</span>
                             {invoiceHint ? <span className="mt-1 block text-xs text-zinc-500">{invoiceHint}</span> : null}
@@ -1486,6 +1516,7 @@ export function ReimbursementDetailPage() {
                     );
                   })}
                 </div>
+                ) : null}
 
                 <div className="space-y-4" data-testid="reimbursement-attachments">
                 {canEditItems ? (
@@ -1531,7 +1562,7 @@ export function ReimbursementDetailPage() {
                   </div>
                 ) : null}
 
-                {(detail.attachments ?? []).length ? (
+                {(detail.attachments ?? []).length && (canEditItems || Boolean(materialPreviewError)) ? (
                   <div className="space-y-2">
                     {(detail.attachments ?? []).map((attachment) => (
                       <div key={attachment.id} className="detail-evidence-card flex flex-col gap-3 md:flex-row md:items-center">
@@ -1820,7 +1851,7 @@ export function ReimbursementDetailPage() {
                           <div className="space-y-1">
                             <div className="font-medium text-zinc-900">{formatInvoiceDisplayTitle(item)}</div>
                             <div className="text-zinc-600">
-                              {item.sellerName || "未识别销售方"} · {item.invoiceDate ? formatDisplayDate(item.invoiceDate) : "未识别日期"} · 金额 ¥{item.totalAmount ?? "-"}
+                              {[resolveInvoicePartyText(item), item.invoiceDate ? formatDisplayDate(item.invoiceDate) : "", `金额 ¥${item.totalAmount ?? "-"}`].filter(Boolean).join(" · ")}
                             </div>
                             <div className="text-xs text-zinc-500">
                               原始文件：{item.originalName || "未记录原始文件"} · 上传时间 {formatDisplayDateTime(item.createdAt)}