feat(typesetting): Wave 2 - 流式渲染、表格字号独立控制、作者声明

- 缩略图改为流式渲染，截图一页即显示一页
- 新增tableFontScale独立控制表格字号，含后端持久化
- 内容页顶部添加作者声明(文/作者名)，空值隐藏

app/common/tools/PhoneImage.php

@@ -20,6 +20,7 @@ class PhoneImage implements PostOutputManagerInterface
             'watermark' => ['type' => 'text', 'default' => ''],
             'pageAlignments' => ['type' => 'json', 'default' => '{}'],
             'fontScale' => ['type' => 'number', 'default' => 1, 'min' => 0.5, 'max' => 2.0],
+            'tableFontScale' => ['type' => 'number', 'default' => 1, 'min' => 0.5, 'max' => 2.0],
         ];
     }
 
@@ -45,6 +46,12 @@ class PhoneImage implements PostOutputManagerInterface
                 return false;
             }
         }
+        if (isset($config['tableFontScale'])) {
+            $scale = floatval($config['tableFontScale']);
+            if ($scale < 0.5 || $scale > 2.0) {
+                return false;
+            }
+        }
         // watermark 是文本类型，无需特殊验证
         // pageAlignments 是 JSON 类型，存储时由框架自动序列化
 

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

@@ -50,6 +50,7 @@
     --pi-radius: 12px;
     /* 字体 */
     --pi-font-family: 'Source Han Sans', 'SourceHanSans-Normal', sans-serif;
