From 8402da869f8972f03c5440effa18e533c4d83016 Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Tue, 19 May 2026 21:23:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=AD=E9=97=B4=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E5=8C=BA=E6=BB=9A=E5=8A=A8=E5=92=8C=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=BA=A2=E5=87=BA=E7=A9=BA=E7=99=BD=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js
index a726555..a96be18 100644
--- a/public/static/js/phone-image.js
+++ b/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);
diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html
index 3b57706..5446838 100644
--- a/view/admin/post/phone_image.html
+++ b/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;