UI優化: 全系統狀態標籤 (StatusBadge) 統一化重構完成 (Phase 3 & 4)

resources/js/Pages/Product/Show.tsx

@@ -6,7 +6,7 @@ import { Head, Link } from "@inertiajs/react";
 import { ArrowLeft, Package, Tag, Layers, MapPin, DollarSign } from "lucide-react";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Button } from "@/Components/ui/button";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 import { Label } from "@/Components/ui/label";
 import { getShowBreadcrumbs } from "@/utils/breadcrumb";
 import { Can } from "@/Components/Permission/Can";
@@ -105,15 +105,15 @@ export default function ProductShow({ product }: Props) {
                                 <div>
                                     <Label className="text-muted-foreground text-xs text-secondary-text">所屬分類</Label>
                                     <div className="mt-1">
-                                        <Badge variant="outline">{product.category?.name || "未分類"}</Badge>
+                                        <StatusBadge variant="neutral">{product.category?.name || "未分類"}</StatusBadge>
                                     </div>
                                 </div>
                                 <div>
                                     <Label className="text-muted-foreground text-xs text-secondary-text">啟用狀態</Label>
                                     <div className="mt-1">
-                                        <Badge className={product.is_active ? "bg-green-100 text-green-700 border-green-200" : "bg-gray-100 text-gray-500 border-gray-200"}>
+                                        <StatusBadge variant={product.is_active ? "success" : "neutral"}>
                                             {product.is_active ? "啟用中" : "已停用"}
-                                        </Badge>
+                                        </StatusBadge>
                                     </div>
                                 </div>
                             </div>