fix: 修复滚动同步位置计算+添加调试日志

feat: PDF对比按页同步滚动+译文按页分隔显示
feat: PDF对比用PDF.js渲染+滚动同步
2026-04-17 10:28:21 +08:00 · 2026-04-17 10:12:51 +08:00 · 2026-04-17 10:05:47 +08:00 · 2026-04-17 09:53:41 +08:00
3 changed files with 279 additions and 8 deletions
--- a/app.py
+++ b/app.py
@@ -673,12 +673,33 @@ def compare_view(translation_id):
    return jsonify({
        'id': translation.id,
        'filename': translation.original_filename,
-        'original': original_content or '原文内容未找到（可能PDF已被删除或为扫描版）',
+        'original': original_content or '',
        'original_pdf_url': f'/api/original-pdf/{translation.id}' if translation.upload_path else None,
        'translated': translated_content,
        'pages': translated_pages
    })
@app.route('/api/original-pdf/<int:translation_id>')
 def get_original_pdf(translation_id):
    """获取原始PDF文件"""
    user = get_current_user()
    if not user:
        return jsonify({'error': '请登录后使用此功能'}), 401
    translation = Translation.query.get(translation_id)
    if not translation or (translation.user_id != user.id and user.user_type != 'admin'):
        return jsonify({'error': '无权访问'}), 403
    if not translation.upload_path or not os.path.exists(translation.upload_path):
        return jsonify({'error': '原PDF文件不存在'}), 404
    return send_file(translation.upload_path, 
                     mimetype='application/pdf',
                     as_attachment=False,
                     download_name=translation.original_filename)
 # ==================== 路由: 用户系统 ====================
