feat(phone-image): table-to-image conversion with beautified CSS styles

public/static/css/phone-image-templates.css

@@ -563,6 +563,13 @@
    Content Flow Code Blocks (中间栏代码块样式)
    仅用于编辑区中间栏, 不影响渲染页面
    ============================================ */
+
+/* 表格美化样式（html2canvas兼容） */
+.page-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
+.page-content th { background-color: #f0f0f0; font-weight: bold; padding: 8px 10px; border: 1px solid #ddd; text-align: left; }
+.page-content td { padding: 8px 10px; border: 1px solid #ddd; }
+.page-content tr:nth-child(even) td { background-color: #f9f9f9; }
+
 .content-flow pre {
     background: #f5f5f5;
     border: 1px solid #e0e0e0;

public/static/js/phone-image.js

@@ -249,6 +249,11 @@ var PhoneImageEngine = (function () {
                     block.type = tagName;
                     block.estimatedHeight = estimateHeadingHeight(tagName, $el.text());
                     break;
+                case 'table':
+                    block.type = 'table';
+                    block.html = $el[0].outerHTML;
+                    block.estimatedHeight = estimateTableHeight($el);
+                    break;
                 case 'img':
                     block.estimatedHeight = estimateImageHeight($el);
                     block.$img = $el;
@@ -341,6 +346,14 @@ var PhoneImageEngine = (function () {
         return estimateTextHeight(text, config.fontSize) + 10;
     }
 
+    /**
+     * 估算表格高度
+     */
+    function estimateTableHeight($table) {
+        var rows = $table.find('tr').length;
+        return rows * 36 + 20; // 36px per row (35px content + 1px border) + 20px margin
+    }
+
     // ===== 分页核心算法 =====
 
     /**
@@ -436,6 +449,11 @@ var PhoneImageEngine = (function () {
             return [block];
         }
 
+        // 表格块不拆分，保留原样
+        if (block.type === 'table') {
+            return [block];
+        }
+
         // 文本类块：按句子拆分
         var text = '';
         var wrapperTag = 'p';
@@ -690,6 +708,59 @@ var PhoneImageEngine = (function () {
         return deferred.promise();
     }
 
+    /**
+     * 将 #render-staging 中的表格转为图片
+     * 使用 html2canvas 截图替换（与 convertCodeBlocks 模式相同）
+     * @returns {jQuery Deferred} resolves when all tables are converted
+     */
+    function convertTables() {
+        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;
+
+        function convertNext() {
+            if (idx >= total) {
+                deferred.resolve();
+                return;
+            }
+
+            var $table = $tables.eq(idx);
+            html2canvas($table[0], {
+                scale: 2,
+                useCORS: true,
+                backgroundColor: '#ffffff',
+                logging: false
+            }).then(function (canvas) {
+                var imgData = canvas.toDataURL('image/jpeg', 0.92);
+                var $img = $('<img>');
+                $img.attr('src', imgData);
+                $img.css({
+                    maxWidth: '100%',
+                    height: 'auto',
+                    display: 'block',
+                    margin: '10px 0'
+                });
+                $table.replaceWith($img);
+                idx++;
+                convertNext();
+            }).catch(function () {
+                idx++;
+                convertNext();
+            });
+        }
+
+        convertNext();
+        return deferred.promise();
+    }
+
     /**
      * 渲染到隐藏区域 → 截图 → 显示缩略图
      * @param {Object} sizeConfig
@@ -716,6 +787,8 @@ var PhoneImageEngine = (function () {
             $staging.css({ visibility: 'visible' });
             // 先转换代码块为图片
             convertCodeBlocks().then(function () {
+                return convertTables();
+            }).then(function () {
                 var $pageElems = $staging.find('.phone-image-page');
                 if ($pageElems.length === 0) {
                     $staging.css({ visibility: 'hidden' });
@@ -758,7 +831,8 @@ var PhoneImageEngine = (function () {
 
                 captureNext();
             }).catch(function () {
-                // 代码块转换失败，继续截图流程
+                // 代码块转换失败，继续转换表格并截图流程
+                convertTables().then(function () {
                     var $pageElems = $staging.find('.phone-image-page');
                     if ($pageElems.length === 0) {
                         $staging.css({ visibility: 'hidden' });
@@ -801,6 +875,7 @@ var PhoneImageEngine = (function () {
                     captureNext();
                 });
             });
+        });
 
         return deferred.promise();
     }
@@ -876,6 +951,8 @@ var PhoneImageEngine = (function () {
             $staging.css({ visibility: 'visible' });
             // 先转换代码块为图片
             convertCodeBlocks().then(function () {
+                return convertTables();
+            }).then(function () {
                 var $pageElems = $staging.find('.phone-image-page');
                 if ($pageElems.length === 0) {
                     $staging.css({ visibility: 'hidden' });
@@ -914,7 +991,8 @@ var PhoneImageEngine = (function () {
 
                 captureNext();
             }).catch(function () {
-                // 代码块转换失败，继续截图流程
+                // 代码块转换失败，继续转换表格并截图流程
+                convertTables().then(function () {
                     var $pageElems = $staging.find('.phone-image-page');
                     if ($pageElems.length === 0) {
                         $staging.css({ visibility: 'hidden' });
@@ -954,6 +1032,7 @@ var PhoneImageEngine = (function () {
                     captureNext();
                 });
             });
+        });
 
         return deferred.promise();
     }