+    --pi-table-font-scale: 1;
 }
 
 /* ============================================
@@ -251,6 +252,16 @@
     margin-top: var(--pi-spacing-sm);
 }
 
+/* 内容页 - 作者声明 */
+.author-credit {
+    font-size: 11px;
+    color: #999;
+    padding-bottom: 8px;
+    margin-bottom: 12px;
+    border-bottom: 1px solid #eee;
+    text-indent: 0;
+}
+
 /* 内容页 - 正文区域 */
 .page-content {
     flex: 1;
@@ -600,7 +611,7 @@
    ============================================ */
 
 /* 表格美化样式（html2canvas兼容） */
-.page-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(13px * var(--pi-font-scale, 1)); }
+.page-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(13px * var(--pi-table-font-scale, 1)); }
 .page-content th { background-color: #f0f0f0; font-weight: bold; padding: 4px 10px; border: 1px solid #ddd; text-align: left; }
 .page-content td { padding: 4px 10px; border: 1px solid #ddd; }
 .page-content tr:nth-child(even) td { background-color: #f9f9f9; }
@@ -628,7 +639,7 @@
 }
 
 /* 中间栏表格样式 */
-.content-flow-block table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(13px * var(--pi-font-scale, 1)); }
+.content-flow-block table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(13px * var(--pi-table-font-scale, 1)); }
 .content-flow-block th { background-color: #f0f0f0; font-weight: bold; padding: 4px 10px; border: 1px solid #ddd; text-align: left; }
 .content-flow-block td { padding: 4px 10px; border: 1px solid #ddd; }
 .content-flow-block tr:nth-child(even) td { background-color: #f9f9f9; }

public/static/js/phone-image.js

@@ -99,7 +99,8 @@ var PhoneImageEngine = (function () {
             douyin: { width: 540, height: 960 }
         },
         contentPadding: 20,
-        fontScale: 1
+        fontScale: 1,
+        tableFontScale: 1
     };
 
     // ===== 文章数据 =====
@@ -159,10 +160,17 @@ var PhoneImageEngine = (function () {
      */
     function applyFontScale() {
         var scale = config.fontScale || 1;
+        var tableScale = config.tableFontScale || 1;
         var preview = document.getElementById('render-preview');
-        if (preview) preview.style.setProperty('--pi-font-scale', scale);
+        if (preview) {
+            preview.style.setProperty('--pi-font-scale', scale);
+            preview.style.setProperty('--pi-table-font-scale', tableScale);
+        }
         var staging = document.getElementById('render-staging');
-        if (staging) staging.style.setProperty('--pi-font-scale', scale);
+        if (staging) {
+            staging.style.setProperty('--pi-font-scale', scale);
+            staging.style.setProperty('--pi-table-font-scale', tableScale);
+        }
     }
 
     /**
@@ -914,6 +922,11 @@ var PhoneImageEngine = (function () {
             html += '</div>';
         }
 
+        // 作者声明（所有内容页）
+        if (postData.author_name) {
+            html += '<div class="author-credit">文/' + escapeHtml(postData.author_name) + '</div>';
+        }
+
         // 正文内容区
         html += '<div class="page-content">';
         for (var i = 0; i < blocks.length; i++) {
@@ -1125,17 +1138,19 @@ var PhoneImageEngine = (function () {
                         // 保存模式: 高质量绘制原图到canvas
                         renderPureImageToCanvas(pureSrc, opts.sizeConfig.width, opts.sizeConfig.height).then(function (canvas) {
                             results.push(canvas);
+                            if (opts.streaming && opts.onPageReady) opts.onPageReady(canvas, idx);
                             if (pageProgressCallback) pageProgressCallback(idx + 1, total);
                             idx++;
                             captureNext();
                         }).catch(function () {
                             // 加载失败，回退到html2canvas
-            capturePageViaHtml2Canvas($elem, $staging, opts, results, deferred, function () { if (pageProgressCallback) pageProgressCallback(idx + 1, total); idx++; captureNext(); });
+            capturePageViaHtml2Canvas($elem, $staging, opts, results, deferred, function () { if (opts.streaming && opts.onPageReady) opts.onPageReady(results[results.length - 1], idx); if (pageProgressCallback) pageProgressCallback(idx + 1, total); idx++; captureNext(); });
                         });
                         return;
                     } else {
                         // 缩略图模式: 直接用src
                         results.push(pureSrc);
+                        if (opts.streaming && opts.onPageReady) opts.onPageReady(pureSrc, idx);
                         if (pageProgressCallback) pageProgressCallback(idx + 1, total);
                         idx++;
                         captureNext();
@@ -1144,7 +1159,7 @@ var PhoneImageEngine = (function () {
                 }
             }
 
-            capturePageViaHtml2Canvas($elem, $staging, opts, results, deferred, function () { idx++; captureNext(); });
+            capturePageViaHtml2Canvas($elem, $staging, opts, results, deferred, function () { if (opts.streaming && opts.onPageReady) opts.onPageReady(results[results.length - 1], idx); idx++; captureNext(); });
         }
 
         captureNext();
@@ -1183,15 +1198,22 @@ var PhoneImageEngine = (function () {
     function renderThumbnails(sizeConfig) {
         var deferred = $.Deferred();
 
+        // 流式渲染：先清空容器，再逐页追加缩略图
+        initThumbnails(sizeConfig);
+
         doCapturePages({
             scale: 1,
             outputCanvas: false,
             quality: 0.85,
-            sizeConfig: sizeConfig
+            sizeConfig: sizeConfig,
+            streaming: true,
+            onPageReady: function (dataUrl, pageIndex) {
+                appendThumbnail(dataUrl, pageIndex, sizeConfig, pages[pageIndex]);
+            }
         }, function (current, total) {
             PhoneImageLogPanel.log('截图: 第 ' + current + '/' + total + ' 页', 'info');
         }).then(function (dataUrls) {
-            displayThumbnails(dataUrls, sizeConfig);
+            updateThumbnailPageNumbers(dataUrls.length);
             deferred.resolve(pages);
         }).catch(function (err) {
             deferred.reject(err);
@@ -1201,51 +1223,69 @@ var PhoneImageEngine = (function () {
     }
 
     /**
-     * 在右侧显示缩略图
+     * 初始化缩略图容器（流式渲染第一步：清空容器）
-     * @param {Array} dataUrls - base64 图片数据
      * @param {Object} sizeConfig
      */
-    function displayThumbnails(dataUrls, sizeConfig) {
+    function initThumbnails(sizeConfig) {
         var $preview = $('#paginated-preview');
         if (!$preview.length) return;
-
         $preview.empty();
-        if (dataUrls.length === 0) return;
+    }
+
+    /**
+     * 追加单个缩略图到预览区（流式渲染：每页截图完成后立即追加）
+     * @param {string} dataUrl - base64 图片数据或图片src
+     * @param {number} pageIndex - 页面索引(0-based)
+     * @param {Object} sizeConfig
+     * @param {Object} pageData - 页面对象 { type, pageNum, ... }
+     */
+    function appendThumbnail(dataUrl, pageIndex, sizeConfig, pageData) {
+        var $preview = $('#paginated-preview');
+        if (!$preview.length) return;
 
         // 计算缩放比例：缩略图高度 = 容器高度 - 40(页码标签) - 40(上下padding)
         var containerHeight = $preview.parent().height() || 700;
         var scaleRatio = (containerHeight - 80) / sizeConfig.height;
         var thumbWidth = Math.round(sizeConfig.width * scaleRatio);
 
-        for (var i = 0; i < dataUrls.length; i++) {
+        var $item = $('<div class="preview-thumb-item" data-page-index="' + pageIndex + '">');
-            var $item = $('<div class="preview-thumb-item" data-page-index="' + i + '">');
+        $item.css('width', thumbWidth + 'px');
-            $item.css('width', thumbWidth + 'px');
 
-            var $img = $('<img>');
+        var $img = $('<img>');
-            $img.attr('src', dataUrls[i]);
+        $img.attr('src', dataUrl);
-            $img.css('width', thumbWidth + 'px');
+        $img.css('width', thumbWidth + 'px');
-            $item.append($img);
+        $item.append($img);
 
-            // 页码
+        // 页码（初始只显示序号，全部完成后更新为 N/M）
-            var $pageNum = $('<span class="preview-thumb-page-num">' + (i + 1) + '/' + dataUrls.length + '</span>');
+        var $pageNum = $('<span class="preview-thumb-page-num">' + (pageIndex + 1) + '</span>');
-            $item.append($pageNum);
+        $item.append($pageNum);
 
-            // 对齐按钮（仅内容页）
+        // 对齐按钮（仅内容页）
-            if (pages[i] && pages[i].type === 'content') {
+        if (pageData && pageData.type === 'content') {
-                var pageNum = pages[i].pageNum || (i);
+            var pageNum = pageData.pageNum || (pageIndex);
-                var currentAlign = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
+            var currentAlign = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
-                var isActiveCenter = currentAlign === 'center';
+            var isActiveCenter = currentAlign === 'center';
-                var isActiveBottom = currentAlign === 'bottom';
+            var isActiveBottom = currentAlign === 'bottom';
-                var activeClass = isActiveCenter ? ' active-center' : (isActiveBottom ? ' active-bottom' : '');
+            var activeClass = isActiveCenter ? ' active-center' : (isActiveBottom ? ' active-bottom' : '');
-                var symbol = isActiveCenter ? '\u2195' : (isActiveBottom ? '\u2193' : '\u2191');
+            var symbol = isActiveCenter ? '\u2195' : (isActiveBottom ? '\u2193' : '\u2191');
-                var $toggle = $('<button class="thumb-alignment-toggle' + activeClass + '" data-page-index="' + i + '" data-page-num="' + pageNum + '">' +
+            var $toggle = $('<button class="thumb-alignment-toggle' + activeClass + '" data-page-index="' + pageIndex + '" data-page-num="' + pageNum + '">' +
-                    symbol +
+                symbol +
-                    '</button>');
+                '</button>');
-                $item.append($toggle);
+            $item.append($toggle);
-            }
-
-            $preview.append($item);
         }
+
+        $preview.append($item);
+    }
+
+    /**
+     * 更新所有缩略图页码为 N/M 格式（流式渲染全部完成后调用）
+     * @param {number} totalPages
+     */
+    function updateThumbnailPageNumbers(totalPages) {
+        var $items = $('#paginated-preview .preview-thumb-item');
+        $items.each(function (i) {
+            $(this).find('.preview-thumb-page-num').text((i + 1) + '/' + totalPages);
+        });
     }
 
     /**

view/admin/post/phone_image.html

@@ -285,7 +285,8 @@
             var currentConfig = {
                 size: 'xiaohongshu',
                 watermark: '',
-                fontScale: 1
+                fontScale: 1,
+                tableFontScale: 1
             };
 
             var postData = {
@@ -306,13 +307,15 @@
                 size: savedConfig.size || 'xiaohongshu',
                 watermark: savedConfig.watermark || '',
                 pageAlignments: savedConfig.pageAlignments || {},
-                fontScale: savedConfig.fontScale || 1
+                fontScale: savedConfig.fontScale || 1,
+                tableFontScale: savedConfig.tableFontScale || 1
             };
 
             // 同步当前配置
             currentConfig.size = initConfig.size;
             currentConfig.watermark = initConfig.watermark;
             currentConfig.fontScale = initConfig.fontScale;
+            currentConfig.tableFontScale = initConfig.tableFontScale;
 
             // ========== wangeditor 初始化 ==========
             var E = window.wangEditor;
@@ -467,6 +470,7 @@
                     size: currentConfig.size,
                     watermark: currentConfig.watermark,
                     fontScale: currentConfig.fontScale || 1,
+                    tableFontScale: currentConfig.tableFontScale || 1,
                     content_html: PhoneImageEngine.getContentHtml()
                 }, saveConfigUrl).then(function(data) {
                     if (data.output_id) lastOutputId = data.output_id;
@@ -533,13 +537,27 @@
                 settingsHtml += '<input type="text" name="s_watermark" value="' + (currentConfig.watermark || '') + '" placeholder="可选水印文字" class="layui-input">';
                 settingsHtml += '</div>';
                 settingsHtml += '</div>';
+                settingsHtml += '<div class="layui-form-item">';
+                settingsHtml += '<label class="layui-form-label">表格字号</label>';
+                settingsHtml += '<div class="layui-input-block">';
+                settingsHtml += '<select name="s_table_font_scale">';
+                var tblScaleVal = currentConfig.tableFontScale || 1;
+                var tblPresets = [0.5, 0.8, 1.0, 1.2, 1.5, 2.0];
+                var tblIsPreset = tblPresets.indexOf(tblScaleVal) !== -1;
+                for (var pi = 0; pi < tblPresets.length; pi++) {
+                    settingsHtml += '<option value="' + tblPresets[pi] + '"' + (tblScaleVal === tblPresets[pi] ? ' selected' : '') + '>' + tblPresets[pi] + 'x</option>';
+                }
+                settingsHtml += '<option value="custom"' + (!tblIsPreset ? ' selected' : '') + '>自定义</option>';
+                settingsHtml += '</select>';
+                settingsHtml += '</div>';
+                settingsHtml += '</div>';
                 settingsHtml += '</form>';
                 settingsHtml += '</div>';
 
                 layer.open({
                     type: 1,
                     title: '排版设置',
-                    area: ['400px', '220px'],
+                    area: ['400px', '280px'],
                     content: settingsHtml,
                     btn: ['确定', '取消'],
                     success: function (layero) {
@@ -548,8 +566,10 @@
                     yes: function (index, layero) {
                         currentConfig.size = layero.find('[name="s_size"]').val();
                         currentConfig.watermark = layero.find('[name="s_watermark"]').val();
+                        var tblScaleSel = layero.find('[name="s_table_font_scale"]').val();
+                        currentConfig.tableFontScale = tblScaleSel === 'custom' ? (currentConfig.tableFontScale || 1) : parseFloat(tblScaleSel);
                         layer.close(index);
-                        PhoneImageLogPanel.log('应用新设置: 尺寸=' + currentConfig.size, 'info');
+                        PhoneImageLogPanel.log('应用新设置: 尺寸=' + currentConfig.size + ', 表格字号=' + (currentConfig.tableFontScale || 1) + 'x', 'info');
                         doRender();
                     }
                 });
@@ -562,7 +582,8 @@
                 renderTimer = setTimeout(function () {
                     var newConfig = {
                         size: currentConfig.size,
-                        watermark: currentConfig.watermark
+                        watermark: currentConfig.watermark,
+                        tableFontScale: currentConfig.tableFontScale || 1
                     };
                     if (extraConfig) {
                         $.extend(newConfig, extraConfig);
@@ -634,6 +655,7 @@
                         size: currentConfig.size,
                         watermark: currentConfig.watermark,
                         fontScale: currentConfig.fontScale || 1,
+                        tableFontScale: currentConfig.tableFontScale || 1,
                         content_html: PhoneImageEngine.getContentHtml()
                     }, saveConfigUrl).then(function (data) {
                         if (data.output_id) lastOutputId = data.output_id;
@@ -662,6 +684,7 @@
                     size: currentConfig.size,
                     watermark: currentConfig.watermark,
                     fontScale: currentConfig.fontScale || 1,
+                    tableFontScale: currentConfig.tableFontScale || 1,
                     content_html: PhoneImageEngine.getContentHtml()
                 }, saveConfigUrl).then(function (data) {
                     if (data.output_id) lastOutputId = data.output_id;
@@ -688,6 +711,7 @@
                     size: currentConfig.size,
                     watermark: currentConfig.watermark,
                     fontScale: currentConfig.fontScale || 1,
+                    tableFontScale: currentConfig.tableFontScale || 1,
                     content_html: PhoneImageEngine.getContentHtml()
                 }, function(current, total, canvas) {
                     if (total > 0) {
@@ -779,6 +803,7 @@
                     if (cfg.watermark !== undefined) historyConfig.watermark = cfg.watermark;
                     if (cfg.pageAlignments) historyConfig.pageAlignments = cfg.pageAlignments;
                     if (cfg.fontScale !== undefined) historyConfig.fontScale = cfg.fontScale;
+                    if (cfg.tableFontScale !== undefined) historyConfig.tableFontScale = cfg.tableFontScale;
 
                     // 同步当前配置
                     if (cfg.size) currentConfig.size = cfg.size;
@@ -787,6 +812,9 @@
                         currentConfig.fontScale = cfg.fontScale;
                         setFontScaleUI(cfg.fontScale);
                     }
+                    if (cfg.tableFontScale !== undefined) {
+                        currentConfig.tableFontScale = cfg.tableFontScale;
+                    }
 
                     lastOutputId = outputId;
                     PhoneImageLogPanel.log('历史配置已加载', 'success');