新增資料庫架構

components/image-upload.tsx

@@ -0,0 +1,334 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useRef, useCallback } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Upload, X, AlertCircle, Eye, RotateCcw, FileImage } from "lucide-react"
+import {
+  validateImageFile,
+  createImageFile,
+  revokeImageUrl,
+  formatFileSize,
+  compressImage,
+  MAX_FILES_PER_UPLOAD,
+  MAX_TOTAL_FILES,
+  MAX_FILE_SIZE,
+  type ImageFile,
+} from "@/lib/image-utils"
+import { soundManager } from "@/lib/sound-effects"
+
+interface ImageUploadProps {
+  images: ImageFile[]
+  onImagesChange: (images: ImageFile[]) => void
+  disabled?: boolean
+  className?: string
+}
+
+export default function ImageUpload({ images, onImagesChange, disabled = false, className = "" }: ImageUploadProps) {
+  const [dragActive, setDragActive] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const [errors, setErrors] = useState<string[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleFiles = useCallback(
+    async (files: FileList) => {
+      if (disabled) return
+
+      setUploading(true)
+      setErrors([])
+
+      const newErrors: string[] = []
+      const validFiles: File[] = []
+
+      // 檢查總數量限制
+      if (images.length + files.length > MAX_TOTAL_FILES) {
+        newErrors.push(`最多只能上傳 ${MAX_TOTAL_FILES} 張圖片`)
+        setErrors(newErrors)
+        setUploading(false)
+        return
+      }
+
+      // 檢查單次上傳數量
+      if (files.length > MAX_FILES_PER_UPLOAD) {
+        newErrors.push(`單次最多只能上傳 ${MAX_FILES_PER_UPLOAD} 張圖片`)
+      }
+
+      // 驗證每個檔案
+      const filesToProcess = Array.from(files).slice(0, MAX_FILES_PER_UPLOAD)
+
+      for (const file of filesToProcess) {
+        const validation = validateImageFile(file)
+        if (validation.isValid) {
+          validFiles.push(file)
+        } else {
+          newErrors.push(`${file.name}: ${validation.error}`)
+        }
+      }
+
+      if (newErrors.length > 0) {
+        setErrors(newErrors)
+      }
+
+      if (validFiles.length > 0) {
+        try {
+          // 壓縮並創建圖片物件
+          const newImageFiles: ImageFile[] = []
+
+          for (const file of validFiles) {
+            let processedFile = file
+
+            // 如果檔案過大，嘗試壓縮
+            if (file.size > MAX_FILE_SIZE * 0.8) {
+              try {
+                processedFile = await compressImage(file, 1920, 0.8)
+              } catch (error) {
+                console.warn("圖片壓縮失敗，使用原檔案:", error)
+              }
+            }
+
+            // 轉換為 base64 格式
+            const imageFile = await createImageFile(processedFile)
+            newImageFiles.push(imageFile)
+          }
+
+          onImagesChange([...images, ...newImageFiles])
+          await soundManager.play("success")
+        } catch (error) {
+          newErrors.push("圖片處理失敗，請重試")
+          setErrors(newErrors)
+        }
+      }
+
+      setUploading(false)
+    },
+    [images, onImagesChange, disabled],
+  )
+
+  const handleDrag = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDragIn = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setDragActive(true)
+    }
+  }, [])
+
+  const handleDragOut = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragActive(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragActive(false)
+
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        handleFiles(e.dataTransfer.files)
+      }
+    },
+    [handleFiles],
+  )
+
+  const handleFileInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        handleFiles(e.target.files)
+      }
+      // 清空 input 值，允許重複選擇相同檔案
+      e.target.value = ""
+    },
+    [handleFiles],
+  )
+
+  const removeImage = useCallback(
+    async (imageId: string) => {
+      const imageToRemove = images.find((img) => img.id === imageId)
+      if (imageToRemove) {
+        revokeImageUrl(imageToRemove)
+        onImagesChange(images.filter((img) => img.id !== imageId))
+        await soundManager.play("click")
+      }
+    },
+    [images, onImagesChange],
+  )
+
+  const clearAllImages = useCallback(async () => {
+    images.forEach(revokeImageUrl)
+    onImagesChange([])
+    setErrors([])
+    await soundManager.play("click")
+  }, [images, onImagesChange])
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      {/* 上傳區域 */}
+      <Card
+        className={`
+          relative overflow-hidden transition-all duration-200 cursor-pointer
+          ${
+            dragActive
+              ? "border-cyan-400 bg-cyan-500/10 scale-[1.02]"
+              : "border-slate-600/50 bg-slate-700/30 hover:bg-slate-600/40"
+          }
+          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+        `}
+        onDragEnter={handleDragIn}
+        onDragLeave={handleDragOut}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+        onClick={() => !disabled && fileInputRef.current?.click()}
+      >
+        <CardContent className="p-6 md:p-8 text-center">
+          <div className="flex flex-col items-center gap-4">
+            <div
+              className={`
+              w-16 h-16 rounded-full flex items-center justify-center transition-all duration-200
+              ${dragActive ? "bg-cyan-500/20 text-cyan-300 scale-110" : "bg-slate-600/50 text-slate-300"}
+            `}
+            >
+              {uploading ? (
+                <div className="w-6 h-6 border-2 border-current border-t-transparent rounded-full animate-spin" />
+              ) : (
+                <Upload className="w-8 h-8" />
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold text-white">{dragActive ? "放開以上傳圖片" : "上傳相關圖片"}</h3>
+              <p className="text-sm text-slate-300">{uploading ? "正在處理圖片..." : "拖拽圖片到此處或點擊選擇檔案"}</p>
+              <div className="flex flex-wrap justify-center gap-2 text-xs text-slate-400">
+                <Badge variant="secondary" className="bg-slate-600/50 text-slate-300">
+                  支援 JPG、PNG、WebP、GIF
+                </Badge>
+                <Badge variant="secondary" className="bg-slate-600/50 text-slate-300">
+                  單檔最大 5MB
+                </Badge>
+                <Badge variant="secondary" className="bg-slate-600/50 text-slate-300">
+                  最多 {MAX_TOTAL_FILES} 張
+                </Badge>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept="image/*"
+          onChange={handleFileInput}
+          className="hidden"
+          disabled={disabled}
+        />
+      </Card>
+
+      {/* 錯誤訊息 */}
+      {errors.length > 0 && (
+        <Alert className="border-red-500/50 bg-red-900/20">
+          <AlertCircle className="h-4 w-4 text-red-400" />
+          <AlertDescription className="text-red-100">
+            <div className="space-y-1">
+              {errors.map((error, index) => (
+                <div key={index} className="text-sm">
+                  • {error}
+                </div>
+              ))}
+            </div>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* 已上傳的圖片 */}
+      {images.length > 0 && (
+        <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                <FileImage className="w-5 h-5 text-blue-400" />
+                <h4 className="font-semibold text-white">
+                  已上傳圖片 ({images.length}/{MAX_TOTAL_FILES})
+                </h4>
+              </div>
+              {images.length > 1 && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearAllImages}
+                  className="text-red-300 hover:text-red-200 hover:bg-red-900/20"
+                >
+                  <RotateCcw className="w-4 h-4 mr-1" />
+                  清空全部
+                </Button>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+              {images.map((image) => (
+                <div key={image.id} className="relative group">
+                  <div className="aspect-square rounded-lg overflow-hidden bg-slate-700/50 border border-slate-600/50">
+                    <img
+                      src={image.url || "/placeholder.svg"}
+                      alt={image.name}
+                      className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
+                      onError={(e) => {
+                        // 如果圖片載入失敗，顯示預設圖片
+                        const target = e.target as HTMLImageElement
+                        target.src = "/placeholder.svg?height=200&width=200&text=圖片載入失敗"
+                      }}
+                    />
+
+                    {/* 懸停覆蓋層 */}
+                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-white hover:bg-white/20 p-2"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          // 在新視窗中開啟圖片
+                          window.open(image.url, "_blank")
+                        }}
+                      >
+                        <Eye className="w-4 h-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-red-300 hover:text-red-200 hover:bg-red-900/20 p-2"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          removeImage(image.id)
+                        }}
+                      >
+                        <X className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* 檔案資訊 */}
+                  <div className="mt-2 text-xs text-slate-400 truncate">
+                    <div className="font-medium text-slate-300 truncate" title={image.name}>
+                      {image.name}
+                    </div>
+                    <div>{formatFileSize(image.size)}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}