feat: 实现前端管理看板与移动端扫码视图组件

frontend/src/components/scan/ProductCard.tsx

@@ -0,0 +1,53 @@
+/** 产品信息卡片 */
+import { Package } from "lucide-react";
+import type { ProductScanResponse } from "../../types/api";
+
+const STATUS_LABELS: Record<string, string> = {
+  pending: "待处理",
+  in_progress: "进行中",
+  completed: "已完成",
+  cancelled: "已取消",
+};
+
+function statusColor(status: string): string {
+  switch (status) {
+    case "pending":   return "bg-yellow-100 text-yellow-700";
+    case "in_progress": return "bg-blue-100 text-blue-700";
+    case "completed":  return "bg-green-100 text-green-700";
+    default:           return "bg-gray-100 text-gray-600";
+  }
+}
+
+interface ProductCardProps {
+  product: ProductScanResponse;
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+  return (
+    <div className="rounded-xl bg-white p-4 shadow-sm">
+      <div className="mb-3 flex items-center gap-2">
+        <Package className="h-5 w-5 text-blue-600" />
+        <h3 className="font-semibold text-gray-800">产品信息</h3>
+        <span className={`ml-auto rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor(product.status)}`}>
+          {STATUS_LABELS[product.status] ?? product.status}
+        </span>
+      </div>
+      <div className="grid grid-cols-2 gap-2 text-sm">
+        <div>
+          <span className="text-gray-400">序列号</span>
+          <p className="font-mono font-medium text-gray-800">{product.serial_number}</p>
+        </div>
+        <div>
+          <span className="text-gray-400">订单编号</span>
+          <p className="font-medium text-gray-800">{product.order_no}</p>
+        </div>
+        {product.material_id && (
+          <div>
+            <span className="text-gray-400">物料 ID</span>
+            <p className="font-medium text-gray-800">{product.material_id}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}