feat(phone-image): DOM預覽渲染覈心邏輯實現

- renderDomPageThumbnails()完整實現：逐頁創建DOM容器+transform縮放
- 直接複用pages[].html（含品牌header/內容/頁碼），保證預覽=輸出
- 對齊select事件處理兼容DOM預覽和JPEG預覽兩種模式
- refreshDomPage()更新valign class
- 渲染進度日誌每5頁輸出

public/static/js/phone-image.js

@@ -1365,28 +1365,110 @@ var PhoneImageEngine = (function () {
 
     /**
      * DOM分页预览 - 渲染所有页面的缩略图
-     * TODO: T3将实现完整逻辑
-     * 当前只清空容器并创建占位
-     * @param {Object} sizeConfig
+     * 将domPages[]逐页创建为DOM元素，替代JPEG截图方案
+     * 每页使用transform:scale()缩放显示，保证与最终输出一致
+     * @param {Object} sizeConfig - {width, height}
      */
     function renderDomPageThumbnails(sizeConfig) {
         var $preview = $('#paginated-preview');
         $preview.empty();
-        // 完整实现在T3中
+
+        if (!domPages || domPages.length === 0) {
+            return;
+        }
+
+        // 确保size class在父容器上（CSS尺寸约束依赖此class）
+        var $parent = $preview.closest('.paginated-preview-area');
+        $parent.removeClass('size-xiaohongshu size-douyin').addClass('size-' + config.size);
+
+        // 计算缩略图缩放比例：容器高度 - 80(页码标签+上下padding)
+        var containerHeight = $preview.parent().height() || 700;
+        var scaleRatio = (containerHeight - 80) / sizeConfig.height;
+        var thumbWidth = Math.round(sizeConfig.width * scaleRatio);
+
+        // 设置预览容器为水平滚动布局
+        $preview.css({
+            'display': 'flex',
+            'flex-direction': 'row',
+            'gap': '20px',
+            'padding': '20px',
+            'flex-wrap': 'nowrap',
+            'overflow-x': 'auto'
+        });
+
+        var totalPages = domPages.length;
+        PhoneImageLogPanel.log('开始渲染DOM预览，共 ' + totalPages + ' 页', 'info');
+
+        // 逐页创建DOM缩略图
+        for (var i = 0; i < domPages.length; i++) {
+            var domPage = domPages[i];
+            var pageType = domPage.type;
+
+            // 创建缩略图包装器（参照appendThumbnail的交互层模式）
+            var $thumbItem = $('<div class="preview-thumb-item" data-page-index="' + i + '"></div>').css({
+                'flex-shrink': '0',
+                'width': thumbWidth + 'px',
+                'position': 'relative'
+            });
+
+            // 创建DOM分页容器（实际尺寸，通过transform缩放显示为缩略图）
+            var $container = $('<div class="dom-page-container"></div>').css({
+                'transform': 'scale(' + scaleRatio + ')',
+                'transform-origin': 'top left',
+                'width': sizeConfig.width + 'px',
+                'height': sizeConfig.height + 'px'
+            });
+
+            // 纯图片页特殊处理
+            if (domPage.isPureImage) {
+                $container.addClass('dom-page-pure-image');
+            }
+
+            // 将完整页面HTML放入容器
+            // pages[].html 是完整的 .phone-image-page 结构（含品牌header、内容、页码、水印）
+            $container.html(domPage.html);
+
+            $thumbItem.append($container);
+
+            // 页码标签（N/M格式）
+            var $pageNum = $('<span class="preview-thumb-page-num"></span>').text((i + 1) + '/' + totalPages);
+            $thumbItem.append($pageNum);
+
+            // 对齐select（仅内容页显示）
+            if (pageType === 'content') {
+                var pageNum = domPage.pageNum || (i + 1);
+                var currentAlign = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
+                var $select = $('<select class="thumb-alignment-select" data-page-index="' + i + '" data-page-num="' + pageNum + '">' +
+                    '<option value="top"' + (currentAlign === 'top' ? ' selected' : '') + '>置顶</option>' +
+                    '<option value="center"' + (currentAlign === 'center' ? ' selected' : '') + '>居中</option>' +
+                    '<option value="bottom"' + (currentAlign === 'bottom' ? ' selected' : '') + '>底部</option>' +
+                    '</select>');
+                $thumbItem.append($select);
+            }
+
+            $preview.append($thumbItem);
+
+            // 渲染进度日志（每5页或最后一页输出）
+            if ((i + 1) % 5 === 0 || i === domPages.length - 1) {
+                PhoneImageLogPanel.log('渲染DOM页面 ' + (i + 1) + '/' + totalPages, 'info');
+            }
+        }
     }
 
     /**
      * DOM分页预览 - 刷新指定页面的对齐方式
-     * TODO: T3将实现完整逻辑
+     * 更新 .phone-image-page 上的 valign class
      * @param {number} pageIndex - 页面索引(0-based)
      */
     function refreshDomPage(pageIndex) {
         var $containers = $('#paginated-preview .dom-page-container');
         if (pageIndex >= 0 && pageIndex < $containers.length) {
-            var $content = $containers.eq(pageIndex).find('.dom-page-content');
-            $content.removeClass('valign-top valign-center valign-bottom');
-            var alignment = config.pageAlignments[pageIndex] || 'top';
-            $content.addClass('valign-' + alignment);
+            var $phonePage = $containers.eq(pageIndex).find('.phone-image-page');
+            if ($phonePage.length) {
+                $phonePage.removeClass('valign-top valign-center valign-bottom');
+                var alignment = (config.pageAlignments && config.pageAlignments[pageIndex + 1]) || 'top';
+                $phonePage.addClass('valign-' + alignment);
+            }
         }
     }
 
@@ -1784,7 +1866,7 @@ var PhoneImageEngine = (function () {
         return div.innerHTML;
     }
 
-    // ===== 对齐下拉事件委托 =====
+    // ===== 对齐下拉事件委托（兼容JPEG预览和DOM预览两种模式） =====
     $(document).on('change', '.thumb-alignment-select', function () {
         var $select = $(this);
         var pageNum = parseInt($select.attr('data-page-num'), 10);
@@ -1792,8 +1874,16 @@ var PhoneImageEngine = (function () {
 
         setPageAlignment(pageNum, align);
 
-        // 仅CSS变更，不触发完整重渲染
         var $thumbItem = $select.closest('.preview-thumb-item');
+
+        // DOM预览模式：更新 .phone-image-page 的 valign class
+        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;
+        }
+
+        // JPEG预览模式：更新 img 的 align-self
         var $thumbImg = $thumbItem.find('.preview-thumb-img');
         if (align === 'center') {
             $thumbImg.css({ 'align-self': 'center' });