修复中间预览区滚动和表格溢出空白页

- 中间预览区: 改为flex布局, #render-preview设flex:1+min-height:0实现滚动
- 表格溢出: 溢出路径中TABLE块优先用splitTableByRows按行拆分
  替代margin-top负值CSS裁切,避免续接页丢失表头和内容不可见
  第一个chunk与当前页已有内容(H2等)同行,剩余chunks独立成页

public/static/js/phone-image.js

@@ -698,6 +698,52 @@ var PhoneImageEngine = (function () {
 
             if (currentHeight + block.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
                 var remainingSpace = contentAreaHeight - currentHeight;
+
+                // TABLE块溢出时，优先用按行拆分替代CSS裁切续接
+                // 因为margin-top负值续接会导致表格失去表头、可见内容极少
+                if (block.type === 'table' && remainingSpace > 40) {
+                    // 用剩余空间拆分第一部分（与当前页已有内容同行）
+                    var tableParts = splitTableByRows(block, remainingSpace);
+                    if (tableParts.length > 0) {
+                        currentPageBlocks.push(tableParts[0]);
+                        // 推出当前页
+                        contentPages.push(generateContentPage(
+                            currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
+                        ));
+                        pageNumber++;
+                        currentPageBlocks = [];
+                        currentHeight = 0;
+                        currentPageOverflowOffset = 0;
+
+                        // 剩余部分：如果tableParts还有更多chunk，直接用
+                        // 否则重新按contentAreaHeight拆分原始TABLE取后续部分
+                        if (tableParts.length > 1) {
+                            for (var tp = 1; tp < tableParts.length; tp++) {
+                                contentPages.push(generateContentPage(
+                                    [tableParts[tp]], pageNumber, sizeConfig, false, 0
+                                ));
+                                pageNumber++;
+                            }
+                        } else {
+                            // 整个TABLE都在一个chunk中，但第一部分已被截断
+                            // 需要按contentAreaHeight重新拆分，跳过第一页已显示的行数
+                            var fullParts = splitTableByRows(block, contentAreaHeight);
+                            // fullParts中可能有多个chunk，需要确定跳过几个
+                            // remainingSpace对应第一个chunk，后续chunk用contentAreaHeight
+                            // 简化：用fullParts从第2个开始（第1个已显示在remainingSpace中）
+                            // 但rowsPerPage不同，不完全对应。需要重新拆分剩余行
+                            // 最安全的做法：直接用fullParts的第2+个chunk
+                            for (var fp = 1; fp < fullParts.length; fp++) {
+                                contentPages.push(generateContentPage(
+                                    [fullParts[fp]], pageNumber, sizeConfig, false, 0
+                                ));
+                                pageNumber++;
+                            }
+                        }
+                    }
+                    continue;
+                }
+
                 if (remainingSpace > 40) {
                     // 放入当前页，CSS overflow:hidden 截断溢出部分
                     currentPageBlocks.push(block);

view/admin/post/phone_image.html

@@ -83,9 +83,11 @@
 
         .render-preview-area {
             width: 540px;
-            overflow: hidden;
+            display: flex;
+            flex-direction: column;
             background: #fff;
             flex-shrink: 0;
+            overflow: hidden;
         }
 
         .render-preview-area .preview-header {
@@ -94,10 +96,12 @@
             border-bottom: 1px solid #e8e8e8;
             font-size: 13px;
             color: #999;
+            flex-shrink: 0;
         }
 
         #render-preview {
-            min-height: 300px;
+            flex: 1;
+            min-height: 0;
             padding: 20px;
             box-sizing: border-box;
             overflow-y: scroll;