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

resources/js/Components/SafetyStock/EditSafetyStockDialog.tsx

@@ -16,7 +16,7 @@ import { Input } from "@/Components/ui/input";
 import { Label } from "@/Components/ui/label";
 import { SafetyStockSetting } from "@/types/warehouse";
 import { toast } from "sonner";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 
 interface EditSafetyStockDialogProps {
   open: boolean;
@@ -66,7 +66,7 @@ export default function EditSafetyStockDialog({
             <Label>商品名稱</Label>
             <div className="flex items-center gap-2">
               <span className="font-medium">{setting.productName}</span>
-              <Badge variant="outline">{setting.productType}</Badge>
+              <StatusBadge variant="neutral">{setting.productType}</StatusBadge>
             </div>
           </div>
 

resources/js/Components/SafetyStock/SafetyStockList.tsx

@@ -2,7 +2,7 @@
  * 安全庫存列表組件
  */
 
-import { Edit, Trash2, AlertCircle, CheckCircle, AlertTriangle } from "lucide-react";
+import { Trash2, Pencil } from "lucide-react";
 import {
   Table,
   TableBody,
@@ -13,7 +13,7 @@ import {
 } from "@/Components/ui/table";
 import { Button } from "@/Components/ui/button";
 import { SafetyStockSetting, WarehouseInventory, SafetyStockStatus } from "@/types/warehouse";
-import { Badge } from "@/Components/ui/badge";
+import { StatusBadge } from "@/Components/shared/StatusBadge";
 
 interface SafetyStockListProps {
   settings: SafetyStockSetting[];
@@ -35,29 +35,28 @@ function getSafetyStockStatus(
 
 // 獲取狀態徽章
 function getStatusBadge(status: SafetyStockStatus) {
-  switch (status) {
-    case "正常":
-      return (
-        <Badge className="bg-green-100 text-green-700 border-green-300">
-          <CheckCircle className="mr-1 h-3 w-3" />
-          正常
-        </Badge>
-      );
-    case "接近":
-      return (
-        <Badge className="bg-yellow-100 text-yellow-700 border-yellow-300">
-          <AlertTriangle className="mr-1 h-3 w-3" />
-          接近
-        </Badge>
-      );
-    case "低於":
-      return (
-        <Badge className="bg-red-100 text-red-700 border-red-300">
-          <AlertCircle className="mr-1 h-3 w-3" />
-          低於
-        </Badge>
-      );
+  if (status === '正常') {
+    return (
+      <StatusBadge variant="success">
+        正常
+      </StatusBadge>
+    );
   }
+  if (status === '接近') {
+    return (
+      <StatusBadge variant="warning">
+        接近
+      </StatusBadge>
+    );
+  }
+  if (status === '低於') {
+    return (
+      <StatusBadge variant="destructive">
+        低於
+      </StatusBadge>
+    );
+  }
+  return null; // Should not happen if SafetyStockStatus is exhaustive
 }
 
 export default function SafetyStockList({
@@ -108,7 +107,7 @@ export default function SafetyStockList({
                   <TableCell className="text-grey-2">{index + 1}</TableCell>
                   <TableCell className="font-medium">{setting.productName}</TableCell>
                   <TableCell>
-                    <Badge variant="outline">{setting.productType}</Badge>
+                    <StatusBadge variant="neutral">{setting.productType}</StatusBadge>
                   </TableCell>
                   <TableCell>
                     <span className={isLowStock ? "text-red-600 font-medium" : ""}>
@@ -126,7 +125,7 @@ export default function SafetyStockList({
                         onClick={() => onEdit(setting)}
                         className="hover:bg-primary/10 hover:text-primary"
                       >
-                        <Edit className="h-4 w-4 mr-1" />
+                        <Pencil className="h-4 w-4 mr-1" />
                         編輯
                       </Button>
                       <Button