feat: 在相册图片卡片上添加抠图功能按钮

app/(chat)/gallery/page.tsx

@@ -4,9 +4,10 @@ import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { ArrowLeft, Download, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Edit } from "lucide-react";
+import { ArrowLeft, Download, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Edit, Scissors } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import Image from "next/image";
+import { toast } from "sonner";
 
 type GalleryImage = {
   id: string;
@@ -39,6 +40,7 @@ export default function GalleryPage() {
   const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [pageInput, setPageInput] = useState("");
+  const [processingImageId, setProcessingImageId] = useState<string | null>(null);
 
   const fetchImages = async (page: number) => {
     setLoading(true);
@@ -87,6 +89,71 @@ export default function GalleryPage() {
     router.push(`/?editImage=${encodeURIComponent(imageUrl)}`);
   };
 
+  const handleRemoveBackground = async (image: GalleryImage, e: React.MouseEvent) => {
+    e.stopPropagation(); // 阻止触发图片点击事件
+    
+    if (processingImageId === image.id) return; // 防止重复点击
+    
+    setProcessingImageId(image.id);
+    
+    try {
+      toast.info("正在处理抠图，请稍候...");
+      
+      // 获取原图并转换为Base64
+      const response = await fetch(image.url);
+      const blob = await response.blob();
+      const reader = new FileReader();
+      
+      reader.onloadend = async () => {
+        try {
+          const base64Data = (reader.result as string).split(",")[1];
+          
+          // 调用抠图API
+          const rmbgResponse = await fetch("/api/rmbg", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              image_base64: base64Data,
+              prompt: `抠图处理 - ${image.alt}`,
+              chatId: image.chatId,
+              messageId: image.messageId,
+            }),
+          });
+
+          if (!rmbgResponse.ok) {
+            const error = await rmbgResponse.json();
+            throw new Error(error.error || error.detail || "抠图失败");
+          }
+
+          const result = await rmbgResponse.json();
+          
+          // 刷新相册列表以显示新图片
+          await fetchImages(pagination.page);
+          
+          toast.success(`抠图完成！处理时间: ${result.processing_time?.toFixed(2) || "未知"}秒`);
+        } catch (error) {
+          console.error("[抠图] 错误:", error);
+          toast.error(error instanceof Error ? error.message : "抠图处理失败");
+        } finally {
+          setProcessingImageId(null);
+        }
+      };
+      
+      reader.onerror = () => {
+        toast.error("图片读取失败");
+        setProcessingImageId(null);
+      };
+      
+      reader.readAsDataURL(blob);
+    } catch (error) {
+      console.error("[抠图] 错误:", error);
+      toast.error(error instanceof Error ? error.message : "抠图处理失败");
+      setProcessingImageId(null);
+    }
+  };
+
   const goToPage = (page: number) => {
     if (page >= 1 && page <= pagination.totalPages) {
       fetchImages(page);
@@ -155,8 +222,22 @@ export default function GalleryPage() {
                       blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjI3MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjI3MCIgZmlsbD0iI2VlZSIvPjwvc3ZnPg=="
                     />
                   </div>
-                  {/* 🆕 编辑按钮（悬停时显示） */}
+                  {/* 🆕 操作按钮（悬停时显示） */}
-                  <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-2">
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      className="h-8 px-2 bg-black/70 hover:bg-black/90 text-white border-0"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemoveBackground(img, e);
+                      }}
+                      disabled={processingImageId === img.id}
+                      title="移除背景（抠图）"
+                    >
+                      <Scissors className={`h-3 w-3 mr-1 ${processingImageId === img.id ? "animate-spin" : ""}`} />
+                      {processingImageId === img.id ? "处理中" : "抠图"}
+                    </Button>
                     <Button
                       size="sm"
                       variant="secondary"