From 51ca05d737e5ef374e134497353e643ae471e954 Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Mon, 10 Aug 2026 14:30:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=A8=E8=A7=88=E6=8C=89=E9=92=AEz-in?=
 =?UTF-8?q?dex=E4=BF=AE=E5=A4=8D+=E4=BA=A7=E5=93=81ID=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=BC=B9=E4=BA=8C=E7=BB=B4=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/admin/AdminTasksPage.tsx      | 16 +++++++++++++++-
 .../src/pages/scan/components/TreeCanvas.vue     |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/admin/AdminTasksPage.tsx b/frontend/src/pages/admin/AdminTasksPage.tsx
index 01e2f1c..aa58b27 100644
--- a/frontend/src/pages/admin/AdminTasksPage.tsx
+++ b/frontend/src/pages/admin/AdminTasksPage.tsx
@@ -55,6 +55,7 @@ export default function AdminTasksPage() {
   // 弹窗
   const [modalTarget, setModalTarget] = useState<ModalTarget | null>(null);
   const [submitting, setSubmitting] = useState(false);
+  const [qrSerial, setQrSerial] = useState<string | null>(null); // 🔧 QR弹窗
 
   // ---- 加载产品列表（始终拉全量，不做服务端状态过滤） ----
   async function loadProducts(kw: string) {
@@ -373,7 +374,7 @@ export default function AdminTasksPage() {
                       return (
                         <div key={p.id}>
                           <div className="grid grid-cols-12 gap-2 border-t border-gray-50 px-5 py-3 items-center text-sm hover:bg-gray-50/50">
-                            <div className="col-span-2 font-mono text-xs font-semibold text-gray-800 tracking-wider">{p.serial_number}</div>
+                            <div className="col-span-2 font-mono text-xs font-semibold text-gray-800 tracking-wider cursor-pointer hover:text-blue-600 underline decoration-dotted" onClick={() => setQrSerial(p.serial_number)} title="点击查看二维码">{p.serial_number}</div>
                             <div className="col-span-1 font-mono text-xs text-gray-600 truncate">{p.external_serial || "—"}</div>
                             <div className="col-span-2 text-xs text-gray-500 truncate">{p.spec_model || p.material_name || p.material_id || "—"}</div>
                             <div className="col-span-1"><span className="text-xs font-medium text-gray-700">{p.overall_status || "—"}</span></div>
@@ -437,6 +438,19 @@ export default function AdminTasksPage() {
         </div>
       )}
 
+      {/* 🔧 二维码弹窗 */}
+      {qrSerial && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center" onClick={() => setQrSerial(null)}>
+          <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
+          <div className="relative z-10 rounded-xl bg-white p-6 shadow-2xl text-center" onClick={e => e.stopPropagation()}>
+            <h3 className="mb-3 text-sm font-bold text-gray-800">产品二维码</h3>
+            <img src={`/api/v1/products/qrcode/${qrSerial}`} alt={`QR-${qrSerial}`} className="mx-auto h-64 w-64 rounded-lg border" />
+            <p className="mt-3 font-mono text-sm font-bold tracking-wider text-gray-700">{qrSerial}</p>
+            <button onClick={() => setQrSerial(null)} className="mt-4 rounded-lg bg-blue-600 px-6 py-2 text-sm text-white hover:bg-blue-700">关闭</button>
+          </div>
+        </div>
+      )}
+
       {/* ---- 弹窗 ---- */}
       <ReceiveConfirmModal
         open={modalTarget?.action === "receive"}
diff --git a/track-uniapp/src/pages/scan/components/TreeCanvas.vue b/track-uniapp/src/pages/scan/components/TreeCanvas.vue
index 6fe7042..737bf77 100644
--- a/track-uniapp/src/pages/scan/components/TreeCanvas.vue
+++ b/track-uniapp/src/pages/scan/components/TreeCanvas.vue
@@ -208,7 +208,7 @@ export default {
 
 <style scoped>
 .tree-canvas-fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; background: #e8ecf0; }
-.tc-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #e5e7eb; flex-shrink: 0; z-index: 10; }
+.tc-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #e5e7eb; flex-shrink: 0; z-index: 999; }
 .tc-toolbar-left { display: flex; align-items: center; gap: 12px; }
 .tc-back-btn { font-size: 14px; font-weight: 700; color: #2563eb; padding: 6px 12px; background: #eff6ff; border-radius: 8px; }
 .tc-title { font-size: 16px; font-weight: 800; color: #1f2937; }