From f3f209c4030dddad0f29225236093441b137de02 Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Sun, 3 May 2026 09:14:20 +0800
Subject: [PATCH] refactor(phone-image): thumbnail alignment toggles and
 saveImages uses staging

---
 public/static/js/phone-image.js | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js
index 7b3578c..739d9f0 100644
--- a/public/static/js/phone-image.js
+++ b/public/static/js/phone-image.js
@@ -76,7 +76,7 @@ var PhoneImageEngine = (function () {
         // 内容流事件委托（只绑定一次）
         $(document).off('click', '.break-inserter-btn');
         $(document).off('click', '.remove-break-btn');
-        $(document).off('click', '.page-alignment-toggle');
+        $(document).off('click', '.thumb-alignment-toggle');
 
         $(document).on('click', '.break-inserter-btn', function () {
             var afterIndex = parseInt($(this).parent().data('after-index'), 10);
@@ -88,7 +88,7 @@ var PhoneImageEngine = (function () {
             removePageBreak(index);
         });
 
-        $(document).on('click', '.page-alignment-toggle', function () {
+        $(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';
@@ -713,6 +713,17 @@ var PhoneImageEngine = (function () {
             var $pageNum = $('<span class="preview-thumb-page-num">' + (i + 1) + '/' + dataUrls.length + '</span>');
             $item.append($pageNum);
 
+            // 对齐按钮（仅内容页）
+            if (pages[i] && pages[i].type === 'content') {
+                var pageNum = pages[i].pageNum || (i);
+                var currentAlign = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
+                var isActiveCenter = currentAlign === 'center';
+                var $toggle = $('<button class="thumb-alignment-toggle' + (isActiveCenter ? ' active-center' : '') + '" data-page-index="' + i + '" data-page-num="' + pageNum + '">' +
+                    (isActiveCenter ? '\u2195' : '\u2191') +
+                    '</button>');
+                $item.append($toggle);
+            }
+
             $preview.append($item);
         }
     }
@@ -778,13 +789,6 @@ var PhoneImageEngine = (function () {
         return deferred.promise();
     }
 
-    /**
-     * 为每页渲染逐页对齐切换指示器
-     */
-    function renderAlignmentToggles() {
-        // No-op: alignment toggles are now rendered as part of displayThumbnails
-    }
-
     /**
      * 渲染内容流到 #content-flow 容器
      * @param {Array} blocks - parseHtmlToBlocks 返回的块数组
@@ -906,7 +910,8 @@ var PhoneImageEngine = (function () {
     function saveImages(postId, saveConfig, onProgress) {
         var deferred = $.Deferred();
 
-        generateImages(onProgress).then(function (canvases) {
+        capturePagesFromStaging().then(function (canvases) {
+            if (onProgress) onProgress(canvases.length, canvases.length, null);
             var pagesData = [];
             for (var i = 0; i < canvases.length; i++) {
                 pagesData.push(canvases[i].toDataURL('image/jpeg', 0.92));
@@ -1071,7 +1076,6 @@ var PhoneImageEngine = (function () {
         renderContentFlow: renderContentFlow,
         insertPageBreak: insertPageBreak,
         removePageBreak: removePageBreak,
-        renderAlignmentToggles: renderAlignmentToggles,
         exportLongImage: exportLongImage
     };
 })();