fix(phone-image): 修复分割线样式覆盖和表格丢行问题

1. 删除CSS覆盖wangeditor divider默认样式的规则,保留原生分割线外观
2. 新增splitTableByRows函数,超大表格按行拆分渲染,每页保留表头
3. splitOversizedBlock对表格不再跳过,改为调用splitTableByRows
This commit is contained in:
augushong
2026-05-12 22:07:26 +08:00
parent 30291a9dca
commit ccbfdde73e
2 changed files with 78 additions and 46 deletions

View File

@@ -525,15 +525,88 @@ var PhoneImageEngine = (function () {
* @param {number} pageHeight - 可用内容高度
* @returns {Array} 拆分后的块数组
*/
/**
* 将超大表格按行拆分为多个表格块
* 保留表头thead或第一行tr在每个拆分后的表格中
* @param {Object} block - 表格块 { type:'table', html, estimatedHeight }
* @param {number} pageHeight - 可用内容高度
* @returns {Array} 拆分后的块数组
*/
function splitTableByRows(block, pageHeight) {
var $table = $(block.html);
var $allRows = $table.find('tr');
if ($allRows.length <= 1) return [block];
// 提取表头thead 或第一行)
var $thead = $table.find('thead');
var headerHtml = '';
var dataStartIdx = 0;
if ($thead.length > 0) {
headerHtml = '<thead>' + $thead.html() + '</thead>';
dataStartIdx = 0; // 数据行从 thead 之后开始
// 检查 tbody
var $tbody = $table.find('tbody');
if ($tbody.length > 0) {
$allRows = $tbody.find('tr');
}
} else {
// 第一行作为表头
headerHtml = '<tr>' + $allRows.eq(0).html() + '</tr>';
dataStartIdx = 1;
}
// 估算每行高度
var rowCount = $allRows.length - dataStartIdx;
if (rowCount <= 0) return [block];
var perRowHeight = block.estimatedHeight / ($allRows.length);
// 表头高度
var headerHeight = perRowHeight;
// 每页能放的数据行数
var rowsPerPage = Math.floor((pageHeight - headerHeight) / perRowHeight);
if (rowsPerPage < 1) rowsPerPage = 1;
// 保留原始表格属性class, style 等)
var tableAttrs = '';
var attrs = $table[0].attributes;
for (var a = 0; a < attrs.length; a++) {
if (attrs[a].name !== 'class' || attrs[a].value.indexOf('w-e') === -1) {
tableAttrs += ' ' + attrs[a].name + '="' + attrs[a].value + '"';
}
}
var result = [];
for (var r = dataStartIdx; r < $allRows.length; r += rowsPerPage) {
var chunkHtml = '<table' + tableAttrs + '>';
chunkHtml += headerHtml;
chunkHtml += '<tbody>';
var end = Math.min(r + rowsPerPage, $allRows.length);
for (var ri = r; ri < end; ri++) {
chunkHtml += '<tr>' + $allRows.eq(ri).html() + '</tr>';
}
chunkHtml += '</tbody></table>';
var chunkRows = end - r + (headerHtml ? 1 : 0);
result.push({
type: 'table',
html: chunkHtml,
estimatedHeight: Math.round(chunkRows * perRowHeight)
});
}
return result.length > 0 ? result : [block];
}
function splitOversizedBlock(block, pageHeight) {
// 图片块不拆分,保留原样(会被截断但保持完整)
if (block.type === 'img') {
return [block];
}
// 表格块不拆分,保留原样
// 表格块:按行拆分
if (block.type === 'table') {
return [block];
return splitTableByRows(block, pageHeight);
}
// 代码块不拆分,保留原样