feat(phone-image): 段落按行截断+overflow跨頁續接

- paginateContent新增overflow截斷:剩餘空間>40px時放入當前頁(CSS裁切)
- generateContentPage新增overflowOffset參數:續接頁用負margin-top偏移
- 跨多頁溢出while循環處理:單個塊可跨越3+頁
- 保留orphan control和splitOversizedBlock邏輯
- 不限制塊類型:段落/表格/代碼塊/圖片都可截斷
This commit is contained in:
augushong
2026-05-19 00:21:34 +08:00
parent f274691ba7
commit 63459832a5

View File

@@ -619,6 +619,7 @@ var PhoneImageEngine = (function () {
var currentPageBlocks = [];
var currentHeight = 0;
var pageNumber = 1;
var currentPageOverflowOffset = 0; // 续接页偏移量0表示普通页
for (var i = 0; i < blocks.length; i++) {
var block = blocks[i];
@@ -628,10 +629,11 @@ var PhoneImageEngine = (function () {
// 结束当前页
if (currentPageBlocks.length > 0) {
contentPages.push(generateContentPage(
currentPageBlocks, pageNumber, sizeConfig, false
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
));
currentPageBlocks = [];
currentHeight = 0;
currentPageOverflowOffset = 0;
pageNumber++;
}
continue; // 跳过这个 page-break 块本身
@@ -651,10 +653,11 @@ var PhoneImageEngine = (function () {
// 先把当前页已有的内容推出去
if (currentPageBlocks.length > 0) {
contentPages.push(generateContentPage(
currentPageBlocks, pageNumber, sizeConfig, false
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
));
currentPageBlocks = [];
currentHeight = 0;
currentPageOverflowOffset = 0;
pageNumber++;
}
@@ -670,10 +673,11 @@ var PhoneImageEngine = (function () {
var sb = splitBlocks[s];
if (currentHeight + sb.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
contentPages.push(generateContentPage(
currentPageBlocks, pageNumber, sizeConfig, false
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
));
currentPageBlocks = [];
currentHeight = 0;
currentPageOverflowOffset = 0;
pageNumber++;
}
currentPageBlocks.push(sb);
@@ -688,37 +692,46 @@ var PhoneImageEngine = (function () {
if (currentHeight + block.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
var remainingSpace = contentAreaHeight - currentHeight;
// 检查是否可以按句拆分来填满剩余空间
var canSplit = (block.type === 'p' || block.type === 'blockquote') &&
block.estimatedHeight <= contentAreaHeight && remainingSpace > 50;
if (remainingSpace > 40) {
// 放入当前页CSS overflow:hidden 截断溢出部分
currentPageBlocks.push(block);
if (canSplit) {
// 按句拆分,逐步填入页面
var splitParts = splitOversizedBlock(block, contentAreaHeight);
if (splitParts.length > 1) {
// 逐句填入当前页剩余空间
for (var sp = 0; sp < splitParts.length; sp++) {
if (currentHeight + splitParts[sp].estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
contentPages.push(generateContentPage(
currentPageBlocks, pageNumber, sizeConfig, false
));
currentPageBlocks = [];
currentHeight = 0;
pageNumber++;
}
currentPageBlocks.push(splitParts[sp]);
currentHeight += splitParts[sp].estimatedHeight;
}
// 跳过后面的 currentPageBlocks.push(block),用拆分后的块代替
continue;
// 推出当前页(含溢出块,视觉上被 .page-content { overflow:hidden } 裁切)
contentPages.push(generateContentPage(
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
));
pageNumber++;
// 续接:下一页从截断处继续显示同一个块
var overflowOffset = remainingSpace;
var remainingHeight = block.estimatedHeight - overflowOffset;
// 处理跨多页溢出一个块可能跨越3+页)
while (remainingHeight > contentAreaHeight) {
contentPages.push(generateContentPage(
[block], pageNumber, sizeConfig, false, overflowOffset
));
pageNumber++;
overflowOffset += contentAreaHeight;
remainingHeight -= contentAreaHeight;
}
// 最后一部分续接,后续块可以继续添加到这一页
currentPageBlocks = [block];
currentHeight = remainingHeight;
currentPageOverflowOffset = overflowOffset;
// 块已在上方处理完毕,跳过底部的默认 push
continue;
}
// 不可拆分(img/pre/table/h)或拆分失败,直接换页
// 剩余空间太小(<40px),不值得截断,直接换页
contentPages.push(generateContentPage(
currentPageBlocks, pageNumber, sizeConfig, false
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
));
currentPageBlocks = [];
currentHeight = 0;
currentPageOverflowOffset = 0;
pageNumber++;
}
@@ -732,12 +745,13 @@ var PhoneImageEngine = (function () {
currentHeight -= block.estimatedHeight;
if (currentPageBlocks.length > 0) {
contentPages.push(generateContentPage(
currentPageBlocks, pageNumber, sizeConfig, false
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
));
pageNumber++;
}
currentPageBlocks = [block];
currentHeight = block.estimatedHeight;
currentPageOverflowOffset = 0;
}
}
}
@@ -745,7 +759,7 @@ var PhoneImageEngine = (function () {
// 最后一页
if (currentPageBlocks.length > 0) {
contentPages.push(generateContentPage(
currentPageBlocks, pageNumber, sizeConfig, true
currentPageBlocks, pageNumber, sizeConfig, true, currentPageOverflowOffset
));
}
@@ -1039,7 +1053,7 @@ var PhoneImageEngine = (function () {
/**
* 生成内容页HTML含逐页对齐支持
*/
function generateContentPage(blocks, pageNum, sizeConfig, isLast) {
function generateContentPage(blocks, pageNum, sizeConfig, isLast, overflowOffset) {
// 读取逐页对齐配置
var alignment = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
var valignClass = '';
@@ -1067,9 +1081,16 @@ var PhoneImageEngine = (function () {
// 正文内容区
html += '<div class="page-content">';
// 续接页用内层div+负margin-top偏移使截断处之后的内容可见
if (overflowOffset && overflowOffset > 0) {
html += '<div style="margin-top:-' + overflowOffset + 'px;">';
}
for (var i = 0; i < blocks.length; i++) {
html += blocks[i].html;
}
if (overflowOffset && overflowOffset > 0) {
html += '</div>';
}
html += '</div>';
// 页脚 - 占位render() 中会替换页码