feat(phone-image): DOM分页預覽CSS+HTML基礎結構和數據模型

public/static/js/phone-image.js

@@ -100,9 +100,15 @@ var PhoneImageEngine = (function () {
         },
         contentPadding: 20,
         fontScale: 1,
-        tableFontScale: 1
+        tableFontScale: 1,
+        useDomPreview: true
     };
 
+    // ===== DOM分页预览状态 =====
+    var domPages = [];
+    var currentDomPageIndex = 0;
+    var totalDomPages = 0;
+
     // ===== 文章数据 =====
     var postData = {
         id: 0,
@@ -248,19 +254,30 @@ var PhoneImageEngine = (function () {
                 }
 
                 // 渲染缩略图
-                renderThumbnails(sizeConfig).then(function() {
-                    PhoneImageLogPanel.log('渲染完成，共 ' + pages.length + ' 页', 'success');
+                if (config.useDomPreview) {
+                    renderDomPages();
+                    PhoneImageLogPanel.log('DOM预览渲染完成，共 ' + pages.length + ' 页', 'success');
                     render._locked = false;
                     if (render._pending) {
                         render._pending = false;
                         render().catch(function() {});
                     }
                     deferred.resolve(pages);
-                }).catch(function(err) {
-                    PhoneImageLogPanel.log('渲染失败: ' + err, 'error');
-                    render._locked = false;
-                    deferred.reject(err);
-                });
+                } else {
+                    renderThumbnails(sizeConfig).then(function() {
+                        PhoneImageLogPanel.log('渲染完成，共 ' + pages.length + ' 页', 'success');
+                        render._locked = false;
+                        if (render._pending) {
+                            render._pending = false;
+                            render().catch(function() {});
+                        }
+                        deferred.resolve(pages);
+                    }).catch(function(err) {
+                        PhoneImageLogPanel.log('渲染失败: ' + err, 'error');
+                        render._locked = false;
+                        deferred.reject(err);
+                    });
+                }
             }).catch(function(err) {
                 PhoneImageLogPanel.log('分页计算失败: ' + err, 'error');
                 render._locked = false;
@@ -1311,6 +1328,68 @@ var PhoneImageEngine = (function () {
         return deferred.promise();
     }
 
+    /**
+     * DOM分页预览 - 将pages[]转换为domPages格式
+     * 替代canvas截图方案，直接操作DOM渲染
+     */
+    function renderDomPages() {
+        var sizeConfig = config.sizes[config.size] || config.sizes.xiaohongshu;
+
+        // 清空domPages
+        domPages = [];
+
+        // 如果没有pages数据，返回
+        if (!pages || pages.length === 0) {
+            return;
+        }
+
+        // 遍历pages，创建domPage对象
+        for (var i = 0; i < pages.length; i++) {
+            var page = pages[i];
+            var domPage = {
+                html: page.html || '',
+                type: page.type || 'content',
+                pageNum: page.pageNum || (i + 1),
+                valign: (config.pageAlignments && config.pageAlignments[i]) || 'top',
+                isPureImage: page.type === 'pure-image'
+            };
+            domPages.push(domPage);
+        }
+
+        totalDomPages = domPages.length;
+        currentDomPageIndex = 0;
+
+        // 调用渲染
+        renderDomPageThumbnails(sizeConfig);
+    }
+
+    /**
+     * DOM分页预览 - 渲染所有页面的缩略图
+     * TODO: T3将实现完整逻辑
+     * 当前只清空容器并创建占位
+     * @param {Object} sizeConfig
+     */
+    function renderDomPageThumbnails(sizeConfig) {
+        var $preview = $('#paginated-preview');
+        $preview.empty();
+        // 完整实现在T3中
+    }
+
+    /**
+     * DOM分页预览 - 刷新指定页面的对齐方式
+     * TODO: T3将实现完整逻辑
+     * @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);
+        }
+    }
+
     /**
      * 初始化缩略图容器（流式渲染第一步：清空容器）
      * @param {Object} sizeConfig
@@ -1735,6 +1814,9 @@ var PhoneImageEngine = (function () {
         syncPreview: syncPreview,
         setPageAlignment: setPageAlignment,
         exportLongImage: exportLongImage,
+        renderDomPages: renderDomPages,
+        renderDomPageThumbnails: renderDomPageThumbnails,
+        refreshDomPage: refreshDomPage,
         logPanel: PhoneImageLogPanel,
         getContentHtml: function () {
             if (window.phoneImageEditor) {