feat: PDF对比按页同步滚动+译文按页分隔显示

feat: PDF对比用PDF.js渲染+滚动同步
feat: PDF对比用iframe显示原PDF文件（支持扫描版PDF）
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 262 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,203 @@
                    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">
-                                <h5>原文</h5>
-                                <div>${escapeHtml(result.original)}</div>
+                            <div class="compare-panel original" id="originalPanel">
+                                <h5>原文 PDF <small class="text-muted">(共${result.pages.length}页)</small></h5>
+                                <div id="pdfContainer">${originalHtml}</div>
                            </div>
-                            <div class="compare-panel translated">
-                                <h5>译文</h5>
-                                <div>${renderMarkdown(result.translated)}</div>
+                            <div class="compare-panel translated" id="translatedPanel">
+                                <h5>译文 <small class="text-muted">(共${result.pages.length}页)</small></h5>
+                                <div class="translated-content">${translatedHtml}</div>
                            </div>
                        </div>
+                        <div class="text-center mt-2">
+                            <small class="text-muted">💡 滚动任意一侧，另一侧自动同步到对应页</small>
+                        </div>
                    `;
                    
+                    // 如果有PDF，用PDF.js渲染
+                    if (result.original_pdf_url) {
+                        renderPDF(result.original_pdf_url);
+                    }
+                    
+                    // 计算各页位置并启用滚动同步
+                    setTimeout(() => {
+                        calculatePagePositions();
+                        enableSyncScroll();
+                    }, 500);
+                    
                } catch (error) {
-                    alert('加载对比失败');
+                    alert('加载对比失败: ' + error.message);
                }
            } else {
                loadResult();
            }
        });
        
+        // 译文按页渲染
+        function renderTranslatedByPage(content) {
+            if (!content) return '<div class="text-muted">译文加载失败</div>';
+            
+            // 解析分页
+            const pages = content.split(/\n\n---\n\n/);
+            let html = '';
+            
+            pages.forEach((pageContent, index) => {
+                // 提取页码（如果有）
+                const pageNumMatch = pageContent.match(/## 第 (\d+) 页\n\n/);
+                const pageNum = pageNumMatch ? pageNumMatch[1] : (index + 1);
+                
+                // 移除页码标题，保留内容
+                let contentOnly = pageContent.replace(/## 第 \d+ 页\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
+        async function renderPDF(url) {
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+            
+            try {
+                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);
+                }
+            } catch (error) {
+                document.getElementById('pdfContainer').innerHTML = 
+                    '<div class="text-danger">PDF加载失败: ' + error.message + '</div>';
+            }
+        }
+        
+        // 计算各页位置
+        function calculatePagePositions() {
+            const originalPanel = document.getElementById('originalPanel');
+            const translatedPanel = document.getElementById('translatedPanel');
+            
+            // PDF各页位置
+            pagePositions = [];
+            const pdfPages = document.querySelectorAll('#pdfPages .page-header, #pdfPages .pdf-page-canvas');
+            pdfPages.forEach(el => {
+                if (el.dataset.page) {
+                    const rect = el.getBoundingClientRect();
+                    const panelRect = originalPanel.getBoundingClientRect();
+                    pagePositions.push({
+                        page: parseInt(el.dataset.page),
+                        top: rect.top - panelRect.top + originalPanel.scrollTop
+                    });
+                }
+            });
+            
+            // 译文各页位置
+            translatedPagePositions = [];
+            const translatedPages = document.querySelectorAll('.translated-page');
+            translatedPages.forEach(el => {
+                const page = parseInt(el.dataset.page);
+                const rect = el.getBoundingClientRect();
+                const panelRect = translatedPanel.getBoundingClientRect();
+                translatedPagePositions.push({
+                    page: page,
+                    top: rect.top - panelRect.top + translatedPanel.scrollTop
+                });
+            });
+        }
+        
+        // 按页滚动同步
+        function syncToPage(sourcePanel, targetPanel, sourcePositions, targetPositions) {
+            const scrollTop = sourcePanel.scrollTop;
+            
+            // 找当前页
+            let currentPage = 1;
+            for (let i = sourcePositions.length - 1; i >= 0; i--) {
+                if (scrollTop >= sourcePositions[i].top - 50) {
+                    currentPage = sourcePositions[i].page;
+                    break;
+                }
+            }
+            
+            // 找目标页位置
+            const targetPos = targetPositions.find(p => p.page === currentPage);
+            if (targetPos) {
+                targetPanel.scrollTop = targetPos.top - 20;
+            }
+        }
+        
+        // 滚动同步
+        function enableSyncScroll() {
+            const originalPanel = document.getElementById('originalPanel');
+            const translatedPanel = document.getElementById('translatedPanel');
+            
+            if (!originalPanel || !translatedPanel) return;
+            
+            originalPanel.addEventListener('scroll', function() {
+                if (!syncScrollEnabled) return;
+                syncScrollEnabled = false;
+                syncToPage(originalPanel, translatedPanel, pagePositions, translatedPagePositions);
+                setTimeout(() => syncScrollEnabled = true, 100);
+            });
+            
+            translatedPanel.addEventListener('scroll', function() {
+                if (!syncScrollEnabled) return;
+                syncScrollEnabled = false;
+                syncToPage(translatedPanel, originalPanel, translatedPagePositions, pagePositions);
+                setTimeout(() => syncScrollEnabled = true, 100);
+            });
+        }
+        
        // 重新翻译
        document.getElementById('retranslateBtn')?.addEventListener('click', async function() {
            const instruction = document.getElementById('retranslateInstruction').value;
Author	SHA1	Message	Date
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