From 2233b2b71acd1703be3cd27be7cdb55edf49f874 Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Sun, 3 May 2026 22:56:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(phone-image):=20=E4=BF=AE=E5=A4=8D=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E5=9D=97/=E8=A1=A8=E6=A0=BC=E8=BD=AC=E6=8D=A2DOM?=
 =?UTF-8?q?=E7=B4=A2=E5=BC=95=E5=A4=B1=E6=95=88bug=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=87=8D=E6=96=B0=E7=94=9F=E6=88=90=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=92=8C=E4=B8=AD=E9=97=B4=E6=A0=8F=E8=A1=A8=E6=A0=BC=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- convertCodeBlocks/convertTables: 改为每次重新find().first()替代缓存索引
- 修复replaceWith后jQuery集合中后续元素DOM引用失效的问题
- 新增'重新生成'按钮，强制重新渲染缩略图
- 新增中间栏content-flow-block表格CSS样式
---
 public/static/css/phone-image-templates.css |  6 ++++
 public/static/js/phone-image.js             | 38 ++++++---------------
 view/admin/post/phone_image.html            |  7 ++++
 3 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/public/static/css/phone-image-templates.css b/public/static/css/phone-image-templates.css
index 89e1aa5..8512105 100644
--- a/public/static/css/phone-image-templates.css
+++ b/public/static/css/phone-image-templates.css
@@ -591,3 +591,9 @@
     border: none;
     padding: 0;
 }
+
+/* 中间栏表格样式 */
+.content-flow-block table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
+.content-flow-block th { background-color: #f0f0f0; font-weight: bold; padding: 8px 10px; border: 1px solid #ddd; text-align: left; }
+.content-flow-block td { padding: 8px 10px; border: 1px solid #ddd; }
+.content-flow-block tr:nth-child(even) td { background-color: #f9f9f9; }
diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js
index fa49425..a9a97f9 100644
--- a/public/static/js/phone-image.js
+++ b/public/static/js/phone-image.js
@@ -691,23 +691,14 @@ var PhoneImageEngine = (function () {
             Prism.highlightElement(this);
         });
 
-        // 找到所有代码块，逐个截图替换
-        var $preBlocks = $staging.find('pre');
-        if ($preBlocks.length === 0) {
-            deferred.resolve();
-            return deferred.promise();
-        }
-
-        var idx = 0;
-        var total = $preBlocks.length;
-
+        // 逐个截图替换，每次重新查找避免 replaceWith 后索引失效
         function convertNext() {
-            if (idx >= total) {
+            var $pre = $staging.find('pre').first();
+            if ($pre.length === 0) {
                 deferred.resolve();
                 return;
             }
 
-            var $pre = $preBlocks.eq(idx);
             html2canvas($pre[0], {
                 scale: 2,
                 useCORS: true,
@@ -724,11 +715,10 @@ var PhoneImageEngine = (function () {
                     margin: '10px 0'
                 });
                 $pre.replaceWith($img);
-                idx++;
                 convertNext();
             }).catch(function () {
-                // 截图失败则保留原始代码块
-                idx++;
+                // 截图失败则跳过当前元素继续处理下一个
+                $pre.remove();
                 convertNext();
             });
         }
@@ -746,22 +736,14 @@ var PhoneImageEngine = (function () {
         var deferred = $.Deferred();
         var $staging = $('#render-staging');
 
-        var $tables = $staging.find('.page-content table');
-        if ($tables.length === 0) {
-            deferred.resolve();
-            return deferred.promise();
-        }
-
-        var idx = 0;
-        var total = $tables.length;
-
+        // 逐个截图替换，每次重新查找避免 replaceWith 后索引失效
         function convertNext() {
-            if (idx >= total) {
+            var $table = $staging.find('.page-content table').first();
+            if ($table.length === 0) {
                 deferred.resolve();
                 return;
             }
 
-            var $table = $tables.eq(idx);
             html2canvas($table[0], {
                 scale: 2,
                 useCORS: true,
@@ -778,10 +760,10 @@ var PhoneImageEngine = (function () {
                     margin: '10px 0'
                 });
                 $table.replaceWith($img);
-                idx++;
                 convertNext();
             }).catch(function () {
-                idx++;
+                // 截图失败则跳过当前元素继续处理下一个
+                $table.remove();
                 convertNext();
             });
         }
diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html
index df366ef..f16b420 100644
--- a/view/admin/post/phone_image.html
+++ b/view/admin/post/phone_image.html
@@ -144,6 +144,8 @@
 
                 <!-- 操作按钮 -->
                 <div class="action-btns">
+                    <button type="button" class="layui-btn layui-btn-primary" id="btn-rerender"><i
+                            class="layui-icon layui-icon-refresh"></i> 重新生成</button>
                     <button type="button" class="layui-btn layui-btn-normal" id="btn-save"><i
                             class="layui-icon layui-icon-ok"></i> 保存</button>
                     <button type="button" class="layui-btn layui-btn-normal" id="btn-generate"><i
@@ -241,6 +243,11 @@
                 }, 300);
             }
 
+            // 重新生成（强制重新渲染缩略图）
+            $('#btn-rerender').click(function () {
+                doRender();
+            });
+
             // 保存配置（不生成图片）
             $('#btn-save').click(function () {
                 var btn = $(this);