54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
|
/** 产品信息卡片 */
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|