feat: 网页端渲染售后回流标签(发货测试/售后维修)

frontend/src/components/scan/ProductCard.tsx

@@ -1,7 +1,7 @@
 /** 产品信息卡片 */
 import { Package } from "lucide-react";
 import type { ProductScanResponse } from "../../types/api";
-import { statusColor, statusLabel } from "../../constants/task";
+import { lifecycleBadge, statusColor, statusLabel } from "../../constants/task";
 
 interface ProductCardProps {
   product: ProductScanResponse;
@@ -10,6 +10,8 @@ interface ProductCardProps {
 export default function ProductCard({ product }: ProductCardProps) {
   // 优先显示宏观状态（整体流转），回退到产品状态字段
   const displayStatus = product.overall_status || product.status;
+  // 🔧 发货测试 / 售后维修 — 仅「测试 / 维修」工序下显示
+  const lifeBadge = lifecycleBadge(product.overall_status, product.lifecycle_phase);
   return (
     <div className="rounded-xl bg-white p-4 shadow-sm">
       <div className="mb-3 flex items-center gap-2">
@@ -18,6 +20,11 @@ export default function ProductCard({ product }: ProductCardProps) {
         <span className={`ml-auto rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor(displayStatus)}`}>
           {statusLabel(displayStatus)}
         </span>
+        {lifeBadge && (
+          <span className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-bold ${lifeBadge.className}`}>
+            {lifeBadge.label}
+          </span>
+        )}
       </div>
       <div className="grid grid-cols-2 gap-2 text-sm">
         <div>