refactor(phone-image): wangeditor 排版引擎核心重构

- 两栏布局：取消左侧工具栏，中间改为wangeditor v5编辑器
- 顶部操作栏：设置/保存/生成并保存+更多下拉(历史/重新生成/下载/长图)
- 设置弹框：尺寸选择+水印输入，删除全局字号滑块
- wangeditor完整工具栏+divider分割线标记分页
- 删除旧渲染管线：renderContentFlow/insertPageBreak/removePageBreak/convertFlowBlocksToImages/measureBlockHeights
- 新增captureEditorBlocks：从编辑器DOM测高+按分割线分组+实际高度分页
- 新增exportLongImage：从wangeditor DOM截长图
- getContentHtml改为从wangeditor实例读取

public/static/js/phone-image.js

@@ -13,7 +13,6 @@ var PhoneImageEngine = (function () {
     // ===== 配置 =====
     var config = {
         size: 'xiaohongshu',
-        fontSize: 14,
         watermark: '',
         pageAlignments: {},  // key=页码(1-based), value='top'|'center'
         sizes: {
@@ -39,25 +38,6 @@ var PhoneImageEngine = (function () {
     // ===== 分页结果 =====
     var pages = [];
 
-    // ===== 截图缓存 =====
-    var convertedBlockCache = {};  // key: simpleHash(block.html), value: { imgHtml: '...' }
-
-    /**
-     * 简单字符串哈希 (djb2 变体)
-     * @param {string} str
-     * @returns {string} 哈希字符串
-     */
-    function simpleHash(str) {
-        var hash = 0;
-        if (!str) return '0';
-        for (var i = 0; i < str.length; i++) {
-            var char = str.charCodeAt(i);
-            hash = ((hash << 5) - hash) + char;
-            hash = hash & hash;  // 转32位整数
-        }
-        return '' + hash;
-    }
-
     /**
      * 确保隐藏渲染区域存在
      */
@@ -91,38 +71,11 @@ var PhoneImageEngine = (function () {
         if (userConfig) {
             $.extend(config, userConfig);
         }
-
-        // 清空缓存，避免旧数据干扰
-        convertedBlockCache = {};
-
-        // 内容流事件委托（只绑定一次）
-        $(document).off('click', '.break-inserter-btn');
-        $(document).off('click', '.remove-break-btn');
-        $(document).off('click', '.thumb-alignment-toggle');
-
-        $(document).on('click', '.break-inserter-btn', function () {
-            var afterIndex = parseInt($(this).parent().data('after-index'), 10);
-            insertPageBreak(afterIndex);
-        });
-
-        $(document).on('click', '.remove-break-btn', function () {
-            var index = parseInt($(this).data('index'), 10);
-            removePageBreak(index);
-        });
-
-        $(document).on('click', '.thumb-alignment-toggle', function () {
-            var pageNum = parseInt($(this).data('page-num'), 10);
-            var currentAlign = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
-            var newAlign = currentAlign === 'top' ? 'center' : 'top';
-
-            setPageAlignment(pageNum, newAlign);
-            render();
-        });
     }
 
     /**
      * 渲染排版预览 - 生成分页后的HTML
-     * 管线: preprocess -> parse -> renderContentFlow -> measure -> paginate -> generate -> renderThumbnails
+     * 管线: editorHtml -> parseHtmlToBlocks -> captureEditorBlocks -> generatePages -> renderThumbnails
      * 带并发锁：防止多次 render 同时执行造成数据混乱
      * @returns {jQuery Deferred} resolves with pages array
      */
@@ -142,52 +95,32 @@ var PhoneImageEngine = (function () {
         var pageHeight = sizeConfig.height;
         var contentAreaHeight = pageHeight - (config.contentPadding * 2);
 
-        var cleanHtml = preprocessContent(postData.content_html);
+        // 从 wangeditor 读取内容
+        var editorHtml = window.phoneImageEditor ? window.phoneImageEditor.getHtml() : postData.content_html;
+        var cleanHtml = preprocessContent(editorHtml);
         var blocks = parseHtmlToBlocks(cleanHtml);
 
-        // 动态设置字号CSS变量，让fontSize滑块真正生效
+        // 空内容检测
-        var effectiveFontSize = parseInt(config.fontSize, 10) || 14;
-        document.documentElement.style.setProperty('--pi-font-size-base', effectiveFontSize + 'px');
-
-        // 缓存清理：如果缓存条目过多则清空，防止内存膨胀
-        var cacheKeys = Object.keys(convertedBlockCache);
-        if (cacheKeys.length > blocks.length * 3) {
-            convertedBlockCache = {};
-        }
-
-        // 空内容检测：blocks 为空时直接提示，不进入渲染流程
         if (blocks.length === 0) {
             $('#paginated-preview').html('<div style="text-align:center;padding:60px 20px;color:#999;">文章正文内容为空</div>');
             render._locked = false;
             return deferred.resolve([]).promise();
         }
 
-        // 先渲染内容流(DOM) - 用于实测高度
-        renderContentFlow(blocks);
-
-        // 等待一帧确保中间栏渲染完成
-        requestAnimationFrame(function () {
-            // 在中间栏中将表格和代码块截图转为图片
-            convertFlowBlocksToImages(blocks).then(function () {
-                // 再等一帧让替换后的img渲染
-                requestAnimationFrame(function () {
-                    measureBlockHeights(blocks);
-
         // 封面页
         pages.push(generateCoverPage(sizeConfig));
 
-                    // 内容分页(使用实测高度)
+        // 内容分页（使用 captureEditorBlocks，T3 会完善截图逻辑）
-                    var contentPages = paginateContent(blocks, contentAreaHeight, sizeConfig);
+        captureEditorBlocks(editorHtml, blocks, contentAreaHeight, sizeConfig).then(function(contentPages) {
             pages = pages.concat(contentPages);
 
             // 尾页
             pages.push(generateSummaryPage(sizeConfig, pages.length));
 
-                    // 两遍遍历: 现在知道了总页数, 给每页补上 N/M 页码
+            // 页码 N/M
             var totalPages = pages.length;
             for (var i = 0; i < pages.length; i++) {
                 if (pages[i].type === 'content') {
-                            // 在页脚中添加 N/M 格式页码
                     pages[i].html = pages[i].html.replace(
                         '<span>' + pages[i].pageNum + '</span>',
                         '<span class="page-number-indicator">' + (i + 1) + '/' + totalPages + '</span>'
@@ -195,27 +128,22 @@ var PhoneImageEngine = (function () {
                 }
             }
 
-                    // 渲染缩略图（右侧）- 异步截图
+            // 渲染缩略图
-                    renderThumbnails(sizeConfig).then(function () {
+            renderThumbnails(sizeConfig).then(function() {
                 render._locked = false;
-                        // 如果渲染期间有新的渲染请求排队，自动触发
                 if (render._pending) {
                     render._pending = false;
-                            render().catch(function () {
+                    render().catch(function() {});
-                                // 静默处理递归渲染失败
-                            });
                 }
                 deferred.resolve(pages);
-                    }).catch(function (err) {
+            }).catch(function(err) {
                 render._locked = false;
                 deferred.reject(err);
             });
-                });
+        }).catch(function(err) {
-            }).catch(function (err) {
             render._locked = false;
             deferred.reject(err);
         });
-        });
 
         return deferred.promise();
     }
@@ -311,7 +239,7 @@ var PhoneImageEngine = (function () {
                         blocks.push({
                             type: 'p',
                             html: '<p>' + p + '</p>',
-                            estimatedHeight: estimateTextHeight(p, config.fontSize)
+                            estimatedHeight: 40
                         });
                     }
                 }
@@ -340,7 +268,7 @@ var PhoneImageEngine = (function () {
                 case 'h5':
                 case 'h6':
                     block.type = tagName;
-                    block.estimatedHeight = estimateHeadingHeight(tagName, $el.text());
+                    block.estimatedHeight = 40;
                     break;
                 case 'table':
                     block.type = 'table';
@@ -359,7 +287,7 @@ var PhoneImageEngine = (function () {
                     var imgW = parseInt($el.attr('data-original-width'), 10);
                     var imgH = parseInt($el.attr('data-original-height'), 10);
                     if (imgW > 0 && imgH > 0) {
-                        var imgRatio = getContentWidth() / imgW;
+                        var imgRatio = 500 / imgW;
                         block.estimatedHeight = Math.round(imgH * imgRatio) + 20;
                     } else {
                         block.estimatedHeight = 0;
@@ -368,15 +296,15 @@ var PhoneImageEngine = (function () {
                     break;
                 case 'ul':
                 case 'ol':
-                    block.estimatedHeight = estimateListHeight($el);
+                    block.estimatedHeight = 40;
                     break;
                 case 'blockquote':
-                    block.estimatedHeight = estimateBlockquoteHeight($el);
+                    block.estimatedHeight = 40;
                     break;
                 case 'p':
                 default:
                     block.type = 'p';
-                    block.estimatedHeight = estimateTextHeight($el.text(), config.fontSize);
+                    block.estimatedHeight = 40;
                     break;
             }
 
@@ -386,56 +314,126 @@ var PhoneImageEngine = (function () {
         return blocks;
     }
 
-    // ===== 高度估算 =====
+    // ===== wangeditor 集成层 =====
 
     /**
-     * 获取内容区可用宽度 (540 - 40px padding)
+     * 获取 wangeditor 编辑区的子元素
+     * @returns {Array} DOM元素数组
      */
-    function getContentWidth() {
+    function getEditorChildren() {
-        return 500;
+        var editorArea = document.querySelector('#editor-text-area [data-slate-editor]');
+        if (!editorArea) return [];
+
+        var children = editorArea.children;
+        // wangeditor v5: [data-slate-editor] 下可能有一层 div 包装
+        // 如果只有一个 child 且是 div，则取其子元素
+        if (children.length === 1 && children[0].tagName.toLowerCase() === 'div') {
+            return Array.prototype.slice.call(children[0].children);
+        }
+        return Array.prototype.slice.call(children);
     }
 
     /**
-     * 估算文本高度
+     * 从 wangeditor 内容构建分页数据
-     * @param {string} text
+     * 完整实现：从编辑器DOM截图测高 -> 按分割线分组 -> 按高度分页 -> 生成staging HTML
-     * @param {number} fontSize
+     * @param {string} html - 编辑器HTML内容
-     * @returns {number} px
+     * @param {Array} blocks - parseHtmlToBlocks 解析后的块数组
+     * @param {number} contentAreaHeight - 内容区可用高度(px)
+     * @param {Object} sizeConfig - {width, height}
+     * @returns {jQuery Deferred} resolves with contentPages array
      */
-    function estimateTextHeight(text, fontSize) {
+    function captureEditorBlocks(html, blocks, contentAreaHeight, sizeConfig) {
-        var charCount = text.length;
+        var deferred = $.Deferred();
-        if (charCount === 0) return 0;
+
-        var charsPerLine = Math.floor(getContentWidth() / (fontSize * 1.0));
+        // 按 page-break 分组
-        if (charsPerLine < 1) charsPerLine = 1;
+        var groups = [];
-        var lines = Math.ceil(charCount / charsPerLine);
+        var currentGroup = { blocks: [], domIndices: [] };
-        return lines * fontSize * 1.8 + 10; // 1.8行高 + 10px段落间距
+        var domIdx = 0;
+
+        for (var i = 0; i < blocks.length; i++) {
+            if (blocks[i].type === 'page-break') {
+                if (currentGroup.blocks.length > 0) groups.push(currentGroup);
+                currentGroup = { blocks: [], domIndices: [] };
+                // page-break 对应 wangeditor 中的 divider(hr)，在 DOM 中也是一个子元素
+                domIdx++;
+                continue;
+            }
+            currentGroup.blocks.push(blocks[i]);
+            currentGroup.domIndices.push(domIdx);
+            domIdx++;
+        }
+        if (currentGroup.blocks.length > 0) groups.push(currentGroup);
+
+        if (groups.length === 0) {
+            deferred.resolve([]);
+            return deferred.promise();
         }
 
-    /**
+        // 获取编辑器子元素
-     * 估算标题高度
+        var editorChildren = getEditorChildren();
-     */
+
-    function estimateHeadingHeight(tag, text) {
+        // 创建测量容器（500px = 540 - 20*2 padding，与内容区一致）
-        var sizeMap = { h1: 28, h2: 24, h3: 20, h4: 18, h5: 16, h6: 14 };
+        var $mc = $('<div>').css({
-        var hSize = sizeMap[tag] || 20;
+            width: '500px',
-        var charsPerLine = Math.floor(getContentWidth() / (hSize * 1.0));
+            position: 'fixed',
-        if (charsPerLine < 1) charsPerLine = 1;
+            left: '-9999px',
-        var lines = Math.ceil(text.length / charsPerLine);
+            top: '0',
-        return lines * hSize * 1.4 + 20; // heading行高1.4 + 20px上下间距
+            visibility: 'hidden',
+            background: '#ffffff',
+            fontSize: '14px',
+            lineHeight: '1.8',
+            boxSizing: 'border-box'
+        });
+        $('body').append($mc);
+
+        // 串行测高每组
+        var gi = 0;
+
+        function measureNext() {
+            if (gi >= groups.length) {
+                $mc.remove();
+                // 给尚未设置高度的 block 设默认值
+                for (var k = 0; k < blocks.length; k++) {
+                    if (!blocks[k].estimatedHeight) {
+                        blocks[k].estimatedHeight = 40;
+                    }
+                }
+                // 用测量的实际高度后的 blocks 调用原有 paginateContent 分页
+                var contentPages = paginateContent(blocks, contentAreaHeight, sizeConfig);
+                deferred.resolve(contentPages);
+                return;
             }
 
-    /**
+            var group = groups[gi];
-     * 估算列表高度
+            $mc.empty();
-     */
+
-    function estimateListHeight($list) {
+            for (var j = 0; j < group.domIndices.length; j++) {
-        var items = $list.find('li').length;
+                var di = group.domIndices[j];
-        return items * (config.fontSize * 1.8 + 5) + 15;
+                if (di < editorChildren.length) {
+                    $mc.append(editorChildren[di].cloneNode(true));
+                }
             }
 
-    /**
+            requestAnimationFrame(function () {
-     * 估算引用块高度
+                var h = Math.round($mc[0].getBoundingClientRect().height);
-     */
+
-    function estimateBlockquoteHeight($bq) {
+                // 按比例分配测量的实际高度给组内各个 block
-        var text = $bq.text();
+                var totalEstimated = 0;
-        return estimateTextHeight(text, config.fontSize) + 10;
+                for (var k = 0; k < group.blocks.length; k++) {
+                    totalEstimated += (group.blocks[k].estimatedHeight || 40);
+                }
+                for (var k = 0; k < group.blocks.length; k++) {
+                    var ratio = (group.blocks[k].estimatedHeight || 40) / (totalEstimated || 1);
+                    group.blocks[k].estimatedHeight = Math.round(h * ratio);
+                }
+
+                gi++;
+                measureNext();
+            });
+        }
+
+        measureNext();
+        return deferred.promise();
     }
 
     // ===== 分页核心算法 =====
@@ -558,7 +556,7 @@ var PhoneImageEngine = (function () {
         }
 
         // 按句子拆分：句号、问号、叹号、换行（兼容不支持 lookbehind 的浏览器）
-        var effectiveFontSize = parseInt(config.fontSize, 10) || 14;
+        var effectiveFontSize = 14;
         var parts = text.split(/([。！？\n])/);
         var sentences = [];
         var current = '';
@@ -574,7 +572,7 @@ var PhoneImageEngine = (function () {
         if (sentences.length <= 1) {
             // 无法按句子拆分，按固定字符数拆分
             sentences = [];
-            var chunkSize = Math.floor(getContentWidth() / effectiveFontSize) *
+            var chunkSize = Math.floor(500 / effectiveFontSize) *
                 Math.floor(pageHeight / (effectiveFontSize * 1.8));
             if (chunkSize < 10) chunkSize = 10;
             for (var ci = 0; ci < text.length; ci += chunkSize) {
@@ -586,7 +584,10 @@ var PhoneImageEngine = (function () {
         for (var j = 0; j < sentences.length; j++) {
             var s = sentences[j].trim();
             if (!s) continue;
-            var h = estimateTextHeight(s, effectiveFontSize);
+            var lineChars = Math.floor(500 / effectiveFontSize);
+            if (lineChars < 1) lineChars = 1;
+            var lines = Math.ceil(s.length / lineChars);
+            var h = lines * effectiveFontSize * 1.8 + 10;
             result.push({
                 type: wrapperTag === 'blockquote' ? 'blockquote' : 'p',
                 html: '<' + wrapperTag + '>' + s + '</' + wrapperTag + '>',
@@ -1041,228 +1042,6 @@ var PhoneImageEngine = (function () {
         });
     }
 
-    /**
-     * 在中间栏 #content-flow 中将表格和代码块截图转为图片
-     * 在 renderContentFlow(blocks) 之后、measureBlockHeights(blocks) 之前调用
-     * 使用 convertedBlockCache 缓存已转换的图片，仅对新增/变更的 block 执行截图
-     * @param {Array} blocks - parseHtmlToBlocks 返回的块数组
-     * @returns {jQuery Deferred} resolves with blocks array
-     */
-    function convertFlowBlocksToImages(blocks) {
-        var deferred = $.Deferred();
-        var $flow = $('#content-flow');
-        var blocksToConvert = [];  // 需要重新截图的 block 索引
-
-        // 第一遍：检查缓存，命中则直接复用
-        for (var i = 0; i < blocks.length; i++) {
-            if (blocks[i].type !== 'table' && blocks[i].type !== 'pre') continue;
-
-            var cacheKey = simpleHash(blocks[i].html);
-            if (convertedBlockCache[cacheKey]) {
-                // 命中缓存
-                blocks[i].html = convertedBlockCache[cacheKey].imgHtml;
-                blocks[i].type = 'img';
-                // 更新中间栏显示
-                var $cachedEl = $flow.find('.content-flow-block[data-index="' + i + '"]');
-                if ($cachedEl.length) $cachedEl.html(blocks[i].html);
-            } else {
-                blocksToConvert.push(i);
-            }
-        }
-
-        if (blocksToConvert.length === 0) {
-            deferred.resolve(blocks);
-            return deferred.promise();
-        }
-
-        // 第二遍：串行截图未缓存的 block
-        var convertIdx = 0;
-
-        function convertNext() {
-            if (convertIdx >= blocksToConvert.length) {
-                deferred.resolve(blocks);
-                return;
-            }
-
-            var blockIdx = blocksToConvert[convertIdx];
-            var block = blocks[blockIdx];
-            var $blockEl = $flow.find('.content-flow-block[data-index="' + blockIdx + '"]');
-
-            if (!$blockEl.length) {
-                convertIdx++;
-                convertNext();
-                return;
-            }
-
-            // 对代码块：先应用 Prism 高亮
-            if (block.type === 'pre' && typeof Prism !== 'undefined') {
-                $blockEl.find('pre > code:not([class*="language-"])').addClass('language-plaintext');
-                $blockEl.find('pre code').each(function () { Prism.highlightElement(this); });
-            }
-
-            html2canvas($blockEl[0], {
-                scale: 2,
-                useCORS: true,
-                backgroundColor: block.type === 'table' ? '#ffffff' : '#f5f5f5',
-                logging: false
-            }).then(function (canvas) {
-                var imgData = canvas.toDataURL('image/jpeg', 0.92);
-                var imgHtml = '<img src="' + imgData + '" data-converted="true" style="max-width:100%;height:auto;display:block;margin:10px 0;" />';
-
-                // 存入缓存（用截图前的原始HTML做key）
-                var originalHtml = block.html;
-                var cacheKey = simpleHash(originalHtml);
-                convertedBlockCache[cacheKey] = { imgHtml: imgHtml };
-
-                block.html = imgHtml;
-                block.type = 'img';
-                $blockEl.html(imgHtml);
-
-                convertIdx++;
-                convertNext();
-            }).catch(function () {
-                // 截图失败，保留原样
-                convertIdx++;
-                convertNext();
-            });
-        }
-
-        convertNext();
-        return deferred.promise();
-    }
-
-    /**
-     * DOM实测高度 - 从#content-flow中读取每个块的实际渲染高度
-     * @param {Array} blocks - parseHtmlToBlocks 返回的块数组
-     */
-    function measureBlockHeights(blocks) {
-        var $flow = $('#content-flow');
-        if (!$flow.length) return;
-
-        for (var i = 0; i < blocks.length; i++) {
-            var block = blocks[i];
-            if (block.type === 'page-break') continue;
-
-            var $blockEl = $flow.find('.content-flow-block[data-index="' + i + '"]');
-            if ($blockEl.length) {
-                var actualHeight = Math.round($blockEl[0].getBoundingClientRect().height);
-                if (actualHeight > 0) {
-                    block.estimatedHeight = actualHeight;
-                }
-            }
-        }
-    }
-
-    /**
-     * 渲染内容流到 #content-flow 容器
-     * @param {Array} blocks - parseHtmlToBlocks 返回的块数组
-     */
-    function renderContentFlow(blocks) {
-        var $flow = $('#content-flow');
-        if (!$flow.length) return;
-
-        $flow.empty();
-
-        for (var i = 0; i < blocks.length; i++) {
-            var block = blocks[i];
-
-            // 分页标记
-            if (block.type === 'page-break') {
-                var $marker = $('<div class="page-break-marker">' +
-                    '<span class="break-marker-label">-- 分页标记 --</span>' +
-                    '<button class="remove-break-btn" data-index="' + i + '" title="删除分页">&times;</button>' +
-                    '</div>');
-                $flow.append($marker);
-                continue;
-            }
-
-            // 内容块
-            var $block = $('<div class="content-flow-block" data-index="' + i + '">' + block.html + '</div>');
-            $flow.append($block);
-
-            // 块与块之间的分页插入区域（不在最后一个块之后添加）
-            if (i < blocks.length - 1) {
-                var $inserter = $('<div class="break-inserter" data-after-index="' + i + '">' +
-                    '<button class="break-inserter-btn" title="插入分页">+</button>' +
-                    '</div>');
-                $flow.append($inserter);
-            }
-        }
-    }
-
-    /**
-     * 在指定位置插入分页标记
-     * 修改 postData.content_html，在对应位置插入 <hr>
-     * @param {number} blockIndex - 在哪个块之后插入 (对应 break-inserter 的 data-after-index)
-     */
-    function insertPageBreak(blockIndex) {
-        // 如果正在渲染，延迟重试
-        if (render._locked) {
-            insertPageBreak._retryCount = (insertPageBreak._retryCount || 0) + 1;
-            if (insertPageBreak._retryCount >= 15) {
-                insertPageBreak._retryCount = 0;
-                layer.msg('操作超时，请重试');
-                return;
-            }
-            setTimeout(function () { insertPageBreak(blockIndex); }, 200);
-            return;
-        }
-        insertPageBreak._retryCount = 0;
-
-        var cleanHtml = preprocessContent(postData.content_html);
-        var $temp = $('<div>').html(cleanHtml);
-        var children = $temp.children();
-
-        // 在 blockIndex 位置的元素之后插入 <hr>
-        if (blockIndex >= 0 && blockIndex < children.length) {
-            $(children[blockIndex]).after('<hr>');
-        } else {
-            $temp.append('<hr>');
-        }
-
-        postData.content_html = $temp.html();
-
-        // 重新渲染
-        render();
-    }
-
-    /**
-     * 删除指定位置的分页标记
-     * @param {number} blockIndex - 分页标记的 data-index
-     */
-    function removePageBreak(blockIndex) {
-        // 如果正在渲染，延迟重试
-        if (render._locked) {
-            removePageBreak._retryCount = (removePageBreak._retryCount || 0) + 1;
-            if (removePageBreak._retryCount >= 15) {
-                removePageBreak._retryCount = 0;
-                layer.msg('操作超时，请重试');
-                return;
-            }
-            setTimeout(function () { removePageBreak(blockIndex); }, 200);
-            return;
-        }
-        removePageBreak._retryCount = 0;
-
-        // 统计这是第几个 page-break
-        var cleanHtml = preprocessContent(postData.content_html);
-        var $temp = $('<div>').html(cleanHtml);
-        var hrElements = $temp.find('hr');
-
-        // 在 blocks 数组中找到这个 page-break 是第几个
-        var breakOrder = 0;
-        var currentBlocks = parseHtmlToBlocks(cleanHtml);
-        for (var i = 0; i < currentBlocks.length && i < blockIndex; i++) {
-            if (currentBlocks[i].type === 'page-break') breakOrder++;
-        }
-
-        if (breakOrder < hrElements.length) {
-            $(hrElements[breakOrder]).remove();
-            postData.content_html = $temp.html();
-            render();
-        }
-    }
-
     // ===== 图片生成 =====
 
     /**
@@ -1364,7 +1143,6 @@ var PhoneImageEngine = (function () {
             output_type: 'phone_image',
             config: {
                 size: saveConfig.size || config.size,
-                fontSize: saveConfig.fontSize || config.fontSize,
                 watermark: saveConfig.watermark || config.watermark,
                 pageAlignments: config.pageAlignments || {}
             },
@@ -1405,57 +1183,75 @@ var PhoneImageEngine = (function () {
         config.pageAlignments[pageNum] = align;
     }
 
+    // ===== 导出长图 =====
+
     /**
-     * 导出内容流为长图
+     * 导出长图：从 wangeditor DOM 截取完整长图
+     * @returns {jQuery Deferred} resolves with canvas
      */
     function exportLongImage() {
         var deferred = $.Deferred();
 
         if (render._locked) {
-            layer.msg('请等待渲染完成');
             deferred.reject('rendering');
             return deferred.promise();
         }
 
-        var $flow = $('#content-flow');
+        var editorChildren = getEditorChildren();
-        if (!$flow.length) {
+        if (editorChildren.length === 0) {
-            deferred.reject('内容流容器不存在');
+            deferred.reject('编辑器内容为空');
             return deferred.promise();
         }
 
-        // 临时隐藏交互元素
+        // 创建临时容器，宽度540px与编辑器一致
-        $flow.find('.break-inserter').hide();
+        var $container = $('<div>').css({
-        $flow.find('.page-break-marker').hide();
+            width: '540px',
+            position: 'fixed',
+            left: '-9999px',
+            top: '0',
+            visibility: 'visible',
+            background: '#ffffff',
+            padding: '20px',
+            boxSizing: 'border-box',
+            fontSize: '14px',
+            lineHeight: '1.8'
+        });
 
-        // 获取内容流的实际高度
+        // 克隆所有非 divider 的子元素
-        var flowWidth = $flow.outerWidth();
+        for (var i = 0; i < editorChildren.length; i++) {
-        var flowHeight = $flow[0].scrollHeight;
+            var el = editorChildren[i];
+            var isDivider = el.getAttribute('data-w-e-type') === 'divider' ||
+                el.tagName.toLowerCase() === 'hr';
+            if (!isDivider) {
+                $container.append(el.cloneNode(true));
+            }
+        }
 
-        html2canvas($flow[0], {
+        $('body').append($container);
+
+        requestAnimationFrame(function () {
+            var width = $container.outerWidth();
+            var height = $container[0].scrollHeight;
+
+            html2canvas($container[0], {
                 scale: 2,
                 useCORS: true,
                 backgroundColor: '#ffffff',
-            width: flowWidth,
+                width: width,
-            height: flowHeight,
+                height: height,
                 logging: false
             }).then(function (canvas) {
-            // 恢复交互元素
+                $container.remove();
-            $flow.find('.break-inserter').show();
-            $flow.find('.page-break-marker').show();
-
-            // 触发下载
                 var link = document.createElement('a');
                 link.download = 'phone-image-long-' + Date.now() + '.png';
                 link.href = canvas.toDataURL('image/png');
                 link.click();
-
                 deferred.resolve(canvas);
             }).catch(function (err) {
-            // 恢复交互元素
+                $container.remove();
-            $flow.find('.break-inserter').show();
-            $flow.find('.page-break-marker').show();
                 deferred.reject('长图导出失败: ' + err);
             });
+        });
 
         return deferred.promise();
     }
@@ -1480,16 +1276,17 @@ var PhoneImageEngine = (function () {
         saveImages: saveImages,
         saveConfig: saveConfig,
         setPageAlignment: setPageAlignment,
-        insertPageBreak: insertPageBreak,
+        exportLongImage: exportLongImage,
-        removePageBreak: removePageBreak,
         getContentHtml: function () {
+            if (window.phoneImageEditor) {
+                return window.phoneImageEditor.getHtml();
+            }
             return postData.content_html;
         },
         updateConfig: function (newConfig) {
             if (newConfig) {
                 $.extend(config, newConfig);
             }
-        },
+        }
-        exportLongImage: exportLongImage
     };
 })();

view/admin/post/phone_image.html

@@ -7,9 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{$post.title} - 手机图片排版</title>
     <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
+    <link rel="stylesheet" href="/static/lib/wangeditor/css/style.css">
     <link rel="stylesheet" href="/static/css/phone-image-templates.css">
     <link rel="stylesheet" href="/static/css/phone-image-fonts.css">
-    <link rel="stylesheet" href="/static/lib/prismjs/prism.css">
     <style>
         body {
             margin: 0;
@@ -19,29 +19,37 @@
 
         .page-header {
             background: #fff;
-            padding: 15px 20px;
+            padding: 10px 20px;
             border-bottom: 1px solid #e8e8e8;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
 
-        .page-header h3 {
+        .page-header-left {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .page-header-left h3 {
             margin: 0;
-            font-size: 18px;
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 300px;
+        }
+
+        .page-header-right {
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
 
         .main-layout {
             display: flex;
-            height: calc(100vh - 60px);
+            height: calc(100vh - 52px);
-        }
-
-        .toolbar {
-            width: 220px;
-            background: #fff;
-            border-right: 1px solid #e8e8e8;
-            padding: 15px;
-            overflow-y: auto;
         }
 
         .content-flow-area {
@@ -51,6 +59,17 @@
             background: #fafafa;
         }
 
+        #editor-toolbar {
+            border-bottom: 1px solid #e8e8e8;
+            background: #fff;
+        }
+
+        #editor-text-area {
+            min-height: 300px;
+            padding: 10px;
+            background: #fff;
+        }
+
         .paginated-preview-area {
             flex: 1;
             overflow-x: auto;
@@ -68,27 +87,15 @@
             padding: 0 10px;
         }
 
-        .toolbar .layui-form-label {
+        /* 设置弹框样式 */
+        .settings-form .layui-form-item {
+            margin-bottom: 15px;
+        }
+        .settings-form .layui-form-label {
             width: 60px;
-            padding: 6px 8px;
-            font-size: 13px;
         }
-
+        .settings-form .layui-input-block {
-        .toolbar .layui-input-block {
+            margin-left: 90px;
-            margin-left: 70px;
-        }
-
-        .toolbar .layui-form-item {
-            margin-bottom: 12px;
-        }
-
-        .action-btns {
-            margin-top: 15px;
-        }
-
-        .action-btns .layui-btn {
-            width: 100%;
-            margin-bottom: 8px;
         }
     </style>
 </head>
@@ -98,69 +105,30 @@
     <div id="post-content-html" style="display:none;">{$layoutContentHtml|raw}</div>
 
     <div class="page-header">
-        <div>
+        <div class="page-header-left">
             <a href="{:url('post/index')}" class="layui-btn layui-btn-sm layui-btn-primary"><i
                     class="layui-icon layui-icon-return"></i> 返回列表</a>
-            {* 输出管理入口已移至历史记录弹窗 *}
-        </div>
             <h3>{$post.title}</h3>
         </div>
+        <div class="page-header-right">
+            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btn-settings"><i
+                    class="layui-icon layui-icon-set"></i> 设置</button>
+            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btn-save"><i
+                    class="layui-icon layui-icon-ok"></i> 保存</button>
+            <button type="button" class="layui-btn layui-btn-sm" id="btn-generate"><i
+                    class="layui-icon layui-icon-picture"></i> 生成并保存</button>
+            <div class="layui-btn-group" style="margin:0;">
+                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btn-more"><i
+                        class="layui-icon layui-icon-more"></i></button>
+            </div>
+        </div>
+    </div>
 
     <div class="main-layout">
-        <!-- 左侧工具栏 -->
+        <!-- 左侧：wangeditor 编辑器 -->
-        <div class="toolbar">
-            <div class="layui-form" lay-filter="phoneImageForm">
-                <!-- 尺寸选择 -->
-                <div class="layui-form-item">
-                    <label class="layui-form-label">尺寸</label>
-                    <div class="layui-input-block">
-                        <select name="size" lay-filter="size">
-                            <option value="xiaohongshu">小红书 (1080x1440)</option>
-                            <option value="douyin">抖音 (1080x1920)</option>
-                        </select>
-                    </div>
-                </div>
-
-                <!-- 字号 -->
-                <div class="layui-form-item">
-                    <label class="layui-form-label">字号</label>
-                    <div class="layui-input-block">
-                        <input type="range" name="fontSize" min="10" max="24" value="14" lay-filter="fontSize"
-                            style="width:100%;">
-                        <span id="fontSizeValue">14px</span>
-                    </div>
-                </div>
-
-                <!-- 水印 -->
-                <div class="layui-form-item">
-                    <label class="layui-form-label">水印</label>
-                    <div class="layui-input-block">
-                        <input type="text" name="watermark" placeholder="可选水印文字" class="layui-input">
-                    </div>
-                </div>
-
-                <!-- 历史记录 -->
-                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btn-history" style="width:100%;margin-bottom:10px;"><i class="layui-icon layui-icon-list"></i> 历史记录</button>
-
-                <!-- 操作按钮 -->
-                <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
-                            class="layui-icon layui-icon-picture"></i> 生成并保存</button>
-                    <button type="button" class="layui-btn layui-btn-warm" id="btn-download"><i
-                            class="layui-icon layui-icon-download-circle"></i> 打包下载</button>
-                    <button type="button" class="layui-btn layui-btn-primary" id="btn-export-long"><i
-                            class="layui-icon layui-icon-picture"></i> 导出长图</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- 中间：内容流 -->
         <div class="content-flow-area">
-            <div id="content-flow" class="content-flow"></div>
+            <div id="editor-toolbar"></div>
+            <div id="editor-text-area"></div>
         </div>
 
         <!-- 右侧：分页排版预览 -->
@@ -171,13 +139,14 @@
 
     <script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
     <script src="/static/lib/layui/layui.js"></script>
+    <script src="/static/lib/wangeditor/index.js"></script>
     <script src="/static/lib/html2canvas/html2canvas.js"></script>
-    <script src="/static/lib/prismjs/prism.js"></script>
     <script src="/static/js/phone-image.js"></script>
     <script>
-        layui.use(['form', 'layer'], function () {
+        layui.use(['form', 'layer', 'dropdown'], function () {
             var form = layui.form;
             var layer = layui.layer;
+            var dropdown = layui.dropdown;
 
             var lastOutputId = null;
             var downloadBaseUrl = '{:url("post/downloadPostOutputZip", ["id" => 0])}';
@@ -185,6 +154,12 @@
             var historyListUrl = '{:url("post/getOutputListJson", ["id" => $post->id])}';
             var loadConfigUrl = '{:url("post/loadPostOutputConfig")}';
 
+            // 当前排版配置（从设置弹框维护）
+            var currentConfig = {
+                size: 'xiaohongshu',
+                watermark: ''
+            };
+
             var postData = {
                 postId: {$post.id},
                 title: <?php echo json_encode($post->title ?? ''); ?>,
@@ -201,47 +176,163 @@
             var savedConfig = <?php echo $layoutConfig ? json_encode($layoutConfig) : '{}'; ?>;
             var initConfig = {
                 size: savedConfig.size || 'xiaohongshu',
-                fontSize: savedConfig.fontSize || 14,
                 watermark: savedConfig.watermark || '',
                 pageAlignments: savedConfig.pageAlignments || {}
             };
+
+            // 同步当前配置
+            currentConfig.size = initConfig.size;
+            currentConfig.watermark = initConfig.watermark;
+
+            // ========== wangeditor 初始化 ==========
+            var E = window.wangEditor;
+
+            var editorConfig = { MENU_CONF: {} };
+            editorConfig.placeholder = '请输入排版内容，使用分割线标记分页位置';
+            editorConfig.scroll = false;
+            editorConfig.MENU_CONF['uploadImage'] = {
+                server: '{:url("File/wangEditorSave")}',
+                fieldName: 'file',
+                meta: {
+                    type: 'editor'
+                }
+            };
+
+            editorConfig.onChange = function (editor) {
+                // T5会实现自动保存
+            };
+
+            // 粘贴处理：处理外部图片下载
+            editorConfig.customPaste = function (editor, event) {
+                var pasteStr = event.clipboardData.getData('text/html');
+                var imgReg = /<img.*?(?:>|\/>)/gi;
+                var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
+                var arr = pasteStr.match(imgReg);
+
+                if (arr == null || arr.length == 0) {
+                    return true;
+                }
+                layer.load();
+                for (var i = 0; i < arr.length; i++) {
+                    var src = arr[i].match(srcReg);
+                    if (src[1]) {
+                        var imgSrc = src[1];
+                        var prefix = imgSrc.substr(0, 4);
+                        if (prefix == 'http') {
+                            $.ajax({
+                                async: false,
+                                type: 'POST',
+                                url: "{:url('File/urlSave')}",
+                                data: {
+                                    url: imgSrc,
+                                    type: 'editor'
+                                },
+                                success: function (result) {
+                                    pasteStr = pasteStr.replace(imgSrc, result.data.src)
+                                }
+                            })
+                        } else if (prefix == 'data') {
+                            $.ajax({
+                                async: false,
+                                type: 'POST',
+                                url: '{:url("File/base64Save")}',
+                                data: {
+                                    data: imgSrc,
+                                    type: 'editor'
+                                },
+                                success: function (result) {
+                                    pasteStr = pasteStr.replace(imgSrc, result.data.src)
+                                }
+                            })
+                        }
+                    }
+                }
+                layer.closeAll('loading');
+                editor.dangerouslyInsertHtml(pasteStr);
+                event.preventDefault();
+                return false;
+            };
+
+            var phoneImageEditor = E.createEditor({
+                selector: '#editor-text-area',
+                html: postData.contentHtml,
+                config: editorConfig
+            });
+
+            var toolbar = E.createToolbar({
+                editor: phoneImageEditor,
+                selector: '#editor-toolbar',
+                config: {
+                    excludeKeys: ['fullScreen'],
+                    insertKeys: {
+                        index: 24,
+                        keys: ['divider']
+                    }
+                }
+            });
+
+            window.phoneImageEditor = phoneImageEditor;
+
             PhoneImageEngine.init(postData, initConfig);
 
-            // 同步尺寸选择
+            // ========== 设置弹框 ==========
-            $('[name="size"]').val(initConfig.size);
+            $('#btn-settings').click(function () {
-            form.render('select');
+                var settingsHtml = '<div class="settings-form" style="padding:20px 20px 0;">';
+                settingsHtml += '<form class="layui-form" lay-filter="settingsForm">';
+                settingsHtml += '<div class="layui-form-item">';
+                settingsHtml += '<label class="layui-form-label">尺寸</label>';
+                settingsHtml += '<div class="layui-input-block">';
+                settingsHtml += '<select name="s_size" lay-filter="s_size">';
+                settingsHtml += '<option value="xiaohongshu"' + (currentConfig.size === 'xiaohongshu' ? ' selected' : '') + '>小红书 (1080x1440)</option>';
+                settingsHtml += '<option value="douyin"' + (currentConfig.size === 'douyin' ? ' selected' : '') + '>抖音 (1080x1920)</option>';
+                settingsHtml += '</select>';
+                settingsHtml += '</div>';
+                settingsHtml += '</div>';
+                settingsHtml += '<div class="layui-form-item">';
+                settingsHtml += '<label class="layui-form-label">水印</label>';
+                settingsHtml += '<div class="layui-input-block">';
+                settingsHtml += '<input type="text" name="s_watermark" value="' + (currentConfig.watermark || '') + '" placeholder="可选水印文字" class="layui-input">';
+                settingsHtml += '</div>';
+                settingsHtml += '</div>';
+                settingsHtml += '</form>';
+                settingsHtml += '</div>';
 
-            // 尺寸切换
+                layer.open({
-            form.on('select(size)', function (data) {
+                    type: 1,
-                doRender();
+                    title: '排版设置',
-            });
+                    area: ['400px', '220px'],
-
+                    content: settingsHtml,
-            // 字号调整
+                    btn: ['确定', '取消'],
-            $('[name="fontSize"]').on('input', function () {
+                    success: function (layero) {
-                $('#fontSizeValue').text($(this).val() + 'px');
+                        form.render('select', 'settingsForm');
+                    },
+                    yes: function (index, layero) {
+                        currentConfig.size = layero.find('[name="s_size"]').val();
+                        currentConfig.watermark = layero.find('[name="s_watermark"]').val();
+                        layer.close(index);
                         doRender();
+                    }
+                });
             });
 
+            // ========== 渲染逻辑 ==========
             var renderTimer = null;
             function doRender(extraConfig) {
                 clearTimeout(renderTimer);
-                renderTimer = setTimeout(function() {
+                renderTimer = setTimeout(function () {
-                    var fontSize = parseInt($('[name="fontSize"]').val()) || 14;
                     var newConfig = {
-                        size: $('[name="size"]').val(),
+                        size: currentConfig.size,
-                        fontSize: fontSize,
+                        watermark: currentConfig.watermark
-                        watermark: $('[name="watermark"]').val()
                     };
                     if (extraConfig) {
                         $.extend(newConfig, extraConfig);
                     }
-                    // 关键修改：用 updateConfig 替代 init，不重置 postData
                     PhoneImageEngine.updateConfig(newConfig);
                     var loadIdx = layer.load();
-                    PhoneImageEngine.render().then(function(pages) {
+                    PhoneImageEngine.render().then(function (pages) {
                         layer.close(loadIdx);
                         layer.msg('排版完成，共 ' + pages.length + ' 页');
-                    }).catch(function(err) {
+                    }).catch(function (err) {
                         layer.close(loadIdx);
                         if (err !== 'rendering') {
                             layer.msg('渲染失败: ' + err);
@@ -250,21 +341,43 @@
                 }, 300);
             }
 
-            // 重新生成（强制重新渲染缩略图）
+            // ========== 更多下拉菜单 ==========
-            $('#btn-rerender').click(function () {
+            dropdown.render({
+                elem: '#btn-more',
+                data: [
+                    { title: '历史记录', id: 'history' },
+                    { title: '重新生成', id: 'rerender' },
+                    { title: '打包下载', id: 'download' },
+                    { title: '导出长图', id: 'exportLong' }
+                ],
+                click: function (data) {
+                    switch (data.id) {
+                        case 'history':
+                            $('#btn-history').trigger('click');
+                            break;
+                        case 'rerender':
                             doRender();
+                            break;
+                        case 'download':
+                            $('#btn-download-hidden').trigger('click');
+                            break;
+                        case 'exportLong':
+                            $('#btn-export-long-hidden').trigger('click');
+                            break;
+                    }
+                },
+                align: 'right'
             });
 
-            // 保存配置（不生成图片）
+            // ========== 保存配置（不生成图片） ==========
             $('#btn-save').click(function () {
                 var btn = $(this);
                 btn.prop('disabled', true);
                 layer.msg('保存中...');
 
                 PhoneImageEngine.saveConfig(postData.postId, {
-                    size: $('[name="size"]').val(),
+                    size: currentConfig.size,
-                    fontSize: parseInt($('[name="fontSize"]').val()) || 14,
+                    watermark: currentConfig.watermark,
-                    watermark: $('[name="watermark"]').val(),
                     content_html: PhoneImageEngine.getContentHtml()
                 }, saveConfigUrl).then(function (data) {
                     if (data.output_id) lastOutputId = data.output_id;
@@ -277,16 +390,15 @@
                 });
             });
 
-            // 生成并保存
+            // ========== 生成并保存 ==========
             $('#btn-generate').click(function () {
                 var btn = $(this);
-                btn.prop('disabled', true).text('生成中...');
+                btn.prop('disabled', true).html('<i class="layui-icon layui-icon-picture"></i> 生成中...');
                 layer.msg('正在生成图片，请稍候...');
 
                 PhoneImageEngine.saveImages(postData.postId, {
-                    size: $('[name="size"]').val(),
+                    size: currentConfig.size,
-                    fontSize: parseInt($('[name="fontSize"]').val()) || 14,
+                    watermark: currentConfig.watermark,
-                    watermark: $('[name="watermark"]').val(),
                     content_html: PhoneImageEngine.getContentHtml()
                 }).then(function (data) {
                     if (data.output_id) {
@@ -301,8 +413,10 @@
                 });
             });
 
-            // 打包下载
+            // ========== 打包下载（隐藏按钮，由更多菜单触发） ==========
-            $('#btn-download').click(function () {
+            var downloadBtn = $('<button type="button" id="btn-download-hidden" style="display:none;"></button>');
+            $('body').append(downloadBtn);
+            downloadBtn.on('click', function () {
                 if (!lastOutputId) {
                     layer.msg('请先生成并保存图片');
                     return;
@@ -311,21 +425,29 @@
                 window.open(url);
             });
 
-            // 导出长图
+            // ========== 导出长图（隐藏按钮，由更多菜单触发） ==========
-            $('#btn-export-long').click(function () {
+            var exportLongBtn = $('<button type="button" id="btn-export-long-hidden" style="display:none;"></button>');
-                var btn = $(this);
+            $('body').append(exportLongBtn);
-                btn.prop('disabled', true).text('导出中...');
+            exportLongBtn.on('click', function () {
                 PhoneImageEngine.exportLongImage().then(function () {
-                    btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 导出长图');
                     layer.msg('长图已导出');
                 }).catch(function (err) {
-                    btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 导出长图');
                     layer.msg('导出失败: ' + err);
                 });
             });
 
-            // 历史记录弹窗
+            // ========== 历史记录（隐藏按钮，由更多菜单和设置旁入口触发） ==========
-            $('#btn-history').click(function () {
+            var historyBtn = $('<button type="button" id="btn-history" style="display:none;"></button>');
+            $('body').append(historyBtn);
+
+            // 重新生成（隐藏按钮，由更多菜单触发）
+            var rerenderBtn = $('<button type="button" id="btn-rerender" style="display:none;"></button>');
+            $('body').append(rerenderBtn);
+            rerenderBtn.on('click', function () {
+                doRender();
+            });
+
+            historyBtn.on('click', function () {
                 var loadIdx = layer.load();
                 $.get(historyListUrl, function (res) {
                     layer.close(loadIdx);
@@ -390,22 +512,12 @@
                     // 构建历史配置
                     var historyConfig = {};
                     if (cfg.size) historyConfig.size = cfg.size;
-                    if (cfg.fontSize || cfg.font_size) historyConfig.fontSize = cfg.fontSize || cfg.font_size;
                     if (cfg.watermark !== undefined) historyConfig.watermark = cfg.watermark;
                     if (cfg.pageAlignments) historyConfig.pageAlignments = cfg.pageAlignments;
 
-                    // 同步表单控件
+                    // 同步当前配置
-                    if (cfg.size) {
+                    if (cfg.size) currentConfig.size = cfg.size;
-                        $('[name="size"]').val(cfg.size);
+                    if (cfg.watermark !== undefined) currentConfig.watermark = cfg.watermark;
-                        form.render('select');
-                    }
-                    if (historyConfig.fontSize) {
-                        $('[name="fontSize"]').val(historyConfig.fontSize);
-                        $('#fontSizeValue').text(historyConfig.fontSize + 'px');
-                    }
-                    if (cfg.watermark !== undefined) {
-                        $('[name="watermark"]').val(cfg.watermark);
-                    }
 
                     lastOutputId = outputId;
                     layer.closeAll();
@@ -413,10 +525,10 @@
                     // 全量初始化引擎（加载历史是新内容，需要完整初始化）
                     PhoneImageEngine.init(postData, historyConfig);
                     var loadIdx3 = layer.load();
-                    PhoneImageEngine.render().then(function(pages) {
+                    PhoneImageEngine.render().then(function (pages) {
                         layer.close(loadIdx3);
                         layer.msg('已加载历史配置，共 ' + pages.length + ' 页');
-                    }).catch(function(err) {
+                    }).catch(function (err) {
                         layer.close(loadIdx3);
                         if (err !== 'rendering') layer.msg('渲染失败: ' + err);
                     });