From d5483a30e9a45479bebb3792a4f4da0d342a0175 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Tue, 23 Sep 2025 18:24:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=9D=E5=A7=8B=E6=89=93?=
 =?UTF-8?q?=E5=BC=80=E4=BA=A7=E5=93=81=E9=A1=B5=E9=9D=A2=E6=97=B6=E5=81=B6?=
 =?UTF-8?q?=E5=B0=94=E5=87=BA=E7=8E=B0=E5=9B=BE=E7=89=87=E5=8F=AA=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=83=A8=E5=88=86=E4=B8=8D=E5=AE=8C=E5=96=84=E7=9A=84?=
 =?UTF-8?q?=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/files/[...path]/route.js                |  8 ++---
 components/products/ProductImageGallery.jsx | 40 +++++++++++++++++----
 public/sitemap.xml                          | 10 ++++++
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/app/files/[...path]/route.js b/app/files/[...path]/route.js
index 00d001c..b43796f 100644
--- a/app/files/[...path]/route.js
+++ b/app/files/[...path]/route.js
@@ -40,14 +40,14 @@ export async function GET(req, { params }) {
       const data = fs.readFileSync(localPath);
       return new NextResponse(data, {
         status: 200,
-        headers: { 'Content-Type': getContentType(localPath) }
+        headers: { 'Content-Type': getContentType(localPath), 'Cache-Control': 'public, max-age=31536000, immutable' }
       });
     }
 
     const remoteUrl = `${BACKEND_SERVER_URL}/files/${fileName}`;
     const res = await fetch(remoteUrl);
     if (!res.ok) {
-      return new NextResponse('Not Found', { status: 404 });
+      return new NextResponse('Not Found', { status: 404, headers: { 'Cache-Control': 'no-store' } });
     }
     const arrayBuffer = await res.arrayBuffer();
     const buffer = Buffer.from(arrayBuffer);
@@ -58,10 +58,10 @@ export async function GET(req, { params }) {
 
     return new NextResponse(buffer, {
       status: 200,
-      headers: { 'Content-Type': getContentType(localPath) }
+      headers: { 'Content-Type': getContentType(localPath), 'Cache-Control': 'public, max-age=31536000, immutable' }
     });
   } catch (e) {
-    return new NextResponse('Server Error', { status: 500 });
+    return new NextResponse('Server Error', { status: 500, headers: { 'Cache-Control': 'no-store' } });
   }
 }
 
diff --git a/components/products/ProductImageGallery.jsx b/components/products/ProductImageGallery.jsx
index cb466d7..9115d0e 100644
--- a/components/products/ProductImageGallery.jsx
+++ b/components/products/ProductImageGallery.jsx
@@ -10,6 +10,37 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css/free-mode";
 
+const ImageWithRetry = ({ src, alt, className }) => {
+  const [imageSrc, setImageSrc] = useState(src);
+  const retryCountRef = useRef(0);
+
+  useEffect(() => {
+    setImageSrc(src);
+    retryCountRef.current = 0;
+  }, [src]);
+
+  const handleError = useCallback(() => {
+    if (retryCountRef.current >= 3) return;
+    retryCountRef.current += 1;
+    const delay = 300 * retryCountRef.current;
+    setTimeout(() => {
+      const url = new URL(imageSrc, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
+      url.searchParams.set('v', String(Date.now()));
+      setImageSrc(url.pathname + url.search);
+    }, delay);
+  }, [imageSrc]);
+
+  return (
+    <img
+      src={imageSrc}
+      alt={alt}
+      className={className}
+      loading="lazy"
+      onError={handleError}
+    />
+  );
+};
+
 const ProductImageGallery = ({ data }) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const [thumbsSwiper, setThumbsSwiper] = useState(null);
@@ -136,14 +167,10 @@ const ProductImageGallery = ({ data }) => {
             }
           }}
         >
-          <img
+          <ImageWithRetry
             src={attachment.file_url}
             alt={`${data?.title || 'Product'} - ${index + 1}`}
             className="w-full h-full object-cover"
-            loading="lazy"
-            onError={(e) => {
-              e.target.style.display = 'none';
-            }}
           />
           <div className="absolute inset-0 bg-gray-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
             <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
@@ -157,11 +184,10 @@ const ProductImageGallery = ({ data }) => {
     <div className="w-full md:w-120 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
       <div className="relative w-full max-w-[320px] md:max-w-full">
         <div className="relative overflow-hidden rounded-xl shadow-lg mb-6 group/main-image">
-          <img
+          <ImageWithRetry
             src={currentImage}
             alt={data?.title || 'Product Image'}
             className="w-full max-w-[320px] md:max-w-full object-contain"
-            loading="lazy"
           />
           
           {data.attachments.length > 1 && (
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 402dcc9..b506531 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -21,6 +21,11 @@
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
+  <url>
+    <loc>http://192.168.2.200:3001/products/crossbody-bags/chic-leather-crossbody-bag-7</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
   <url>
     <loc>http://192.168.2.200:3001/products/fashion-handbags/chic-leather-crossbody-bag-2</loc>
     <changefreq>weekly</changefreq>
@@ -66,6 +71,11 @@
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
+  <url>
+    <loc>http://192.168.2.200:3001/products/crossbody-bags/elegant-leather-crossbody-bag-6</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
   <url>
     <loc>http://192.168.2.200:3001/products/fashion-handbags/chic-leather-crossbody-bag-3</loc>
     <changefreq>weekly</changefreq>