diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js index 2422b22..d85bbf6 100644 --- a/public/static/js/phone-image.js +++ b/public/static/js/phone-image.js @@ -1723,13 +1723,18 @@ var PhoneImageEngine = (function () { } // 第三步:发送到后端 + // 合并保存配置,确保pageAlignments来自引擎内部config + var mergedConfig = $.extend({}, saveConfig || config, { + pageAlignments: config.pageAlignments || {} + }); + $.ajax({ url: '/index.php/admin/post/savePostOutput', type: 'POST', data: JSON.stringify({ post_id: postId, output_type: 'phone_image', - config: saveConfig || config, + config: mergedConfig, content_html: postData.content_html, pages: pagesData, long_image: longImageData @@ -1838,6 +1843,21 @@ var PhoneImageEngine = (function () { config.pageAlignments[pageNum] = align; } + // ===== 对齐防抖保存 ===== + var _saveConfigTimer = null; + + /** + * 防抖保存config(对齐变更时使用) + * 避免频繁触发保存请求,300ms内多次调用只执行最后一次 + */ + function debouncedSaveConfig() { + if (_saveConfigTimer) clearTimeout(_saveConfigTimer); + _saveConfigTimer = setTimeout(function () { + // 触发自定义事件,由phone_image.html中的监听器处理实际保存 + $(document).trigger('phone-image:save-config'); + }, 300); + } + // ===== 长图base64生成(不触发下载) ===== /** @@ -1977,9 +1997,11 @@ var PhoneImageEngine = (function () { // ===== 对齐下拉事件委托(兼容JPEG预览和DOM预览两种模式) ===== $(document).on('change', '.thumb-alignment-select', function () { var $select = $(this); + var pageIndex = parseInt($select.attr('data-page-index'), 10); var pageNum = parseInt($select.attr('data-page-num'), 10); var align = $select.val(); + // 更新引擎内部config setPageAlignment(pageNum, align); var $thumbItem = $select.closest('.preview-thumb-item'); @@ -1988,18 +2010,22 @@ var PhoneImageEngine = (function () { var $phonePage = $thumbItem.find('.dom-page-container .phone-image-page'); if ($phonePage.length) { $phonePage.removeClass('valign-top valign-center valign-bottom').addClass('valign-' + align); - return; + // 额外刷新确保对齐一致 + refreshDomPage(pageIndex); + } else { + // JPEG预览模式:更新 img 的 align-self + var $thumbImg = $thumbItem.find('.preview-thumb-img'); + if (align === 'center') { + $thumbImg.css({ 'align-self': 'center' }); + } else if (align === 'bottom') { + $thumbImg.css({ 'align-self': 'flex-end' }); + } else { + $thumbImg.css({ 'align-self': 'flex-start' }); + } } - // JPEG预览模式:更新 img 的 align-self - var $thumbImg = $thumbItem.find('.preview-thumb-img'); - if (align === 'center') { - $thumbImg.css({ 'align-self': 'center' }); - } else if (align === 'bottom') { - $thumbImg.css({ 'align-self': 'flex-end' }); - } else { - $thumbImg.css({ 'align-self': 'flex-start' }); - } + // 防抖自动保存config + debouncedSaveConfig(); }); // ===== 公开API ===== @@ -2015,6 +2041,7 @@ var PhoneImageEngine = (function () { renderDomPages: renderDomPages, renderDomPageThumbnails: renderDomPageThumbnails, refreshDomPage: refreshDomPage, + debouncedSaveConfig: debouncedSaveConfig, logPanel: PhoneImageLogPanel, getContentHtml: function () { if (window.phoneImageEditor) { diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html index a3bd978..79ef971 100644 --- a/view/admin/post/phone_image.html +++ b/view/admin/post/phone_image.html @@ -330,6 +330,7 @@ currentConfig.watermark = initConfig.watermark; currentConfig.fontScale = initConfig.fontScale; currentConfig.tableFontScale = initConfig.tableFontScale; + currentConfig.pageAlignments = initConfig.pageAlignments || {}; // ========== wangeditor 初始化 ========== var E = window.wangEditor; @@ -694,8 +695,17 @@ currentConfig.pageAlignments = {}; if (typeof PhoneImageEngine !== 'undefined') { PhoneImageEngine.updateConfig({ pageAlignments: {} }); + // 逐页重置对齐并刷新DOM + var totalPages = $('.preview-thumb-item').length; + for (var i = 0; i < totalPages; i++) { + PhoneImageEngine.setPageAlignment(i + 1, 'top'); + PhoneImageEngine.refreshDomPage(i); + } + // 重置所有select控件 + $('.thumb-alignment-select').val('top'); + // 防抖自动保存 + PhoneImageEngine.debouncedSaveConfig(); } - doRender(); layer.msg('已重置所有页面对齐'); }); @@ -733,6 +743,28 @@ } } + // ========== 引擎内部防抖保存事件监听 ========== + $(document).on('phone-image:save-config', function () { + // 同步pageAlignments到currentConfig + currentConfig.pageAlignments = PhoneImageEngine.updateConfig.call.length ? currentConfig.pageAlignments : currentConfig.pageAlignments; + updateSaveState('saving'); + PhoneImageLogPanel.log('自动保存对齐配置...', 'info'); + PhoneImageEngine.saveConfig(postData.postId, { + 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; + PhoneImageLogPanel.log('对齐配置已保存', 'success'); + updateSaveState('saved'); + }).catch(function(err) { + PhoneImageLogPanel.log('对齐配置保存失败: ' + err, 'error'); + updateSaveState('error'); + }); + }); + // ========== 保存状态指示器 ========== $('已保存').insertAfter('#btn-generate');