feat(phoneimage): 接入渲染管线逐页进度日志

public/static/js/phone-image.js

@@ -177,10 +177,12 @@ var PhoneImageEngine = (function () {
         // 防止并发渲染
         if (render._locked) {
             // 标记有待处理的渲染请求，当前渲染完成后会自动重试
+            PhoneImageLogPanel.log('渲染进行中，跳过本次请求', 'warn');
             render._pending = true;
             return deferred.reject('rendering').promise();
         }
         render._locked = true;
+        PhoneImageLogPanel.log('开始渲染...', 'info');
 
         pages = [];
         var sizeConfig = config.sizes[config.size] || config.sizes.xiaohongshu;
@@ -189,12 +191,15 @@ var PhoneImageEngine = (function () {
 
         // 从预览区读取已预处理的内容
         syncPreview();
+        PhoneImageLogPanel.log('同步预览区内容', 'info');
         var previewEl = document.getElementById('render-preview');
 
         // 等待预览区内所有图片加载完成，否则 getBoundingClientRect 测高为0
+        PhoneImageLogPanel.log('等待图片加载...', 'info');
         waitForImages(previewEl).then(function () {
             var cleanHtml = previewEl ? previewEl.innerHTML : '';
             var blocks = parseHtmlToBlocks(cleanHtml);
+            PhoneImageLogPanel.log('解析内容: ' + blocks.length + ' 个块', 'info');
 
             // 空内容检测
             if (blocks.length === 0) {
@@ -205,13 +210,16 @@ var PhoneImageEngine = (function () {
 
             // 封面页
             pages.push(generateCoverPage(sizeConfig));
+            PhoneImageLogPanel.log('生成封面页', 'info');
 
             // 内容分页
+            PhoneImageLogPanel.log('分页计算中...', 'info');
             captureEditorBlocks(cleanHtml, blocks, contentAreaHeight, sizeConfig).then(function(contentPages) {
                 pages = pages.concat(contentPages);
 
                 // 尾页
                 pages.push(generateSummaryPage(sizeConfig, pages.length));
+                PhoneImageLogPanel.log('生成尾页', 'info');
 
                 // 页码 N/M
                 var totalPages = pages.length;
@@ -226,6 +234,7 @@ var PhoneImageEngine = (function () {
 
                 // 渲染缩略图
                 renderThumbnails(sizeConfig).then(function() {
+                    PhoneImageLogPanel.log('渲染完成，共 ' + pages.length + ' 页', 'success');
                     render._locked = false;
                     if (render._pending) {
                         render._pending = false;
@@ -233,10 +242,12 @@ var PhoneImageEngine = (function () {
                     }
                     deferred.resolve(pages);
                 }).catch(function(err) {
+                    PhoneImageLogPanel.log('渲染失败: ' + err, 'error');
                     render._locked = false;
                     deferred.reject(err);
                 });
             }).catch(function(err) {
+                PhoneImageLogPanel.log('分页计算失败: ' + err, 'error');
                 render._locked = false;
                 deferred.reject(err);
             });
@@ -1034,7 +1045,7 @@ var PhoneImageEngine = (function () {
      *   sizeConfig: 尺寸配置(用于纯图片页canvas渲染)
      * @returns {jQuery Deferred} resolves with array of dataURL strings or canvas objects
      */
-    function doCapturePages(opts) {
+    function doCapturePages(opts, pageProgressCallback) {
         var deferred = $.Deferred();
         ensureStaging();
 
@@ -1061,7 +1072,7 @@ var PhoneImageEngine = (function () {
                 // html2canvas会跳过visibility:hidden的元素，临时切换为可见
                 $staging.css({ visibility: 'visible' });
                 // 表格和代码块已在中间栏中转为图片，无需再次转换
-                runCaptureLoop($staging, opts, deferred);
+                runCaptureLoop($staging, opts, deferred, pageProgressCallback);
             });
         });
 
@@ -1074,7 +1085,7 @@ var PhoneImageEngine = (function () {
      * @param {Object} opts - 截图选项
      * @param {jQuery Deferred} deferred - 外部deferred
      */
-    function runCaptureLoop($staging, opts, deferred) {
+    function runCaptureLoop($staging, opts, deferred, pageProgressCallback) {
         var $pageElems = $staging.find('.phone-image-page');
         if ($pageElems.length === 0) {
             $staging.css({ visibility: 'hidden' });
@@ -1108,16 +1119,18 @@ var PhoneImageEngine = (function () {
                         // 保存模式: 高质量绘制原图到canvas
                         renderPureImageToCanvas(pureSrc, opts.sizeConfig.width, opts.sizeConfig.height).then(function (canvas) {
                             results.push(canvas);
+                            if (pageProgressCallback) pageProgressCallback(idx + 1, total);
                             idx++;
                             captureNext();
                         }).catch(function () {
                             // 加载失败，回退到html2canvas
-                            capturePageViaHtml2Canvas($elem, $staging, opts, results, deferred, function () { idx++; captureNext(); });
+            capturePageViaHtml2Canvas($elem, $staging, opts, results, deferred, function () { if (pageProgressCallback) pageProgressCallback(idx + 1, total); idx++; captureNext(); });
                         });
                         return;
                     } else {
                         // 缩略图模式: 直接用src
                         results.push(pureSrc);
+                        if (pageProgressCallback) pageProgressCallback(idx + 1, total);
                         idx++;
                         captureNext();
                         return;
@@ -1169,6 +1182,8 @@ var PhoneImageEngine = (function () {
             outputCanvas: false,
             quality: 0.85,
             sizeConfig: sizeConfig
+        }, function (current, total) {
+            PhoneImageLogPanel.log('截图: 第 ' + current + '/' + total + ' 页', 'info');
         }).then(function (dataUrls) {
             displayThumbnails(dataUrls, sizeConfig);
             deferred.resolve(pages);
@@ -1574,6 +1589,7 @@ var PhoneImageEngine = (function () {
         syncPreview: syncPreview,
         setPageAlignment: setPageAlignment,
         exportLongImage: exportLongImage,
+        logPanel: PhoneImageLogPanel,
         getContentHtml: function () {
             if (window.phoneImageEditor) {
                 return window.phoneImageEditor.getHtml();

view/admin/post/phone_image.html

@@ -500,12 +500,9 @@
                         $.extend(newConfig, extraConfig);
                     }
                     PhoneImageEngine.updateConfig(newConfig);
-                    var loadIdx = layer.load();
                     PhoneImageEngine.render().then(function (pages) {
-                        layer.close(loadIdx);
                         layer.msg('排版完成，共 ' + pages.length + ' 页');
                     }).catch(function (err) {
-                        layer.close(loadIdx);
                         if (err !== 'rendering') {
                             layer.msg('渲染失败: ' + err);
                         }