@app.route('/login', methods=['GET', 'POST'])
 def login():
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -75,12 +75,21 @@ body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 70vh;
 }
 .compare-panel {
    padding: 15px;
    border-radius: 5px;
    background-color: #f8f9fa;
    overflow-y: auto;
    height: 100%;
 }
 .compare-panel h5 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
 }
 .compare-panel.original {
@@ -91,6 +100,48 @@ body {
    border-left: 4px solid var(--success-color);
 }
 .compare-panel iframe {
    width: 100%;
    height: calc(100% - 40px);
    border: none;
 }
 #pdfContainer {
    height: calc(100% - 40px);
    overflow-y: auto;
 }
 #pdfPages {
    padding: 10px;
 }
 .pdf-page-canvas {
    border: 1px solid #ddd;
    border-radius: 3px;
    background: white;
 }
 .translated-page {
    padding-bottom: 30px;
    border-bottom: 2px dashed #ddd;
    margin-bottom: 20px;
 }
 .translated-page:last-child {
    border-bottom: none;
 }
 .page-header {
    font-size: 0.9em;
    padding: 5px 10px;
    background: #f0f0f0;
    border-radius: 3px;
 }
 .page-content {
    padding: 10px;
 }
 /* 会员卡片 */
 .pricing-card {
    transition: transform 0.3s ease;
--- a/templates/translation.html
+++ b/templates/translation.html
@@ -7,6 +7,7 @@
    <link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
 </head>
 <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
@@ -76,6 +77,11 @@
        }
        // 切换对比视图
        let syncScrollEnabled = true;
        let pdfDoc = null;
        let pagePositions = [];  // PDF各页位置
        let translatedPagePositions = [];  // 译文各页位置
        document.getElementById('toggleCompare').addEventListener('click', async function() {
            showCompare = !showCompare;
@@ -84,27 +90,220 @@
                    const response = await fetch(`/api/compare/${translationId}`);
                    const result = await response.json();
                    // 原文面板：如果有PDF URL用PDF.js渲染
                    let originalHtml = '';
                    if (result.original_pdf_url) {
                        originalHtml = '<div id="pdfPages"></div>';
                    } else if (result.original && result.original.length > 0) {
                        originalHtml = `<div class="original-text" style="white-space:pre-wrap;font-family:monospace;">${escapeHtml(result.original)}</div>`;
                    } else {
                        originalHtml = '<div class="text-muted">原文内容未找到（可能PDF已被删除）</div>';
                    }
                    // 译文按页渲染
                    let translatedHtml = renderTranslatedByPage(result.translated);
                    document.getElementById('resultContent').innerHTML = `
                        <div class="compare-container">
-                            <div class="compare-panel original">
+                            <div class="compare-panel original" id="originalPanel">
-                                <h5>原文</h5>
+                                <h5>原文 PDF <small class="text-muted">(共${result.pages.length}页)</small></h5>
-                                <div>${escapeHtml(result.original)}</div>
+                                <div id="pdfContainer">${originalHtml}</div>
                            </div>
-                            <div class="compare-panel translated">
+                            <div class="compare-panel translated" id="translatedPanel">
-                                <h5>译文</h5>
+                                <h5>译文 <small class="text-muted">(共${result.pages.length}页)</small></h5>
-                                <div>${renderMarkdown(result.translated)}</div>
+                                <div class="translated-content">${translatedHtml}</div>
                            </div>
                        </div>
                        <div class="text-center mt-2">
                            <small class="text-muted">💡 滚动任意一侧，另一侧自动同步到对应页</small>
                        </div>
                    `;
                    // 先计算译文位置（因为已经渲染好了）
                    setTimeout(calculateTranslatedPositions, 100);
                    // 如果有PDF，用PDF.js渲染，完成后计算位置并启用同步
                    if (result.original_pdf_url) {
                        renderPDF(result.original_pdf_url).then(() => {
                            setTimeout(() => {
                                calculatePdfPositions();
                                enableSyncScroll();
                            }, 200);
                        });
                    } else {
                        setTimeout(enableSyncScroll, 300);
                    }
                } catch (error) {
-                    alert('加载对比失败');
+                    alert('加载对比失败: ' + error.message);
                }
            } else {
                loadResult();
            }
        });
        // 译文按页渲染
        function renderTranslatedByPage(content) {
            if (!content) return '<div class="text-muted">译文加载失败</div>';
            // 解析分页 - 按 "---" 分隔
            const parts = content.split(/\n\n---\n\n/);
            let html = '';
            parts.forEach((part, index) => {
                // 提取页码
                const pageNumMatch = part.match(/## 第 (\d+) 页\n\n/);
                const pageNum = pageNumMatch ? pageNumMatch[1] : (index + 1);
                // 移除页码标题
                let contentOnly = part.replace(/## 第 \d+ 页\n\n/, '').replace(/^# .*\n\n/, '').replace(/^> .*\n\n/, '');
                html += `
                    <div class="translated-page" data-page="${pageNum}">
                        <div class="page-header text-center text-muted mb-3">— 第 ${pageNum} 页 —</div>
                        <div class="page-content">${renderMarkdown(contentOnly)}</div>
                    </div>
                `;
            });
            return html;
        }
        // PDF.js渲染PDF（返回Promise）
        async function renderPDF(url) {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
            const pdf = await pdfjsLib.getDocument(url).promise;
            pdfDoc = pdf;
            const container = document.getElementById('pdfPages');
            container.innerHTML = '';
            // 渲染所有页面
            for (let i = 1; i <= pdf.numPages; i++) {
                // 页码标识
                const pageNumDiv = document.createElement('div');
                pageNumDiv.className = 'page-header text-center text-muted mb-2';
                pageNumDiv.textContent = `— 第 ${i} 页 —`;
                pageNumDiv.dataset.page = i;
                container.appendChild(pageNumDiv);
                const page = await pdf.getPage(i);
                const canvas = document.createElement('canvas');
                canvas.className = 'pdf-page-canvas';
                canvas.style.width = '100%';
                canvas.style.display = 'block';
                canvas.style.marginBottom = '20px';
                canvas.dataset.page = i;
                const context = canvas.getContext('2d');
                const viewport = page.getViewport({ scale: 1.5 });
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                await page.render({
                    canvasContext: context,
                    viewport: viewport
                }).promise;
                container.appendChild(canvas);
            }
            return pdf;
        }
        // 计算译文各页位置（相对于滚动容器顶部）
        function calculateTranslatedPositions() {
            translatedPagePositions = [];
            const translatedPanel = document.getElementById('translatedPanel');
            const translatedPages = document.querySelectorAll('.translated-page');
            translatedPages.forEach(el => {
                const page = parseInt(el.dataset.page);
                // 使用getBoundingClientRect计算相对位置
                const rect = el.getBoundingClientRect();
                const panelRect = translatedPanel.getBoundingClientRect();
                // 相对位置 = 元素top - 容器top + 当前scrollTop
                const relativeTop = rect.top - panelRect.top + translatedPanel.scrollTop;
                translatedPagePositions.push({
                    page: page,
                    top: relativeTop
                });
            });
            console.log('译文页位置:', translatedPagePositions);
        }
        // 计算PDF各页位置（相对于滚动容器顶部）
        function calculatePdfPositions() {
            pagePositions = [];
            const originalPanel = document.getElementById('originalPanel');
            const pdfPages = document.querySelectorAll('#pdfPages .page-header');
            pdfPages.forEach(el => {
                const page = parseInt(el.dataset.page);
                // 使用getBoundingClientRect计算相对位置
                const rect = el.getBoundingClientRect();
                const panelRect = originalPanel.getBoundingClientRect();
                // 相对位置 = 元素top - 容器top + 当前scrollTop
                const relativeTop = rect.top - panelRect.top + originalPanel.scrollTop;
                pagePositions.push({
                    page: page,
                    top: relativeTop
                });
            });
            console.log('PDF页位置:', pagePositions);
        }
        // 根据滚动位置找当前页
        function findCurrentPage(scrollTop, positions) {
            for (let i = positions.length - 1; i >= 0; i--) {
                if (scrollTop >= positions[i].top - 30) {
                    return positions[i].page;
                }
            }
            return 1;
        }
        // 滚动到指定页
        function scrollToPage(panel, positions, pageNum) {
            const pos = positions.find(p => p.page === pageNum);
            if (pos) {
                panel.scrollTop = pos.top - 10;
            }
        }
        // 滚动同步
        function enableSyncScroll() {
            const originalPanel = document.getElementById('originalPanel');
            const translatedPanel = document.getElementById('translatedPanel');
            if (!originalPanel || !translatedPanel || pagePositions.length === 0 || translatedPagePositions.length === 0) {
                console.log('滚动同步未启用: 缺少元素或位置数据');
                return;
            }
            console.log('滚动同步已启用');
            originalPanel.addEventListener('scroll', function() {
                if (!syncScrollEnabled) return;
                const currentPage = findCurrentPage(this.scrollTop, pagePositions);
                syncScrollEnabled = false;
                scrollToPage(translatedPanel, translatedPagePositions, currentPage);
                setTimeout(() => syncScrollEnabled = true, 100);
            });
            translatedPanel.addEventListener('scroll', function() {
                if (!syncScrollEnabled) return;
                const currentPage = findCurrentPage(this.scrollTop, translatedPagePositions);
                syncScrollEnabled = false;
                scrollToPage(originalPanel, pagePositions, currentPage);
                setTimeout(() => syncScrollEnabled = true, 100);
            });
        }
        // 重新翻译
        document.getElementById('retranslateBtn')?.addEventListener('click', async function() {
            const instruction = document.getElementById('retranslateInstruction').value;
Author	SHA1	Message	Date
coder	128341e98a	fix: 修复滚动同步位置计算+添加调试日志	2026-04-17 10:28:21 +08:00
coder	f9c7caae26	feat: PDF对比按页同步滚动+译文按页分隔显示	2026-04-17 10:12:51 +08:00
coder	5157561e83	feat: PDF对比用PDF.js渲染+滚动同步	2026-04-17 10:05:47 +08:00
coder	30527a5ce6	feat: PDF对比用iframe显示原PDF文件（支持扫描版PDF）	2026-04-17 09:53:41 +08:00