fix(phone-image): 修复代码块/表格转换DOM索引失效bug,增加重新生成按钮和中间栏表格样式

- convertCodeBlocks/convertTables: 改为每次重新find().first()替代缓存索引
- 修复replaceWith后jQuery集合中后续元素DOM引用失效的问题
- 新增'重新生成'按钮,强制重新渲染缩略图
- 新增中间栏content-flow-block表格CSS样式
This commit is contained in:
augushong
2026-05-03 22:56:34 +08:00
parent 168f0a9adc
commit 2233b2b71a
3 changed files with 23 additions and 28 deletions

View File

@@ -591,3 +591,9 @@
border: none;
padding: 0;
}
/* 中间栏表格样式 */
.content-flow-block table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.content-flow-block th { background-color: #f0f0f0; font-weight: bold; padding: 8px 10px; border: 1px solid #ddd; text-align: left; }
.content-flow-block td { padding: 8px 10px; border: 1px solid #ddd; }
.content-flow-block tr:nth-child(even) td { background-color: #f9f9f9; }

View File

@@ -691,23 +691,14 @@ var PhoneImageEngine = (function () {
Prism.highlightElement(this);
});
// 找到所有代码块,逐个截图替换
var $preBlocks = $staging.find('pre');
if ($preBlocks.length === 0) {
deferred.resolve();
return deferred.promise();
}
var idx = 0;
var total = $preBlocks.length;
// 逐个截图替换,每次重新查找避免 replaceWith 后索引失效
function convertNext() {
if (idx >= total) {
var $pre = $staging.find('pre').first();
if ($pre.length === 0) {
deferred.resolve();
return;
}
var $pre = $preBlocks.eq(idx);
html2canvas($pre[0], {
scale: 2,
useCORS: true,
@@ -724,11 +715,10 @@ var PhoneImageEngine = (function () {
margin: '10px 0'
});
$pre.replaceWith($img);
idx++;
convertNext();
}).catch(function () {
// 截图失败则保留原始代码块
idx++;
// 截图失败则跳过当前元素继续处理下一个
$pre.remove();
convertNext();
});
}
@@ -746,22 +736,14 @@ var PhoneImageEngine = (function () {
var deferred = $.Deferred();
var $staging = $('#render-staging');
var $tables = $staging.find('.page-content table');
if ($tables.length === 0) {
deferred.resolve();
return deferred.promise();
}
var idx = 0;
var total = $tables.length;
// 逐个截图替换,每次重新查找避免 replaceWith 后索引失效
function convertNext() {
if (idx >= total) {
var $table = $staging.find('.page-content table').first();
if ($table.length === 0) {
deferred.resolve();
return;
}
var $table = $tables.eq(idx);
html2canvas($table[0], {
scale: 2,
useCORS: true,
@@ -778,10 +760,10 @@ var PhoneImageEngine = (function () {
margin: '10px 0'
});
$table.replaceWith($img);
idx++;
convertNext();
}).catch(function () {
idx++;
// 截图失败则跳过当前元素继续处理下一个
$table.remove();
convertNext();
});
}

View File

@@ -144,6 +144,8 @@
<!-- 操作按钮 -->
<div class="action-btns">
<button type="button" class="layui-btn layui-btn-primary" id="btn-rerender"><i
class="layui-icon layui-icon-refresh"></i> 重新生成</button>
<button type="button" class="layui-btn layui-btn-normal" id="btn-save"><i
class="layui-icon layui-icon-ok"></i> 保存</button>
<button type="button" class="layui-btn layui-btn-normal" id="btn-generate"><i
@@ -241,6 +243,11 @@
}, 300);
}
// 重新生成(强制重新渲染缩略图)
$('#btn-rerender').click(function () {
doRender();
});
// 保存配置(不生成图片)
$('#btn-save').click(function () {
var btn = $(this);