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

static/css/style.css

@@ -121,6 +121,27 @@ body {
     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;

templates/translation.html

@@ -79,6 +79,8 @@
         // 切换对比视图
         let syncScrollEnabled = true;
         let pdfDoc = null;
+        let pagePositions = [];  // PDF各页位置
+        let translatedPagePositions = [];  // 译文各页位置
         
         document.getElementById('toggleCompare').addEventListener('click', async function() {
             showCompare = !showCompare;
@@ -88,29 +90,32 @@
                     const response = await fetch(`/api/compare/${translationId}`);
                     const result = await response.json();
                     
-                    // 原文面板：如果有PDF URL用PDF.js渲染，否则显示提取的文本
+                    // 原文面板：如果有PDF URL用PDF.js渲染
                     let originalHtml = '';
                     if (result.original_pdf_url) {
-                        originalHtml = '<canvas id="pdfCanvas"></canvas><div id="pdfPages"></div>';
+                        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" id="originalPanel">
-                                <h5>原文 PDF</h5>
+                                <h5>原文 PDF <small class="text-muted">(共${result.pages.length}页)</small></h5>
                                 <div id="pdfContainer">${originalHtml}</div>
                             </div>
                             <div class="compare-panel translated" id="translatedPanel">
-                                <h5>译文</h5>
+                                <h5>译文 <small class="text-muted">(共${result.pages.length}页)</small></h5>
-                                <div class="translated-content">${renderMarkdown(result.translated)}</div>
+                                <div class="translated-content">${translatedHtml}</div>
                             </div>
                         </div>
                         <div class="text-center mt-2">
-                            <small class="text-muted">💡 左右滚动同步，方便逐页对比</small>
+                            <small class="text-muted">💡 滚动任意一侧，另一侧自动同步到对应页</small>
                         </div>
                     `;
                     
@@ -119,8 +124,11 @@
                         renderPDF(result.original_pdf_url);
                     }
                     
-                    // 启用滚动同步
+                    // 计算各页位置并启用滚动同步
-                    setTimeout(enableSyncScroll, 300);
+                    setTimeout(() => {
+                        calculatePagePositions();
+                        enableSyncScroll();
+                    }, 500);
                     
                 } catch (error) {
                     alert('加载对比失败: ' + error.message);
@@ -130,6 +138,33 @@
             }
         });
         
+        // 译文按页渲染
+        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';
@@ -143,12 +178,20 @@
                 
                 // 渲染所有页面
                 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 });
@@ -162,12 +205,6 @@
                     }).promise;
                     
                     container.appendChild(canvas);
-                    
-                    // 添加页码标识
-                    const pageNum = document.createElement('div');
-                    pageNum.className = 'text-center text-muted mb-3';
-                    pageNum.textContent = `— 第 ${i} 页 —`;
-                    container.appendChild(pageNum);
                 }
             } catch (error) {
                 document.getElementById('pdfContainer').innerHTML = 
@@ -175,6 +212,59 @@
             }
         }
         
+        // 计算各页位置
+        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');
@@ -185,17 +275,15 @@
             originalPanel.addEventListener('scroll', function() {
                 if (!syncScrollEnabled) return;
                 syncScrollEnabled = false;
-                const ratio = this.scrollTop / (this.scrollHeight - this.clientHeight);
+                syncToPage(originalPanel, translatedPanel, pagePositions, translatedPagePositions);
-                translatedPanel.scrollTop = ratio * (translatedPanel.scrollHeight - translatedPanel.clientHeight);
+                setTimeout(() => syncScrollEnabled = true, 100);
-                setTimeout(() => syncScrollEnabled = true, 50);
             });
             
             translatedPanel.addEventListener('scroll', function() {
                 if (!syncScrollEnabled) return;
                 syncScrollEnabled = false;
-                const ratio = this.scrollTop / (this.scrollHeight - this.clientHeight);
+                syncToPage(translatedPanel, originalPanel, translatedPagePositions, pagePositions);
-                originalPanel.scrollTop = ratio * (originalPanel.scrollHeight - originalPanel.clientHeight);
+                setTimeout(() => syncScrollEnabled = true, 100);
-                setTimeout(() => syncScrollEnabled = true, 50);
             });
         }