feat(phone-image): 對齊持久化+防抖自動保存

- saveImages新增mergedConfig合併pageAlignments
- 新增debouncedSaveConfig(): 300ms防抖自動保存
- 對齊change handler調用refreshDomPage+debouncedSaveConfig
- 重置按鈕逐頁刷新DOM+防抖保存
- HTML新增phone-image:save-config事件監聽器
- currentConfig初始化正確同步pageAlignments

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
+        // 防抖自动保存config
-        var $thumbImg = $thumbItem.find('.preview-thumb-img');
+        debouncedSaveConfig();
-        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' });
-        }
     });
 
     // ===== 公开API =====
@@ -2015,6 +2041,7 @@ var PhoneImageEngine = (function () {
         renderDomPages: renderDomPages,
         renderDomPageThumbnails: renderDomPageThumbnails,
         refreshDomPage: refreshDomPage,
+        debouncedSaveConfig: debouncedSaveConfig,
         logPanel: PhoneImageLogPanel,
         getContentHtml: function () {
             if (window.phoneImageEditor) {

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');
+                });
+            });
+
             // ========== 保存状态指示器 ==========
             $('<span id="save-state" style="font-size:12px;color:#999;">已保存</span>').insertAfter('#btn-generate');