feat: 新增商品 Excel 匯入功能與修復 HTTPS 混合內容問題

1. 新增商品 Excel 匯入功能 (ProductImport, Export Template)
2. 調整商品代號驗證規則為 1-5 碼 (Controller & Import)
3. 修正 HTTPS Mixed Content 問題 (AppServiceProvider)

resources/js/Components/Product/ProductImportDialog.tsx

@@ -0,0 +1,142 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/Components/ui/dialog";
+import { Button } from "@/Components/ui/button";
+import { Input } from "@/Components/ui/input";
+import { Label } from "@/Components/ui/label";
+import { Upload, Download, FileSpreadsheet, AlertCircle, Info } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/Components/ui/accordion";
+import { useForm } from "@inertiajs/react";
+import { Alert, AlertDescription } from "@/Components/ui/alert";
+
+interface ProductImportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function ProductImportDialog({ open, onOpenChange }: ProductImportDialogProps) {
+  const { data, setData, post, processing, errors, reset, clearErrors } = useForm<{
+    file: File | null;
+  }>({
+    file: null,
+  });
+
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setData("file", e.target.files[0]);
+      clearErrors("file");
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    post(route("products.import"), {
+      onSuccess: () => {
+        reset();
+        onOpenChange(false);
+      },
+    });
+  };
+
+  const handleDownloadTemplate = () => {
+    window.location.href = route('products.template');
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>匯入商品資料</DialogTitle>
+          <DialogDescription>
+            請先下載範本，填寫後上傳。系統將自動建立商品資料。
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* 步驟 1: 下載範本 */}
+          <div className="space-y-2 p-4 bg-gray-50 rounded-lg border border-gray-100">
+            <Label className="font-medium flex items-center gap-2">
+              <FileSpreadsheet className="w-4 h-4 text-green-600" />
+              步驟 1：取得 Excel 範本
+            </Label>
+            <div className="text-sm text-gray-500 mb-2">
+              下載標準範本以確保資料格式正確。請勿修改欄位名稱。
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleDownloadTemplate}
+              className="w-full sm:w-auto button-outlined-primary"
+            >
+              <Download className="w-4 h-4 mr-2" />
+              下載範本 (.xlsx)
+            </Button>
+          </div>
+
+          {/* 步驟 2: 上傳檔案 */}
+          <div className="space-y-2">
+            <Label className="font-medium flex items-center gap-2">
+              <Upload className="w-4 h-4 text-blue-600" />
+              步驟 2：上傳填寫後的檔案
+            </Label>
+
+            <div className="grid w-full max-w-sm items-center gap-1.5">
+              <Input
+                id="file"
+                type="file"
+                accept=".xlsx, .xls"
+                onChange={handleFileChange}
+                className="cursor-pointer"
+              />
+            </div>
+            {errors.file && (
+              <Alert variant="destructive" className="mt-2">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription className="whitespace-pre-wrap">
+                  {errors.file}
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
+
+          {/* 欄位說明 */}
+          <Accordion type="single" collapsible className="w-full border rounded-lg px-2">
+            <AccordionItem value="item-1" className="border-b-0">
+              <AccordionTrigger className="text-sm text-gray-500 hover:no-underline py-3">
+                <div className="flex items-center gap-2">
+                  <Info className="h-4 w-4" />
+                  欄位填寫規則
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <div className="text-sm text-gray-600 space-y-2 pb-2 pl-6">
+                  <ul className="list-disc space-y-1">
+                    <li><span className="font-medium text-gray-700">必填欄位</span>：商品代號 (1-5 碼)、條碼、商品名稱、類別名稱、基本單位。</li>
+                    <li><span className="font-medium text-gray-700">唯一性</span>：商品代號與條碼不可與現有資料重複。</li>
+                    <li><span className="font-medium text-gray-700">自動關聯</span>：類別與單位請填寫系統當前存在的「名稱」（如：飲品、瓶）。</li>
+                    <li><span className="font-medium text-gray-700">大單位</span>：若填寫大單位，則「換算率」為必填（需大於 0）。</li>
+                  </ul>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={processing}
+              className="button-outlined-primary"
+            >
+              取消
+            </Button>
+            <Button type="submit" disabled={!data.file || processing} className="button-filled-primary">
+              {processing ? "匯入中..." : "開始匯入"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/Pages/Product/Index.tsx

@@ -2,9 +2,10 @@ import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
-import { Plus, Search, Package, X } from 'lucide-react';
+import { Plus, Search, Package, X, Upload } from 'lucide-react';
 import ProductTable from "@/Components/Product/ProductTable";
 import ProductDialog from "@/Components/Product/ProductDialog";
+import ProductImportDialog from "@/Components/Product/ProductImportDialog";
 import CategoryManagerDialog from "@/Components/Category/CategoryManagerDialog";
 import UnitManagerDialog, { Unit } from "@/Components/Unit/UnitManagerDialog";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
@@ -67,6 +68,7 @@ export default function ProductManagement({ products, categories, units, filters
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isCategoryDialogOpen, setIsCategoryDialogOpen] = useState(false);
   const [isUnitDialogOpen, setIsUnitDialogOpen] = useState(false);
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
   const [editingProduct, setEditingProduct] = useState<Product | null>(null);
 
   // Sync state with props when they change (e.g. navigation)
@@ -241,6 +243,16 @@ export default function ProductManagement({ products, categories, units, filters
                   管理單位
                 </Button>
               </Can>
+              <Can permission="products.create">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsImportDialogOpen(true)}
+                  className="flex-1 md:flex-none button-outlined-primary"
+                >
+                  <Upload className="mr-2 h-4 w-4" />
+                  匯入
+                </Button>
+              </Can>
               <Can permission="products.create">
                 <Button onClick={handleAddProduct} className="flex-1 md:flex-none button-filled-primary">
                   <Plus className="mr-2 h-4 w-4" />
@@ -293,6 +305,11 @@ export default function ProductManagement({ products, categories, units, filters
           units={units}
         />
 
+        <ProductImportDialog
+          open={isImportDialogOpen}
+          onOpenChange={setIsImportDialogOpen}
+        />
+
         <CategoryManagerDialog
           open={isCategoryDialogOpen}
           onOpenChange={setIsCategoryDialogOpen}