first commit

2025-12-30 15:03:19 +08:00
commit c735c36009
902 changed files with 83591 additions and 0 deletions
--- a/resources/js/Components/Product/BarcodeViewDialog.tsx
+++ b/resources/js/Components/Product/BarcodeViewDialog.tsx
@@ -0,0 +1,158 @@
+const barcodeSample = "/images/barcode-sample.png";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/Components/ui/dialog";
+import { Button } from "@/Components/ui/button";
+import { Download, Printer } from "lucide-react";
+const barcodePlaceholder = "/images/barcode-placeholder.png";
+
+interface BarcodeViewDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  productName: string;
+  productCode: string;
+  barcodeValue: string;
+}
+
+export default function BarcodeViewDialog({
+  open,
+  onOpenChange,
+  productName,
+  productCode,
+  barcodeValue,
+}: BarcodeViewDialogProps) {
+  const handlePrint = () => {
+    const printWindow = window.open("", "_blank");
+    if (printWindow) {
+      printWindow.document.write(`
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <title>列印條碼 - ${productName}</title>
+            <style>
+              body {
+                margin: 0;
+                padding: 20px;
+                font-family: 'Noto Sans TC', sans-serif;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+              }
+              .barcode-container {
+                text-align: center;
+                page-break-inside: avoid;
+              }
+              .product-info {
+                margin-bottom: 16px;
+              }
+              .product-name {
+                font-size: 18px;
+                font-weight: 600;
+                margin-bottom: 4px;
+              }
+              .product-code {
+                font-size: 14px;
+                color: #666;
+                font-family: monospace;
+              }
+              img {
+                max-width: 400px;
+                height: auto;
+              }
+              @media print {
+                body {
+                  padding: 0;
+                }
+                @page {
+                  margin: 20mm;
+                }
+              }
+            </style>
+          </head>
+          <body>
+            <div class="barcode-container">
+              <div class="product-info">
+                <div class="product-name">${productName}</div>
+                <div class="product-code">商品編號: ${productCode}</div>
+              </div>
+              <img src="${barcodePlaceholder}" alt="商品條碼" />
+            </div>
+          </body>
+        </html>
+      `);
+      printWindow.document.close();
+      setTimeout(() => {
+        printWindow.print();
+      }, 250);
+    }
+  };
+
+  const handleDownload = () => {
+    const link = document.createElement("a");
+    link.href = barcodePlaceholder;
+    link.download = `${productCode}_barcode.png`;
+    link.target = "_blank";
+    link.click();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>商品條碼</DialogTitle>
+          <DialogDescription>
+            {productName} ({productCode})
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* 條碼顯示區 */}
+          <div className="flex items-center justify-center bg-white border-2 border-gray-200 rounded-lg p-6">
+            <img
+              src={barcodeSample}
+              alt="商品條碼"
+              className="max-w-full h-auto"
+            />
+          </div>
+
+          {/* 條碼資訊 */}
+          <div className="bg-gray-50 rounded-lg p-4 space-y-2">
+            <div className="flex justify-between items-center">
+              <span className="text-sm text-gray-600">條碼內容</span>
+              <span className="text-sm font-mono font-semibold">{barcodeValue}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-sm text-gray-600">條碼格式</span>
+              <span className="text-sm font-semibold">Code128</span>
+            </div>
+          </div>
+
+          {/* 操作按鈕 */}
+          <div className="flex gap-3">
+            <Button
+              onClick={handlePrint}
+              className="flex-1 button-outlined-primary"
+              variant="outline"
+            >
+              <Printer className="mr-2 h-4 w-4" />
+              列印條碼
+            </Button>
+            <Button
+              onClick={handleDownload}
+              className="flex-1 button-outlined-primary"
+              variant="outline"
+            >
+              <Download className="mr-2 h-4 w-4" />
+              下載圖片
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}