feat(phone-image): add save button and state management

public/static/js/phone-image.js

@@ -1260,6 +1260,48 @@ var PhoneImageEngine = (function () {
         return deferred.promise();
     }
 
+    /**
+     * 保存排版配置到服务端（不生成图片）
+     * @param {number} postId 文章ID
+     * @param {Object} saveConfig 配置信息 {size, fontSize, watermark, content_html}
+     * @param {string} url 保存接口URL
+     * @returns {Promise} jQuery Deferred, resolves with {output_id}
+     */
+    function saveConfig(postId, saveConfig, url) {
+        var deferred = $.Deferred();
+
+        var payload = {
+            post_id: postId,
+            output_type: 'phone_image',
+            config: {
+                size: saveConfig.size || config.size,
+                fontSize: saveConfig.fontSize || config.fontSize,
+                watermark: saveConfig.watermark || config.watermark,
+                pageAlignments: config.pageAlignments || {}
+            },
+            content_html: saveConfig.content_html || postData.content_html
+        };
+
+        $.ajax({
+            url: url || '',
+            type: 'POST',
+            data: JSON.stringify(payload),
+            contentType: 'application/json',
+            success: function (result) {
+                if (result.code === 0) {
+                    deferred.resolve(result.data || {});
+                } else {
+                    deferred.reject(result.msg || '保存失败');
+                }
+            },
+            error: function (xhr) {
+                deferred.reject('网络错误: ' + xhr.statusText);
+            }
+        });
+
+        return deferred.promise();
+    }
+
     /**
      * 将生成的canvas数组显示为缩略图
      * @param {Array} canvases canvas对象数组
@@ -1382,6 +1424,7 @@ var PhoneImageEngine = (function () {
         render: render,
         generateImages: generateImages,
         saveImages: saveImages,
+        saveConfig: saveConfig,
         showGeneratedThumbnails: showGeneratedThumbnails,
         switchSize: switchSize,
         getConfig: getConfig,

view/admin/post/phone_image.html

@@ -141,6 +141,8 @@
 
                 <!-- 操作按钮 -->
                 <div class="action-btns">
+                    <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
@@ -174,6 +176,7 @@
 
             var lastOutputId = null;
             var downloadBaseUrl = '{:url("post/downloadPostOutputZip", ["id" => 0])}';
+            var saveConfigUrl = '{:url("post/savePostOutputConfig")}';
 
             var postData = {
                 postId: {$post.id},
@@ -233,6 +236,27 @@
                 }, 300);
             }
 
+            // 保存配置（不生成图片）
+            $('#btn-save').click(function () {
+                var btn = $(this);
+                btn.prop('disabled', true);
+                layer.msg('保存中...');
+
+                PhoneImageEngine.saveConfig(postData.postId, {
+                    size: $('[name="size"]').val(),
+                    fontSize: parseInt($('[name="fontSize"]').val()) || 14,
+                    watermark: $('[name="watermark"]').val(),
+                    content_html: $('#post-content-html').html()
+                }, saveConfigUrl).then(function (data) {
+                    if (data.output_id) lastOutputId = data.output_id;
+                    layer.msg('保存成功');
+                }).catch(function (err) {
+                    layer.msg('保存失败: ' + err);
+                }).always(function () {
+                    setTimeout(function () { btn.prop('disabled', false); }, 2000);
+                });
+            });
+
             // 生成并保存
             $('#btn-generate').click(function () {
                 var btn = $(this);