OAFRONT6 压缩长编号展示并修正视觉探针

client/src/pages/PurchaseRequestsPage.tsx

@@ -49,7 +49,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
 import { Textarea } from "../components/ui/textarea";
 import { FilterBar, ListWorkspace, PrimaryTable, WorkspaceHeader } from "../components/patterns/ListWorkspace";
 import { SectionPanel } from "../components/patterns/SectionPanel";
-import { formatDisplayDateTime } from "../lib/displayFormat";
+import { formatCompactIdentifier, formatDisplayDateTime, formatTextWithCompactLongNumbers, isCompactedIdentifier } from "../lib/displayFormat";
 import { buildPrecheckDialogMessage } from "../lib/precheck";
 import {
   formatApprovalHistoryTime,
@@ -112,6 +112,41 @@ function statusOptions(): Array<{ value: PurchaseRequestStatus | ""; label: stri
   ];
 }
 
+function CompactBusinessCode({ value, copyable = true }: { value: string; copyable?: boolean }) {
+  const displayValue = formatCompactIdentifier(value, { head: 12, tail: 4, minLength: 18 });
+  const compacted = isCompactedIdentifier(value, displayValue);
+
+  async function copyBusinessCode() {
+    if (!compacted) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success("已复制完整单据编号");
+    } catch {
+      toast.error("复制失败，可在详情页查看完整编号");
+    }
+  }
+
+  return (
+    <span className="inline-flex min-w-0 max-w-full items-center gap-1.5">
+      <span className="truncate" title={compacted ? value : undefined}>
+        {displayValue}
+      </span>
+      {compacted && copyable ? (
+        <button
+          className="shrink-0 rounded border border-zinc-200 px-1.5 py-0.5 text-[11px] font-medium text-zinc-500 hover:border-zinc-300 hover:text-zinc-700"
+          onClick={(event) => {
+            event.stopPropagation();
+            void copyBusinessCode();
+          }}
+          type="button"
+        >
+          复制
+        </button>
+      ) : null}
+    </span>
+  );
+}
+
 type PurchaseErpStageKey = keyof PurchaseRequestErpTrack["stages"];
 
 const PURCHASE_ERP_STAGE_META: Record<
@@ -933,9 +968,11 @@ export function PurchaseRequestsPage() {
                       <div className="flex items-start justify-between gap-3">
                         <div className="min-w-0">
                           <div className="truncate text-sm font-semibold text-zinc-900">
-                            {resolvePurchaseDisplayCode(item)}
+                            <CompactBusinessCode copyable={false} value={resolvePurchaseDisplayCode(item)} />
+                          </div>
+                          <div className="mt-1 truncate text-xs text-zinc-500" title={item.title || undefined}>
+                            {formatTextWithCompactLongNumbers(item.title || "未命名采购申请")}
                           </div>
-                          <div className="mt-1 truncate text-xs text-zinc-500">{item.title || "未命名采购申请"}</div>
                         </div>
                         <StatusBadge status={item.status} />
                       </div>
@@ -951,7 +988,9 @@ export function PurchaseRequestsPage() {
                         <div className="col-span-2">
                           <div className="text-zinc-400">关联项目</div>
                           <div className="mt-0.5 truncate text-zinc-700">
-                            {item.project ? `${item.project.projectNo} · ${item.project.name}` : "未关联项目"}
+                            {item.project
+                              ? `${formatTextWithCompactLongNumbers(item.project.projectNo)} · ${item.project.name}`
+                              : "未关联项目"}
                           </div>
                         </div>
                       </div>
@@ -984,14 +1023,20 @@ export function PurchaseRequestsPage() {
                         }}
                       >
                         <TableCell className="cursor-pointer">
-                          <div className="font-medium text-zinc-900">{resolvePurchaseDisplayCode(item)}</div>
-                          <div className="text-xs text-zinc-500">{item.title || "未命名采购申请"}</div>
+                          <div className="font-medium text-zinc-900">
+                            <CompactBusinessCode value={resolvePurchaseDisplayCode(item)} />
+                          </div>
+                          <div className="text-xs text-zinc-500" title={item.title || undefined}>
+                            {formatTextWithCompactLongNumbers(item.title || "未命名采购申请")}
+                          </div>
                         </TableCell>
                         <TableCell>{item.applicant?.name ?? "-"}</TableCell>
                         <TableCell>
                           {item.project ? (
                             <div>
-                              <div className="font-medium text-zinc-900">{item.project.projectNo}</div>
+                              <div className="font-medium text-zinc-900" title={item.project.projectNo}>
+                                {formatTextWithCompactLongNumbers(item.project.projectNo)}
+                              </div>
                               <div className="text-xs text-zinc-500">{item.project.name}</div>
                             </div>
                           ) : (
@@ -1042,7 +1087,9 @@ export function PurchaseRequestsPage() {
             <>
               <div className="flex flex-wrap items-center justify-between gap-3">
                 <div>
-                  <h3 className="text-lg font-semibold text-zinc-900">{resolvePurchaseDisplayCode(detail)}</h3>
+                  <h3 className="text-lg font-semibold text-zinc-900">
+                    <CompactBusinessCode value={resolvePurchaseDisplayCode(detail)} />
+                  </h3>
                   <p className="text-sm text-zinc-500">申请人：{detail.applicant?.name ?? "-"}</p>
                   <p className="mt-1 text-sm text-zinc-500" data-testid="purchase-status-hint">
                     {resolvePurchaseStatusHint(detail)}