986 lines
38 KiB
JavaScript
986 lines
38 KiB
JavaScript
/**
|
||
* 分块对比预览性能优化器
|
||
* 解决历史详情页分块对比的渲染性能问题
|
||
*/
|
||
|
||
class ChunkCompareOptimizer {
|
||
constructor() {
|
||
this.renderCache = new Map();
|
||
this.visibleChunks = new Set();
|
||
this.currentScrollPosition = 0;
|
||
this.observer = null;
|
||
this.renderQueue = [];
|
||
this.isRendering = false;
|
||
this.batchSize = 3; // 每批渲染的分块数量
|
||
this.chunkHeight = 300; // 估算的分块高度
|
||
this.bufferSize = 2; // 缓冲区大小（上下各2个分块）
|
||
}
|
||
|
||
/**
|
||
* 初始化优化器
|
||
*/
|
||
init() {
|
||
this.setupIntersectionObserver();
|
||
this.setupPerformanceMonitor();
|
||
}
|
||
|
||
/**
|
||
* 优化分块对比的渲染性能
|
||
* @param {Array} ocrChunks OCR分块数据
|
||
* @param {Array} translatedChunks 翻译分块数据
|
||
* @param {Object} options 渲染选项
|
||
* @returns {string} 优化后的HTML
|
||
*/
|
||
optimizeChunkComparison(ocrChunks, translatedChunks, options = {}) {
|
||
const startTime = performance.now();
|
||
const chunkCount = ocrChunks.length;
|
||
console.log(`[ChunkOptimizer] 开始优化渲染 ${chunkCount} 个分块`);
|
||
|
||
// 创建带骨架屏的容器
|
||
const containerHTML = this.createSkeletonContainer(chunkCount);
|
||
|
||
// 异步开始渲染
|
||
setTimeout(() => {
|
||
this.scheduleProgressiveRender(ocrChunks, translatedChunks, options);
|
||
}, 100);
|
||
|
||
const endTime = performance.now();
|
||
console.log(`[ChunkOptimizer] 初始化完成，耗时: ${(endTime - startTime).toFixed(2)}ms`);
|
||
|
||
return containerHTML;
|
||
}
|
||
|
||
/**
|
||
* 创建带骨架屏的容器
|
||
* @param {number} chunkCount 分块数量
|
||
* @returns {string} 容器HTML
|
||
*/
|
||
createSkeletonContainer(chunkCount) {
|
||
return `
|
||
<div class="chunk-compare-container" id="chunk-compare-container">
|
||
<!-- 分块将在这里渲染 -->
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* 生成骨架屏分块
|
||
* @param {number} count 骨架数量
|
||
* @returns {string} 骨架HTML
|
||
*/
|
||
generateSkeletonChunks(count) {
|
||
let skeletonHTML = '';
|
||
for (let i = 0; i < count; i++) {
|
||
skeletonHTML += `
|
||
<div class="chunk-pair skeleton-chunk">
|
||
<div class="block-outer">
|
||
<div class="chunk-header">
|
||
<div class="skeleton-line skeleton-title"></div>
|
||
<div class="skeleton-stats">
|
||
<div class="skeleton-line skeleton-stat"></div>
|
||
<div class="skeleton-line skeleton-stat"></div>
|
||
</div>
|
||
</div>
|
||
<div class="chunk-preview-container">
|
||
<div class="chunk-preview-row">
|
||
<div class="chunk-preview">
|
||
<div class="skeleton-line skeleton-label"></div>
|
||
<div class="skeleton-content">
|
||
<div class="skeleton-line"></div>
|
||
<div class="skeleton-line"></div>
|
||
<div class="skeleton-line skeleton-short"></div>
|
||
</div>
|
||
</div>
|
||
<div class="chunk-preview">
|
||
<div class="skeleton-line skeleton-label"></div>
|
||
<div class="skeleton-content">
|
||
<div class="skeleton-line"></div>
|
||
<div class="skeleton-line"></div>
|
||
<div class="skeleton-line skeleton-short"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skeleton-button"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
return skeletonHTML;
|
||
}
|
||
|
||
/**
|
||
* 为超大文档创建特殊容器
|
||
* @param {number} chunkCount 分块数量
|
||
* @param {Array} ocrChunks OCR分块
|
||
* @param {Array} translatedChunks 翻译分块
|
||
* @param {Object} options 选项
|
||
* @returns {string} 容器HTML
|
||
*/
|
||
createLargeDocumentContainer(chunkCount, ocrChunks, translatedChunks, options) {
|
||
// 立即保存数据到window对象供后续使用
|
||
window.largeDocumentData = {
|
||
ocrChunks,
|
||
translatedChunks,
|
||
options,
|
||
currentPage: 0,
|
||
pageSize: 10 // 每页显示10个分块
|
||
};
|
||
|
||
const totalPages = Math.ceil(chunkCount / 10);
|
||
|
||
return `
|
||
<div class="chunk-compare-title-bar">
|
||
<h3>分块对比 <span class="chunk-count">(${chunkCount}块)</span></h3>
|
||
<div class="chunk-controls">
|
||
<button id="swap-chunks-btn" title="切换原文/译文位置">⇆</button>
|
||
<button id="performance-toggle-btn" title="切换性能模式" class="performance-btn active">⚡</button>
|
||
</div>
|
||
</div>
|
||
<div class="large-document-notice">
|
||
<i class="fas fa-info-circle"></i>
|
||
<span>检测到大型文档，已启用高效浏览模式。使用分页浏览以获得更好的性能。</span>
|
||
</div>
|
||
<div class="chunk-pagination">
|
||
<button id="prev-page-btn" onclick="ChunkCompareOptimizer.instance.navigateToPage(-1)" disabled>
|
||
← 上一页
|
||
</button>
|
||
<span class="page-info">
|
||
第 <span id="current-page">1</span> 页，共 ${totalPages} 页
|
||
</span>
|
||
<button id="next-page-btn" onclick="ChunkCompareOptimizer.instance.navigateToPage(1)">
|
||
下一页 →
|
||
</button>
|
||
<div class="page-jump">
|
||
跳转到第
|
||
<input type="number" id="page-input" min="1" max="${totalPages}" value="1" style="width: 60px;">
|
||
页
|
||
<button onclick="ChunkCompareOptimizer.instance.jumpToPage()">跳转</button>
|
||
</div>
|
||
</div>
|
||
<div class="chunk-compare-container large-document-mode" id="chunk-compare-container">
|
||
${this.renderPageChunks(0, ocrChunks, translatedChunks, options)}
|
||
<div class="chunk-loading-indicator" style="display: none;">
|
||
<div class="loading-spinner"></div>
|
||
<span>正在加载分块...</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* 渲染指定页的分块
|
||
* @param {number} pageIndex 页索引
|
||
* @param {Array} ocrChunks OCR分块
|
||
* @param {Array} translatedChunks 翻译分块
|
||
* @param {Object} options 选项
|
||
* @returns {string} 分块HTML
|
||
*/
|
||
renderPageChunks(pageIndex, ocrChunks, translatedChunks, options) {
|
||
const pageSize = 10;
|
||
const startIndex = pageIndex * pageSize;
|
||
const endIndex = Math.min(startIndex + pageSize, ocrChunks.length);
|
||
|
||
let html = '';
|
||
for (let i = startIndex; i < endIndex; i++) {
|
||
const chunkElement = this.renderSingleChunkImmediate({
|
||
index: i,
|
||
ocrChunk: ocrChunks[i],
|
||
translatedChunk: translatedChunks[i],
|
||
options
|
||
});
|
||
html += chunkElement;
|
||
}
|
||
|
||
return html;
|
||
}
|
||
|
||
/**
|
||
* 立即渲染单个分块（用于分页模式）
|
||
* @param {Object} item 分块数据
|
||
* @returns {string} 分块HTML
|
||
*/
|
||
renderSingleChunkImmediate(item) {
|
||
const { index, ocrChunk, translatedChunk, options } = item;
|
||
return `
|
||
<div class="chunk-pair" data-chunk-index="${index}" id="chunk-${index}">
|
||
<div class="block-outer" data-block-index="${index}">
|
||
<div class="chunk-header">
|
||
<h4>第 ${index + 1} 块</h4>
|
||
<div class="chunk-stats">
|
||
<span class="char-count">原文: ${ocrChunk.length}字</span>
|
||
<span class="char-count">译文: ${translatedChunk.length}字</span>
|
||
</div>
|
||
</div>
|
||
<div class="chunk-loading" data-lazy-load="true">正在加载完整内容...</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* 导航到指定页面
|
||
* @param {number} direction 方向 (-1上一页, 1下一页)
|
||
*/
|
||
navigateToPage(direction) {
|
||
if (!window.largeDocumentData) return;
|
||
|
||
const data = window.largeDocumentData;
|
||
const totalPages = Math.ceil(data.ocrChunks.length / data.pageSize);
|
||
const newPage = Math.max(0, Math.min(totalPages - 1, data.currentPage + direction));
|
||
|
||
if (newPage === data.currentPage) return;
|
||
|
||
this.loadPage(newPage);
|
||
}
|
||
|
||
/**
|
||
* 跳转到指定页面
|
||
*/
|
||
jumpToPage() {
|
||
const pageInput = document.getElementById('page-input');
|
||
if (!pageInput || !window.largeDocumentData) return;
|
||
|
||
const targetPage = parseInt(pageInput.value) - 1; // 转换为0基索引
|
||
this.loadPage(targetPage);
|
||
}
|
||
|
||
/**
|
||
* 加载指定页面
|
||
* @param {number} pageIndex 页索引
|
||
*/
|
||
loadPage(pageIndex) {
|
||
if (!window.largeDocumentData) return;
|
||
|
||
const data = window.largeDocumentData;
|
||
const totalPages = Math.ceil(data.ocrChunks.length / data.pageSize);
|
||
|
||
if (pageIndex < 0 || pageIndex >= totalPages) return;
|
||
|
||
console.log(`[ChunkOptimizer] 加载第 ${pageIndex + 1} 页`);
|
||
|
||
// 显示加载指示器
|
||
const loadingIndicator = document.querySelector('.chunk-loading-indicator');
|
||
if (loadingIndicator) loadingIndicator.style.display = 'flex';
|
||
|
||
// 更新页面内容
|
||
setTimeout(() => {
|
||
const container = document.getElementById('chunk-compare-container');
|
||
if (container) {
|
||
container.innerHTML = this.renderPageChunks(
|
||
pageIndex,
|
||
data.ocrChunks,
|
||
data.translatedChunks,
|
||
data.options
|
||
) + `\n<div class=\"chunk-loading-indicator\" style=\"display: none;\">\n <div class=\"loading-spinner\"></div>\n <span>正在加载分块...</span>\n</div>`;
|
||
// 观察新插入的分块，进入视口即懒加载完整内容
|
||
this.observeChunks(container);
|
||
}
|
||
|
||
// 更新页面状态
|
||
data.currentPage = pageIndex;
|
||
|
||
// 更新UI
|
||
this.updatePageUI(pageIndex, totalPages);
|
||
|
||
// 隐藏加载指示器
|
||
if (loadingIndicator) loadingIndicator.style.display = 'none';
|
||
|
||
// 滚动到顶部
|
||
const chunkContainer = document.getElementById('chunk-compare-container');
|
||
if (chunkContainer) chunkContainer.scrollTop = 0;
|
||
|
||
}, 100);
|
||
}
|
||
|
||
/**
|
||
* 更新分页UI
|
||
* @param {number} currentPage 当前页
|
||
* @param {number} totalPages 总页数
|
||
*/
|
||
updatePageUI(currentPage, totalPages) {
|
||
const currentPageSpan = document.getElementById('current-page');
|
||
const pageInput = document.getElementById('page-input');
|
||
const prevBtn = document.getElementById('prev-page-btn');
|
||
const nextBtn = document.getElementById('next-page-btn');
|
||
|
||
if (currentPageSpan) currentPageSpan.textContent = currentPage + 1;
|
||
if (pageInput) pageInput.value = currentPage + 1;
|
||
if (prevBtn) prevBtn.disabled = currentPage === 0;
|
||
if (nextBtn) nextBtn.disabled = currentPage === totalPages - 1;
|
||
}
|
||
|
||
/**
|
||
* 复制分块内容
|
||
* @param {number} chunkIndex 分块索引
|
||
*/
|
||
copyChunkContent(chunkIndex) {
|
||
if (!window.largeDocumentData) return;
|
||
|
||
const data = window.largeDocumentData;
|
||
const ocrContent = data.ocrChunks[chunkIndex] || '';
|
||
const transContent = data.translatedChunks[chunkIndex] || '';
|
||
|
||
const contentToCopy = `第 ${chunkIndex + 1} 块内容:\n\n原文:\n${ocrContent}\n\n译文:\n${transContent}`;
|
||
|
||
navigator.clipboard.writeText(contentToCopy)
|
||
.then(() => {
|
||
// 显示复制成功提示
|
||
this.showTemporaryMessage(`第 ${chunkIndex + 1} 块内容已复制到剪贴板`);
|
||
})
|
||
.catch(err => {
|
||
console.error('复制失败:', err);
|
||
this.showTemporaryMessage('复制失败，请手动选择复制', 'error');
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 显示临时消息
|
||
* @param {string} message 消息内容
|
||
* @param {string} type 消息类型
|
||
*/
|
||
showTemporaryMessage(message, type = 'success') {
|
||
const messageEl = document.createElement('div');
|
||
messageEl.className = `temp-message temp-message-${type}`;
|
||
messageEl.textContent = message;
|
||
messageEl.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: ${type === 'success' ? '#10b981' : '#ef4444'};
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||
z-index: 10000;
|
||
font-size: 0.9em;
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
transition: all 0.3s ease;
|
||
`;
|
||
|
||
document.body.appendChild(messageEl);
|
||
|
||
// 显示动画
|
||
setTimeout(() => {
|
||
messageEl.style.opacity = '1';
|
||
messageEl.style.transform = 'translateY(0)';
|
||
}, 10);
|
||
|
||
// 3秒后移除
|
||
setTimeout(() => {
|
||
messageEl.style.opacity = '0';
|
||
messageEl.style.transform = 'translateY(-20px)';
|
||
setTimeout(() => {
|
||
if (messageEl.parentElement) {
|
||
messageEl.remove();
|
||
}
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
|
||
/**
|
||
* 创建虚拟化容器
|
||
* @param {number} totalChunks 总分块数量
|
||
* @returns {string} 容器HTML
|
||
*/
|
||
createVirtualContainer(totalChunks) {
|
||
// 对于大量分块，不使用虚拟化高度占位，避免巨大空白
|
||
const useVirtualization = totalChunks > 20;
|
||
const estimatedHeight = useVirtualization ? 0 : totalChunks * this.chunkHeight;
|
||
|
||
return `
|
||
<div class="chunk-compare-title-bar">
|
||
<h3>分块对比 <span class="chunk-count">(${totalChunks}块)</span></h3>
|
||
<div class="chunk-controls">
|
||
<button id="swap-chunks-btn" title="切换原文/译文位置">⇆</button>
|
||
<button id="performance-toggle-btn" title="切换性能模式" class="performance-btn">⚡</button>
|
||
</div>
|
||
</div>
|
||
<div class="chunk-compare-container" id="chunk-compare-container" style="position: relative;">
|
||
<!-- 动态渲染的分块将出现在这里 -->
|
||
<div class="chunk-loading-indicator" style="display: none;">
|
||
<div class="loading-spinner"></div>
|
||
<span>正在渲染分块...</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* 计划分批渲染
|
||
* @param {Array} ocrChunks OCR分块
|
||
* @param {Array} translatedChunks 翻译分块
|
||
* @param {Object} options 选项
|
||
*/
|
||
scheduleProgressiveRender(ocrChunks, translatedChunks, options) {
|
||
this.renderQueue = [];
|
||
|
||
// 对于大量分块，采用更保守的渲染策略
|
||
const isLargeDocument = ocrChunks.length > 50;
|
||
const initialRenderCount = isLargeDocument ?
|
||
Math.min(3, ocrChunks.length) : // 大文档只渲染前3块
|
||
Math.min(this.batchSize, ocrChunks.length);
|
||
|
||
// 调整批次大小
|
||
const dynamicBatchSize = isLargeDocument ? 2 : this.batchSize;
|
||
|
||
for (let i = 0; i < ocrChunks.length; i++) {
|
||
this.renderQueue.push({
|
||
index: i,
|
||
ocrChunk: ocrChunks[i],
|
||
translatedChunk: translatedChunks[i],
|
||
priority: i < initialRenderCount ? 'high' : 'normal',
|
||
options
|
||
});
|
||
}
|
||
|
||
// 更新批次大小
|
||
this.currentBatchSize = dynamicBatchSize;
|
||
|
||
// 开始渲染
|
||
this.processRenderQueue();
|
||
}
|
||
|
||
/**
|
||
* 处理渲染队列
|
||
*/
|
||
async processRenderQueue() {
|
||
if (this.isRendering) return;
|
||
this.isRendering = true;
|
||
|
||
const container = document.getElementById('chunk-compare-container');
|
||
|
||
if (!container) {
|
||
this.isRendering = false;
|
||
return;
|
||
}
|
||
|
||
// 按优先级排序
|
||
this.renderQueue.sort((a, b) => {
|
||
if (a.priority === 'high' && b.priority !== 'high') return -1;
|
||
if (a.priority !== 'high' && b.priority === 'high') return 1;
|
||
return a.index - b.index;
|
||
});
|
||
|
||
let rendered = 0;
|
||
const total = this.renderQueue.length;
|
||
|
||
while (this.renderQueue.length > 0) {
|
||
const currentBatchSize = this.currentBatchSize || this.batchSize;
|
||
const batch = this.renderQueue.splice(0, currentBatchSize);
|
||
|
||
// 使用 requestIdleCallback 进行空闲时间渲染
|
||
const anchor = container.querySelector('.chunk-loading-indicator');
|
||
await this.renderBatchWithIdleTime(batch, container, anchor);
|
||
|
||
rendered += batch.length;
|
||
|
||
// 给浏览器时间处理其他任务，对大文档增加更多延迟
|
||
const delay = total > 100 ? 32 : 16; // 大文档使用更长延迟
|
||
await this.delay(delay);
|
||
}
|
||
|
||
this.isRendering = false;
|
||
|
||
// 设置交叉观察器
|
||
this.observeChunks(container);
|
||
|
||
console.log(`[ChunkOptimizer] 所有分块渲染完成`);
|
||
}
|
||
|
||
/**
|
||
* 在空闲时间渲染批次
|
||
* @param {Array} batch 待渲染的批次
|
||
* @param {Element} container 容器元素
|
||
*/
|
||
renderBatchWithIdleTime(batch, container, anchor) {
|
||
return new Promise((resolve) => {
|
||
const renderBatch = (deadline) => {
|
||
while (batch.length > 0 && deadline.timeRemaining() > 5) {
|
||
const item = batch.shift();
|
||
const chunkElement = this.renderSingleChunk(item);
|
||
if (chunkElement) {
|
||
if (anchor && anchor.parentNode === container) {
|
||
container.insertBefore(chunkElement, anchor);
|
||
} else {
|
||
container.appendChild(chunkElement);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (batch.length > 0) {
|
||
// 还有未完成的渲染，继续下一个空闲周期
|
||
if (window.requestIdleCallback) {
|
||
requestIdleCallback(renderBatch, { timeout: 100 });
|
||
} else {
|
||
setTimeout(() => renderBatch({ timeRemaining: () => 16 }), 16);
|
||
}
|
||
} else {
|
||
resolve();
|
||
}
|
||
};
|
||
|
||
if (window.requestIdleCallback) {
|
||
requestIdleCallback(renderBatch, { timeout: 100 });
|
||
} else {
|
||
setTimeout(() => renderBatch({ timeRemaining: () => 16 }), 0);
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 渲染单个分块
|
||
* @param {Object} item 分块数据
|
||
* @returns {Element} 分块DOM元素
|
||
*/
|
||
renderSingleChunk(item) {
|
||
const { index, ocrChunk, translatedChunk, options } = item;
|
||
const cacheKey = `${index}_${ocrChunk.length}_${translatedChunk.length}`;
|
||
|
||
// 检查缓存
|
||
if (this.renderCache.has(cacheKey)) {
|
||
const cachedElement = this.renderCache.get(cacheKey).cloneNode(true);
|
||
this.updateChunkElement(cachedElement, index);
|
||
return cachedElement;
|
||
}
|
||
|
||
const startTime = performance.now();
|
||
|
||
// 创建分块元素（仅使用 chunk-pair 作为容器，不添加多余类）
|
||
const chunkElement = document.createElement('div');
|
||
chunkElement.className = 'chunk-pair';
|
||
chunkElement.dataset.chunkIndex = index;
|
||
chunkElement.id = `chunk-${index}`;
|
||
|
||
// 延迟渲染复杂内容
|
||
chunkElement.innerHTML = this.createChunkPlaceholder(index, ocrChunk, translatedChunk);
|
||
|
||
// 缓存元素
|
||
this.renderCache.set(cacheKey, chunkElement.cloneNode(true));
|
||
|
||
const endTime = performance.now();
|
||
console.log(`[ChunkOptimizer] 分块 ${index} 渲染完成，耗时: ${(endTime - startTime).toFixed(2)}ms`);
|
||
|
||
return chunkElement;
|
||
}
|
||
|
||
/**
|
||
* 更新从缓存克隆出来的分块元素的索引相关属性
|
||
* @param {Element} el - 分块根元素（.chunk-pair）
|
||
* @param {number} index - 目标分块索引
|
||
*/
|
||
updateChunkElement(el, index) {
|
||
try {
|
||
if (!el) return;
|
||
// 根元素 id 与 dataset
|
||
el.id = `chunk-${index}`;
|
||
el.dataset.chunkIndex = index;
|
||
// 内层 block-outer 的索引
|
||
const outer = el.querySelector('.block-outer');
|
||
if (outer) outer.setAttribute('data-block-index', String(index));
|
||
// 懒加载容器保持即可；更新加载按钮的 onclick（若存在）
|
||
const loadBtn = el.querySelector('.load-full-content-btn');
|
||
if (loadBtn) {
|
||
loadBtn.setAttribute('onclick', `ChunkCompareOptimizer.instance.loadFullChunk(${index})`);
|
||
}
|
||
// 更新工具栏上的 data-block 标记
|
||
el.querySelectorAll('[data-block]').forEach(node => {
|
||
node.setAttribute('data-block', String(index));
|
||
});
|
||
} catch (e) {
|
||
console.warn('[ChunkOptimizer] updateChunkElement failed:', e);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 创建分块占位符
|
||
* @param {number} index 分块索引
|
||
* @param {string} ocrChunk OCR内容
|
||
* @param {string} translatedChunk 翻译内容
|
||
* @returns {string} 占位符HTML
|
||
*/
|
||
createChunkPlaceholder(index, ocrChunk, translatedChunk) {
|
||
return `
|
||
<div class="block-outer" data-block-index="${index}">
|
||
<div class="chunk-header">
|
||
<h4>分块 ${index + 1}</h4>
|
||
<div class="chunk-stats">
|
||
<span class="char-count">原文: ${ocrChunk.length}字</span>
|
||
<span class="char-count">译文: ${translatedChunk.length}字</span>
|
||
</div>
|
||
</div>
|
||
<div class="chunk-loading" data-lazy-load="true">正在加载完整内容...</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* 获取内容预览
|
||
* @param {string} content 原始内容
|
||
* @returns {string} 预览内容
|
||
*/
|
||
getContentPreview(content) {
|
||
if (!content) return '(空内容)';
|
||
|
||
// 移除Markdown语法和特殊字符，获取纯文本预览
|
||
const plainText = content
|
||
.replace(/[#*`]/g, '') // 移除Markdown符号
|
||
.replace(/\s+/g, ' ') // 合并空白字符
|
||
.trim();
|
||
|
||
return plainText.length > 100
|
||
? plainText.substring(0, 100) + '...'
|
||
: plainText;
|
||
}
|
||
|
||
/**
|
||
* 加载完整分块内容
|
||
* @param {number} index 分块索引
|
||
*/
|
||
async loadFullChunk(index) {
|
||
const chunkElement = document.querySelector(`.chunk-pair[data-chunk-index="${index}"]`);
|
||
if (!chunkElement) return;
|
||
|
||
const lazyContainer = chunkElement.querySelector('[data-lazy-load="true"]');
|
||
if (!lazyContainer) return;
|
||
|
||
// 显示加载状态
|
||
lazyContainer.innerHTML = '<div class="chunk-loading">正在加载完整内容...</div>';
|
||
|
||
try {
|
||
// 获取原始数据
|
||
const ocrChunk = window.data?.ocrChunks?.[index] || '';
|
||
const translatedChunk = window.data?.translatedChunks?.[index] || '';
|
||
|
||
// 渲染完整内容
|
||
const fullContent = await this.renderFullChunkContent(
|
||
ocrChunk,
|
||
translatedChunk,
|
||
window.data?.images || [],
|
||
index,
|
||
window.data?.ocrChunks?.length || 0
|
||
);
|
||
|
||
// 用完整内容替换预览容器，避免预览样式残留在原文上方
|
||
lazyContainer.outerHTML = fullContent;
|
||
|
||
// 重新获取 chunkElement（节点结构发生了变化，但根容器不变）
|
||
const updatedChunkElement = document.querySelector(`.chunk-pair[data-chunk-index="${index}"]`) || chunkElement;
|
||
|
||
// 绑定事件
|
||
this.bindChunkEvents(updatedChunkElement);
|
||
|
||
// 应用当前比例到新插入的 align-flex 容器
|
||
try {
|
||
const ratio = (typeof window.chunkCompareRatio === 'number' && isFinite(window.chunkCompareRatio)) ? window.chunkCompareRatio : 0.5;
|
||
updatedChunkElement.querySelectorAll('.align-flex').forEach(flex => {
|
||
flex.style.setProperty('--ocr-ratio', (ratio * 100) + '%');
|
||
flex.style.setProperty('--trans-ratio', ((1 - ratio) * 100) + '%');
|
||
});
|
||
} catch (e) { /* ignore */ }
|
||
|
||
} catch (error) {
|
||
console.error(`加载分块 ${index} 失败:`, error);
|
||
lazyContainer.innerHTML = '<div class="chunk-error">加载失败，请重试</div>';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 渲染完整分块内容
|
||
* @param {string} ocrChunk OCR内容
|
||
* @param {string} translatedChunk 翻译内容
|
||
* @param {Array} images 图片数据
|
||
* @param {number} blockIndex 分块索引
|
||
* @param {number} totalBlocks 总分块数
|
||
* @returns {string} 完整内容HTML
|
||
*/
|
||
async renderFullChunkContent(ocrChunk, translatedChunk, images, blockIndex, totalBlocks) {
|
||
// 使用原有的渲染逻辑，但进行性能优化
|
||
const isOriginalFirstInChunkCompare = window.isOriginalFirstInChunkCompare !== false;
|
||
|
||
// 使用 Web Worker 进行 Markdown 解析（如果可用）
|
||
const ocrBlocks = await this.parseMarkdownAsync(ocrChunk);
|
||
const transBlocks = await this.parseMarkdownAsync(translatedChunk);
|
||
const aligned = this.alignBlocks(ocrBlocks, transBlocks);
|
||
|
||
let showMode = window[`showMode_block_${blockIndex}`] || 'both';
|
||
|
||
// 渲染工具栏
|
||
let html = `
|
||
<div class="block-toolbar" data-block-toolbar="${blockIndex}">
|
||
<div class="block-toolbar-left">
|
||
<span class="block-mode-btn ${showMode === 'both' ? 'active' : ''}" data-mode="both" data-block="${blockIndex}">对比</span>
|
||
<span class="block-mode-btn ${showMode === 'ocr' ? 'active' : ''}" data-mode="ocr" data-block="${blockIndex}">原文</span>
|
||
<span class="block-mode-btn ${showMode === 'trans' ? 'active' : ''}" data-mode="trans" data-block="${blockIndex}">译文</span>
|
||
<button class="block-copy-btn" data-block="${blockIndex}" title="复制本块内容">复制本块</button>
|
||
</div>
|
||
<div class="block-toolbar-right">
|
||
${blockIndex > 0 ? `<button class="block-nav-btn" data-dir="prev" data-block="${blockIndex}" title="上一段">↑</button>` : ''}
|
||
${blockIndex < totalBlocks-1 ? `<button class="block-nav-btn" data-dir="next" data-block="${blockIndex}" title="下一段">↓</button>` : ''}
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 批量渲染对齐的内容
|
||
const alignedHTML = await this.renderAlignedContentAsync(aligned, images, blockIndex, isOriginalFirstInChunkCompare);
|
||
html += alignedHTML;
|
||
|
||
// 保存原始内容供复制使用
|
||
window[`blockRawContent_${blockIndex}`] = aligned;
|
||
|
||
return html;
|
||
}
|
||
|
||
/**
|
||
* 异步解析Markdown
|
||
* @param {string} markdown Markdown内容
|
||
* @returns {Promise<Array>} 解析结果
|
||
*/
|
||
parseMarkdownAsync(markdown) {
|
||
return new Promise((resolve) => {
|
||
// 简化的Markdown解析，避免阻塞主线程
|
||
const lines = (markdown || '').split(/\r?\n/);
|
||
const blocks = [];
|
||
let buffer = [];
|
||
let inCode = false;
|
||
let isFirstBlock = true;
|
||
|
||
const parseChunk = (startIndex) => {
|
||
const endIndex = Math.min(startIndex + 50, lines.length); // 每次处理50行
|
||
|
||
for (let i = startIndex; i < endIndex; i++) {
|
||
const line = lines[i];
|
||
if (/^\s*```/.test(line)) {
|
||
inCode = !inCode;
|
||
buffer.push(line);
|
||
continue;
|
||
}
|
||
if (inCode) {
|
||
buffer.push(line);
|
||
continue;
|
||
}
|
||
if (/^\s*#/.test(line)) {
|
||
if (!isFirstBlock && buffer.length) {
|
||
blocks.push({ content: buffer.join('\n') });
|
||
buffer = [];
|
||
}
|
||
isFirstBlock = false;
|
||
buffer.push(line);
|
||
continue;
|
||
}
|
||
buffer.push(line);
|
||
}
|
||
|
||
if (endIndex < lines.length) {
|
||
// 继续下一批
|
||
setTimeout(() => parseChunk(endIndex), 0);
|
||
} else {
|
||
// 完成解析
|
||
if (buffer.length) {
|
||
blocks.push({ content: buffer.join('\n') });
|
||
}
|
||
resolve(blocks);
|
||
}
|
||
};
|
||
|
||
parseChunk(0);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 异步渲染对齐内容
|
||
*/
|
||
async renderAlignedContentAsync(aligned, images, blockIndex, isOriginalFirstInChunkCompare) {
|
||
const alignedHTML = [];
|
||
const batchSize = 3; // 每批处理3个对齐块
|
||
|
||
for (let i = 0; i < aligned.length; i += batchSize) {
|
||
const batch = aligned.slice(i, i + batchSize);
|
||
const batchHTML = await this.renderAlignedBatch(batch, i, images, blockIndex, isOriginalFirstInChunkCompare);
|
||
alignedHTML.push(...batchHTML);
|
||
|
||
// 让出控制权
|
||
if (i + batchSize < aligned.length) {
|
||
await this.delay(0);
|
||
}
|
||
}
|
||
|
||
return alignedHTML.join('');
|
||
}
|
||
|
||
/**
|
||
* 渲染对齐批次
|
||
*/
|
||
async renderAlignedBatch(batch, startIndex, images, blockIndex, isOriginalFirstInChunkCompare) {
|
||
return batch.map((alignedPair, batchIndex) => {
|
||
const actualIndex = startIndex + batchIndex;
|
||
const showMode = window[`showMode_block_${blockIndex}`] || 'both';
|
||
|
||
return `
|
||
<div class="align-flex block-flex block-flex-${blockIndex} ${showMode==='ocr'?'block-mode-ocr-only':showMode==='trans'?'block-mode-trans-only':'block-mode-both'}" data-block="${blockIndex}" data-align-index="${actualIndex}">
|
||
<div class="align-block align-block-ocr">
|
||
<div class="align-title">
|
||
<span>原文</span>
|
||
<button class="block-struct-copy-btn" data-block="${blockIndex}" data-type="ocr" data-idx="${actualIndex}" title="复制原文结构">复制</button>
|
||
</div>
|
||
<div class="align-content markdown-body">${this.renderContentSafely(alignedPair[0], images)}</div>
|
||
</div>
|
||
<div class="splitter" title="拖动调整比例"></div>
|
||
<div class="align-block align-block-trans">
|
||
<div class="align-title">
|
||
<span>译文</span>
|
||
<button class="block-struct-copy-btn" data-block="${blockIndex}" data-type="trans" data-idx="${actualIndex}" title="复制译文结构">复制</button>
|
||
</div>
|
||
<div class="align-content markdown-body">${this.renderContentSafely(alignedPair[1], images)}</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 安全渲染内容
|
||
*/
|
||
renderContentSafely(content, images) {
|
||
try {
|
||
if (!content || content.trim() === '') return '';
|
||
|
||
// 使用简化的渲染避免复杂的KaTeX解析
|
||
if (window.MarkdownProcessor?.renderWithKatexFailback) {
|
||
const safeContent = window.MarkdownProcessor.safeMarkdown(content, images);
|
||
return window.MarkdownProcessor.renderWithKatexFailback(safeContent);
|
||
} else {
|
||
// 回退到简单的文本渲染
|
||
return content.replace(/\n/g, '<br>');
|
||
}
|
||
} catch (error) {
|
||
console.warn('内容渲染失败，使用简单模式:', error);
|
||
return content.replace(/\n/g, '<br>');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 对齐分块
|
||
*/
|
||
alignBlocks(blocks1, blocks2) {
|
||
const maxLen = Math.max(blocks1.length, blocks2.length);
|
||
const aligned = [];
|
||
for (let i = 0; i < maxLen; i++) {
|
||
aligned.push([
|
||
blocks1[i] ? blocks1[i].content : '',
|
||
blocks2[i] ? blocks2[i].content : ''
|
||
]);
|
||
}
|
||
return aligned;
|
||
}
|
||
|
||
/**
|
||
* 绑定分块事件
|
||
*/
|
||
bindChunkEvents(chunkElement) {
|
||
// 这里可以添加特定的事件绑定逻辑
|
||
// 例如模式切换、复制按钮等
|
||
}
|
||
|
||
/**
|
||
* 设置交叉观察器进行懒加载
|
||
*/
|
||
setupIntersectionObserver() {
|
||
if (!window.IntersectionObserver) return;
|
||
|
||
this.observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const chunkIndex = parseInt(entry.target.dataset.chunkIndex);
|
||
const lazyContainer = entry.target.querySelector('[data-lazy-load="true"]');
|
||
|
||
if (lazyContainer) {
|
||
// 自动加载进入视口的分块
|
||
this.loadFullChunk(chunkIndex);
|
||
}
|
||
}
|
||
});
|
||
}, {
|
||
rootMargin: '200px', // 提前200px开始加载
|
||
threshold: 0.1
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 观察分块元素
|
||
*/
|
||
observeChunks(container) {
|
||
if (!this.observer) return;
|
||
|
||
const chunks = container.querySelectorAll('.chunk-pair');
|
||
chunks.forEach(chunk => {
|
||
this.observer.observe(chunk);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 设置性能监控
|
||
*/
|
||
setupPerformanceMonitor() {
|
||
// 监控内存使用
|
||
if (performance.memory) {
|
||
setInterval(() => {
|
||
const memory = performance.memory;
|
||
console.log(`[ChunkOptimizer] 内存使用: ${(memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}MB`);
|
||
}, 30000); // 每30秒检查一次
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新进度
|
||
*/
|
||
updateProgress(rendered, total) {
|
||
const progress = Math.round((rendered / total) * 100);
|
||
console.log(`[ChunkOptimizer] 渲染进度: ${progress}% (${rendered}/${total})`);
|
||
|
||
// 可以在这里更新UI进度条
|
||
const progressBar = document.querySelector('.chunk-progress-bar');
|
||
if (progressBar) {
|
||
progressBar.style.width = `${progress}%`;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 延迟函数
|
||
*/
|
||
delay(ms) {
|
||
return new Promise(resolve => setTimeout(resolve, ms));
|
||
}
|
||
|
||
/**
|
||
* 清理资源
|
||
*/
|
||
cleanup() {
|
||
if (this.observer) {
|
||
this.observer.disconnect();
|
||
}
|
||
this.renderCache.clear();
|
||
this.visibleChunks.clear();
|
||
}
|
||
}
|
||
|
||
// 创建全局实例
|
||
ChunkCompareOptimizer.instance = new ChunkCompareOptimizer();
|
||
|
||
// 在页面加载时初始化
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
ChunkCompareOptimizer.instance.init();
|
||
});
|
||
} else {
|
||
ChunkCompareOptimizer.instance.init();
|
||
}
|
||
|
||
// 导出供其他模块使用
|
||
if (typeof module !== 'undefined' && module.exports) {
|
||
module.exports = ChunkCompareOptimizer;
|
||
} else {
|
||
window.ChunkCompareOptimizer = ChunkCompareOptimizer;
|
||
}
|