更新：優化配方詳情彈窗 UI 與一般修正

resources/js/Components/Product/ProductDialog.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { Wand2 } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -36,6 +37,7 @@ export default function ProductDialog({
 }: ProductDialogProps) {
   const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
     code: "",
+    barcode: "",
     name: "",
     category_id: "",
     brand: "",
@@ -52,6 +54,7 @@ export default function ProductDialog({
       if (product) {
         setData({
           code: product.code,
+          barcode: product.barcode || "",
           name: product.name,
           category_id: product.categoryId.toString(),
           brand: product.brand || "",
@@ -99,6 +102,11 @@ export default function ProductDialog({
     }
   };
 
+  const generateRandomBarcode = () => {
+    const randomDigits = Math.floor(Math.random() * 9000000000) + 1000000000;
+    setData("barcode", randomDigits.toString());
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
@@ -159,6 +167,32 @@ export default function ProductDialog({
                 {errors.code && <p className="text-sm text-red-500">{errors.code}</p>}
               </div>
 
+              <div className="space-y-2">
+                <Label htmlFor="barcode">
+                  條碼編號 <span className="text-red-500">*</span>
+                </Label>
+                <div className="flex gap-2">
+                  <Input
+                    id="barcode"
+                    value={data.barcode}
+                    onChange={(e) => setData("barcode", e.target.value)}
+                    placeholder="輸入條碼或自動生成"
+                    className={`flex-1 ${errors.barcode ? "border-red-500" : ""}`}
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    onClick={generateRandomBarcode}
+                    title="隨機生成條碼"
+                    className="shrink-0 button-outlined-primary"
+                  >
+                    <Wand2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                {errors.barcode && <p className="text-sm text-red-500">{errors.barcode}</p>}
+              </div>
+
               <div className="space-y-2">
                 <Label htmlFor="brand">品牌</Label>
                 <Input