@windrun-huaiin/third-ui 5.11.5 → 5.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.11.5",
+  "version": "5.12.1",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/main/gallery.tsx

@@ -1,37 +1,89 @@
 'use client'
 
 import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
+import { cn } from '@lib/utils'
 import { useTranslations } from 'next-intl'
 import Image from "next/image"
-import { GradientButton } from "@third-ui/fuma/mdx/gradient-button"
-import { cn } from '@lib/utils';
-import { useState } from 'react';
+import { useState } from 'react'
 
 interface GalleryItem {
   url: string;
   altMsg: string;
 }
 
-export function Gallery({ sectionClassName }: { sectionClassName?: string }) {
+interface GalleryProps {
+  sectionClassName?: string;
+  button?: React.ReactNode;
+}
+
+export function Gallery({ sectionClassName, button }: GalleryProps) {
   const t = useTranslations('gallery');
   const galleryItems = t.raw('prompts') as GalleryItem[];
   const defaultImgUrl = t.raw('defaultImgUrl') as string;
   const [imageErrors, setImageErrors] = useState<Set<number>>(new Set());
+  const [downloadingItems, setDownloadingItems] = useState<Set<number>>(new Set());
+  const cdnProxyUrl = process.env.NEXT_PUBLIC_STYLE_CDN_PROXY_URL!;
 
   const handleDownload = async (item: GalleryItem, index: number) => {
+    // prevent duplicate clicks
+    if (downloadingItems.has(index)) {
+      return;
+    }
+
+    // set download status
+    setDownloadingItems(prev => new Set(prev).add(index));
+
     try {
-      const response = await fetch(item.url);
+      // use R2 proxy to download directly, no need to fetch
+      // convert original R2 URL to proxy URL
+      const originalUrl = new URL(item.url);
+      const filename = originalUrl.pathname.substring(1);
+      
+      // build proxy download URL
+      const proxyUrl = `${cdnProxyUrl}/${encodeURIComponent(filename)}`;
+      
+      // extract file extension from URL
+      const urlExtension = item.url.split('.').pop()?.toLowerCase();
+      let extension = '.webp';
+      if (urlExtension && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(urlExtension)) {
+        extension = `.${urlExtension}`;
+      }
+      const downloadPrefix = t('downloadPrefix');
+      
+      // fetch file from proxy
+      const response = await fetch(proxyUrl);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      
+      // convert to blob
       const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
+      const blobUrl = URL.createObjectURL(blob);
+      
+      // create download link and trigger download
       const a = document.createElement('a');
-      a.href = url;
-      a.download = `reve-image-${index + 1}.webp`;
+      a.href = blobUrl;
+      a.download = `${downloadPrefix}-${index + 1}${extension}`;
+      a.style.display = 'none';
       document.body.appendChild(a);
       a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
+      
+      // clean up DOM elements and blob URL
+      setTimeout(() => {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(blobUrl);
+      }, 100);
+      
     } catch (error) {
       console.error('Download failed:', error);
+    } finally {
+      // clear download status
+      setDownloadingItems(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(index);
+        return newSet;
+      });
     }
   };
 
@@ -65,22 +117,29 @@ export function Gallery({ sectionClassName }: { sectionClassName?: string }) {
             <div className="absolute inset-0 flex items-end justify-end p-4 opacity-0 group-hover:opacity-100 transition duration-300">
               <button
                 onClick={() => handleDownload(item, index)}
-                className="bg-black/50 hover:bg-black/70 p-2 rounded-full text-white/80 hover:text-white transition-all duration-300"
+                disabled={downloadingItems.has(index)}
+                className={cn(
+                  "p-2 rounded-full transition-all duration-300",
+                  downloadingItems.has(index)
+                    ? "bg-black/30 text-white/50"
+                    : "bg-black/50 hover:bg-black/70 text-white/80 hover:text-white"
+                )}
               >
-                <icons.Download className="h-5 w-5 text-white" />
+                {downloadingItems.has(index) ? (
+                  <icons.Loader2 className="h-5 w-5 text-white animate-spin" />
+                ) : (
+                  <icons.Download className="h-5 w-5 text-white" />
+                )}
               </button>
             </div>
           </div>
         ))}
       </div>
-      <div className="text-center mt-12">
-        <GradientButton
-          title={t('button')}
-          href="https://preview.reve.art/"
-          align="center"
-        />
-      </div>
+      {button && (
+        <div className="text-center mt-12">
+          {button}
+        </div>
+      )}
     </section>
   )
 }
-