fix(phone-image): 修复代码块/表格转换DOM索引失效bug，增加重新生成按钮和中间栏表格样式

- convertCodeBlocks/convertTables: 改为每次重新find().first()替代缓存索引
- 修复replaceWith后jQuery集合中后续元素DOM引用失效的问题
- 新增'重新生成'按钮，强制重新渲染缩略图
- 新增中间栏content-flow-block表格CSS样式

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; }

public/static/js/phone-image.js

@@ -691,23 +691,14 @@ var PhoneImageEngine = (function () {
             Prism.highlightElement(this);
         });
 
-        // 找到所有代码块，逐个截图替换
+        // 逐个截图替换，每次重新查找避免 replaceWith 后索引失效
-        var $preBlocks = $staging.find('pre');
-        if ($preBlocks.length === 0) {
-            deferred.resolve();
-            return deferred.promise();
-        }
-
-        var idx = 0;
-        var total = $preBlocks.length;
-
         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');
+        // 逐个截图替换，每次重新查找避免 replaceWith 后索引失效
-        if ($tables.length === 0) {
-            deferred.resolve();
-            return deferred.promise();
-        }
-
-        var idx = 0;
-        var total = $tables.length;
-
         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();
             });
         }

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);