From f79b99b5819f1bc43cb3eebe99a21ef64e612930 Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Wed, 8 Jul 2026 19:39:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(share):=20=E5=A4=AA=E9=98=B3=E7=A0=81?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=20flex=20=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/pages/SharePage.tsx | 33 ++++++++++++++++++----------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/pages/SharePage.tsx b/frontend/src/app/pages/SharePage.tsx
index 621a05c..20cf180 100644
--- a/frontend/src/app/pages/SharePage.tsx
+++ b/frontend/src/app/pages/SharePage.tsx
@@ -33,9 +33,9 @@ function supportsWxMiniProgramShare(): boolean {
   } catch { return false; }
 }
 
-
-/** 模块级状态：避免构建压缩时变量名不一致导致 ReferenceError */
-const _wp = { url: null as string | null, tick: 0 };
+
+/** 模块级状态：避免构建压缩时变量名不一致导致 ReferenceError */
+const _wp = { url: null as string | null, tick: 0 };
 export function SharePage() {
   const navigate = useNavigate();
   const { reportId } = useParams();
@@ -137,15 +137,20 @@ export function SharePage() {
 
     try {
       // html-to-image: 将 DOM 节点转为 PNG data URL
-      const dataUrl = await toPng(cardRef.current, {
-        cacheBust: true,
-        pixelRatio: 2, // 2x 高清
-        backgroundColor: "#ffffff",
-        style: {
-          // 确保截图时移除圆角阴影的裁切问题
-          borderRadius: "0",
-        },
-      });
+      // 注意：不能用 cacheBust，会破坏 blob: URL
+      const dataUrl = await Promise.race([
+        toPng(cardRef.current, {
+          pixelRatio: 2, // 2x 高清
+          backgroundColor: "#ffffff",
+          style: {
+            // 确保截图时移除圆角阴影的裁切问题
+            borderRadius: "0",
+          },
+        }),
+        new Promise<null>((_, reject) =>
+          setTimeout(() => reject(new Error("截图超时")), 10000)
+        ),
+      ]);
       return dataUrl;
     } catch (err) {
       console.error("生成图片失败:", err);
@@ -675,6 +680,9 @@ function ShareCardContent({
               textAlign: "center",
               paddingTop: "20px",
               borderTop: "1px dashed #e5e7eb",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
             }}
           >
             <img
@@ -682,6 +690,7 @@ function ShareCardContent({
               alt="扫码下载孕育无忧"
               crossOrigin="anonymous"
               style={{
+
                 width: 200,
                 height: 200,
                 borderRadius: 8,