From a9ea9d48624d8972546a9d43335f454538a4bbb5 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Mon, 2 Mar 2026 03:39:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B8=AE=E5=8A=A9=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=94=BE=E5=A4=A7=EF=BC=88lightbox=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

点击支付页右侧帮助区域的联系二维码图片，在屏幕正中以全屏遮罩放大展示；
点击背景或再次点击可关闭。
---
 docker-compose.app.yml |  3 +++
 src/app/pay/page.tsx   | 18 +++++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/docker-compose.app.yml b/docker-compose.app.yml
index b603db8..c5eaa89 100644
--- a/docker-compose.app.yml
+++ b/docker-compose.app.yml
@@ -12,4 +12,7 @@ services:
     ports:
       - '${APP_PORT:-3001}:3000'
     env_file: .env
+    volumes:
+      # 宿主机 uploads 目录挂载到 Next.js public/uploads，可通过 /uploads/* 访问
+      - ./uploads:/app/public/uploads:ro
     restart: unless-stopped
diff --git a/src/app/pay/page.tsx b/src/app/pay/page.tsx
index e749318..5f8824e 100644
--- a/src/app/pay/page.tsx
+++ b/src/app/pay/page.tsx
@@ -62,6 +62,7 @@ function PayContent() {
     maxDailyAmount: 0,
   });
   const [userNotFound, setUserNotFound] = useState(false);
+  const [helpImageOpen, setHelpImageOpen] = useState(false);
 
   const effectiveUserId = resolvedUserId || userId;
   const isEmbedded = uiMode === 'embedded' && isIframeContext;
@@ -432,7 +433,8 @@ function PayContent() {
                       <img
                         src={helpImageUrl}
                         alt='help'
-                        className='mt-3 max-h-40 w-full rounded-lg object-contain bg-white/70 p-2'
+                        onClick={() => setHelpImageOpen(true)}
+                        className='mt-3 max-h-40 w-full cursor-zoom-in rounded-lg object-contain bg-white/70 p-2'
                       />
                     )}
                     {helpText && (
@@ -467,6 +469,20 @@ function PayContent() {
       {step === 'result' && (
         <OrderStatus status={finalStatus} onBack={handleBack} dark={isDark} />
       )}
+
+      {helpImageOpen && helpImageUrl && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm"
+          onClick={() => setHelpImageOpen(false)}
+        >
+          <img
+            src={helpImageUrl}
+            alt='help'
+            className='max-h-[90vh] max-w-full rounded-xl object-contain shadow-2xl'
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
     </PayPageLayout>
   );
 }