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;