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

resources/js/Components/Product/ProductTable.tsx

@@ -74,11 +74,7 @@ export default function ProductTable({
           <TableHeader className="bg-gray-50">
             <TableRow>
               <TableHead className="w-[50px] text-center">#</TableHead>
-              <TableHead>
-                <button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900">
-                  商品代號 <SortIcon field="code" />
-                </button>
-              </TableHead>
+              <TableHead className="w-[150px]">條碼編號</TableHead>
               <TableHead>
                 <button onClick={() => onSort("name")} className="flex items-center hover:text-gray-900">
                   商品名稱 <SortIcon field="name" />
@@ -112,12 +108,15 @@ export default function ProductTable({
                     {startIndex + index}
                   </TableCell>
                   <TableCell className="font-mono text-sm text-gray-700">
-                    {product.code}
+                    {product.barcode || "-"}
                   </TableCell>
                   <TableCell>
                     <div className="flex flex-col">
-                      <span className="font-medium">{product.name}</span>
-                      {product.brand && <span className="text-xs text-gray-400">{product.brand}</span>}
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-grey-0">{product.name}</span>
+                        {product.brand && <Badge variant="secondary" className="text-[10px] h-4 px-1 bg-gray-100 text-gray-500 border-none">{product.brand}</Badge>}
+                      </div>
+                      <span className="text-xs text-gray-400 font-mono">代號: {product.code}</span>
                     </div>
                   </TableCell>
                   <TableCell>