From d35172e14edbabb91f7a4852cd1c7bf31bd572cb Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Sun, 3 May 2026 10:07:13 +0800
Subject: [PATCH] fix(phone-image): fix blank thumbnail preview - visibility
 and wrapper

---
 public/static/js/phone-image.js | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js
index dc35539..a0b44a3 100644
--- a/public/static/js/phone-image.js
+++ b/public/static/js/phone-image.js
@@ -702,17 +702,23 @@ var PhoneImageEngine = (function () {
         var $staging = $('#render-staging');
         $staging.empty();
 
-        // 渲染所有页面到隐藏区域
+        // 渲染所有页面到隐藏区域（使用wrapper以便html2canvas正确渲染）
+        var sizeClass = 'size-' + config.size;
+        var $wrapper = $('<div class="phone-image-container ' + sizeClass + '">');
         for (var i = 0; i < pages.length; i++) {
-            $staging.append(pages[i].html);
+            $wrapper.append(pages[i].html);
         }
+        $staging.append($wrapper);
 
         // 等待一帧确保 DOM 渲染完成
         requestAnimationFrame(function () {
+            // html2canvas会跳过visibility:hidden的元素，临时切换为可见
+            $staging.css({ visibility: 'visible' });
             // 先转换代码块为图片
             convertCodeBlocks().then(function () {
                 var $pageElems = $staging.find('.phone-image-page');
                 if ($pageElems.length === 0) {
+                    $staging.css({ visibility: 'hidden' });
                     displayThumbnails([], sizeConfig);
                     deferred.resolve(pages);
                     return;
@@ -726,6 +732,7 @@ var PhoneImageEngine = (function () {
                 function captureNext() {
                     if (idx >= total) {
                         $staging.empty();
+                        $staging.css({ visibility: 'hidden' });
                         displayThumbnails(thumbnailDataUrls, sizeConfig);
                         deferred.resolve(pages);
                         return;
@@ -744,6 +751,7 @@ var PhoneImageEngine = (function () {
                         idx++;
                         captureNext();
                     }).catch(function (err) {
+                        $staging.css({ visibility: 'hidden' });
                         deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
                     });
                 }
@@ -753,6 +761,7 @@ var PhoneImageEngine = (function () {
                 // 代码块转换失败，继续截图流程
                 var $pageElems = $staging.find('.phone-image-page');
                 if ($pageElems.length === 0) {
+                    $staging.css({ visibility: 'hidden' });
                     displayThumbnails([], sizeConfig);
                     deferred.resolve(pages);
                     return;
@@ -765,6 +774,7 @@ var PhoneImageEngine = (function () {
                 function captureNext() {
                     if (idx >= total) {
                         $staging.empty();
+                        $staging.css({ visibility: 'hidden' });
                         displayThumbnails(thumbnailDataUrls, sizeConfig);
                         deferred.resolve(pages);
                         return;
@@ -783,6 +793,7 @@ var PhoneImageEngine = (function () {
                         idx++;
                         captureNext();
                     }).catch(function (err) {
+                        $staging.css({ visibility: 'hidden' });
                         deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
                     });
                 }
@@ -861,10 +872,13 @@ var PhoneImageEngine = (function () {
         $staging.append($wrapper);
 
         requestAnimationFrame(function () {
+            // html2canvas会跳过visibility:hidden的元素，临时切换为可见
+            $staging.css({ visibility: 'visible' });
             // 先转换代码块为图片
             convertCodeBlocks().then(function () {
                 var $pageElems = $staging.find('.phone-image-page');
                 if ($pageElems.length === 0) {
+                    $staging.css({ visibility: 'hidden' });
                     deferred.reject('没有可渲染的页面');
                     return;
                 }
@@ -876,6 +890,7 @@ var PhoneImageEngine = (function () {
                 function captureNext() {
                     if (idx >= total) {
                         $staging.empty();
+                        $staging.css({ visibility: 'hidden' });
                         deferred.resolve(canvases);
                         return;
                     }
@@ -892,6 +907,7 @@ var PhoneImageEngine = (function () {
                         idx++;
                         captureNext();
                     }).catch(function (err) {
+                        $staging.css({ visibility: 'hidden' });
                         deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
                     });
                 }
@@ -901,6 +917,7 @@ var PhoneImageEngine = (function () {
                 // 代码块转换失败，继续截图流程
                 var $pageElems = $staging.find('.phone-image-page');
                 if ($pageElems.length === 0) {
+                    $staging.css({ visibility: 'hidden' });
                     deferred.reject('没有可渲染的页面');
                     return;
                 }
@@ -912,6 +929,7 @@ var PhoneImageEngine = (function () {
                 function captureNext() {
                     if (idx >= total) {
                         $staging.empty();
+                        $staging.css({ visibility: 'hidden' });
                         deferred.resolve(canvases);
                         return;
                     }
@@ -928,6 +946,7 @@ var PhoneImageEngine = (function () {
                         idx++;
                         captureNext();
                     }).catch(function (err) {
+                        $staging.css({ visibility: 'hidden' });
                         deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
                     });
                 }