283 lines
7.8 KiB
Markdown
283 lines
7.8 KiB
Markdown
# PDF Compare View 重构测试指南
|
||
|
||
本文档说明如何测试重构后的 PDF 对比功能。
|
||
|
||
## 📋 重构概况
|
||
|
||
已将 `history_pdf_compare.js` (2606行) 拆分为：
|
||
- **TextFitting.js** (~450行) - 文本自适应渲染
|
||
- **PDFExporter.js** (~450行) - PDF导出功能
|
||
- **SegmentManager.js** (~400行) - 长画布分段管理
|
||
- **主类** (~1300行) - 协调器和核心逻辑
|
||
|
||
## 🔧 测试前准备
|
||
|
||
### 1. 确保新模块已加载
|
||
在 `index.html` 或相关HTML文件中，在加载 `history_pdf_compare.js` **之前**添加：
|
||
|
||
```html
|
||
<!-- 加载新的模块 -->
|
||
<script src="js/history/modules/TextFitting.js"></script>
|
||
<script src="js/history/modules/PDFExporter.js"></script>
|
||
<script src="js/history/modules/SegmentManager.js"></script>
|
||
|
||
<!-- 加载主类 -->
|
||
<script src="js/history/history_pdf_compare.js"></script>
|
||
```
|
||
|
||
### 2. 清除浏览器缓存
|
||
重要！使用 Ctrl+Shift+R (或 Cmd+Shift+R) 强制刷新页面。
|
||
|
||
## ✅ 测试清单
|
||
|
||
### 测试1: PDF加载和显示
|
||
**目的**: 验证PDF能正常加载和显示
|
||
|
||
1. 打开应用并选择一个PDF文件
|
||
2. 等待PDF加载完成
|
||
3. **预期结果**:
|
||
- ✅ 左侧显示原文PDF
|
||
- ✅ 右侧显示翻译后的PDF
|
||
- ✅ 页面滚动流畅，无白屏
|
||
- ✅ 控制台无错误
|
||
|
||
### 测试2: 文本自适应渲染
|
||
**目的**: 验证 TextFitting.js 模块工作正常
|
||
|
||
1. 检查右侧翻译区域的文本显示
|
||
2. **预期结果**:
|
||
- ✅ 文本完整显示在bbox框内
|
||
- ✅ 字号自适应，未超出边界
|
||
- ✅ 中文和英文换行正确
|
||
- ✅ 数学公式(如有)正确渲染
|
||
|
||
**验证代码** (在浏览器控制台):
|
||
```javascript
|
||
// 检查 TextFittingAdapter 是否加载
|
||
console.log('TextFittingAdapter:', typeof TextFittingAdapter);
|
||
|
||
// 检查主类是否使用了模块
|
||
const view = window.pdfCompareView; // 假设实例保存在这里
|
||
console.log('使用TextFittingAdapter:', view.textFittingAdapter);
|
||
```
|
||
|
||
### 测试3: 长画布分段渲染
|
||
**目的**: 验证 SegmentManager.js 模块工作正常
|
||
|
||
1. 滚动PDF页面，从第一页滚动到最后一页
|
||
2. 快速滚动和慢速滚动都要测试
|
||
3. **预期结果**:
|
||
- ✅ 滚动流畅，无卡顿
|
||
- ✅ 页面内容按需加载(懒加载)
|
||
- ✅ 所有页面都能正确显示
|
||
- ✅ 内存占用稳定(查看任务管理器)
|
||
|
||
**验证代码**:
|
||
```javascript
|
||
// 检查 SegmentManager 是否加载
|
||
console.log('SegmentManager:', typeof SegmentManager);
|
||
|
||
// 检查分段信息
|
||
const view = window.pdfCompareView;
|
||
console.log('分段数量:', view.segmentManager?.segments?.length);
|
||
console.log('页面信息:', view.segmentManager?.pageInfos?.length);
|
||
```
|
||
|
||
### 测试4: PDF导出功能
|
||
**目的**: 验证 PDFExporter.js 模块工作正常
|
||
|
||
1. 点击"导出译文PDF"按钮
|
||
2. 等待PDF生成和下载
|
||
3. 打开下载的PDF文件
|
||
4. **预期结果**:
|
||
- ✅ PDF成功下载
|
||
- ✅ 译文文本正确显示在原文位置
|
||
- ✅ 文本大小与Canvas显示一致
|
||
- ✅ 文本未超出bbox边界
|
||
- ✅ 中文字体正确显示
|
||
|
||
**验证代码**:
|
||
```javascript
|
||
// 检查 PDFExporter 是否加载
|
||
console.log('PDFExporter:', typeof PDFExporter);
|
||
|
||
// 手动触发导出(如果需要)
|
||
const view = window.pdfCompareView;
|
||
view.pdfExporter?.exportStructuredTranslation(
|
||
view.originalPdfBase64,
|
||
view.translatedContentList,
|
||
showNotification
|
||
);
|
||
```
|
||
|
||
### 测试5: 交互功能
|
||
**目的**: 验证用户交互功能未受影响
|
||
|
||
1. 点击左侧PDF的文本块
|
||
2. **预期结果**:
|
||
- ✅ 左侧bbox高亮
|
||
- ✅ 右侧对应区域高亮
|
||
- ✅ 高亮颜色正确(紫红色)
|
||
|
||
3. 测试滚动联动
|
||
4. **预期结果**:
|
||
- ✅ 左右侧滚动保持同步
|
||
- ✅ 滚动流畅无延迟
|
||
|
||
### 测试6: 内存泄漏检测
|
||
**目的**: 验证事件监听器正确清理
|
||
|
||
1. 打开浏览器开发者工具 → Performance → Memory
|
||
2. 加载PDF，滚动几次
|
||
3. 切换到其他页面或关闭PDF视图
|
||
4. 点击"Collect garbage"按钮
|
||
5. **预期结果**:
|
||
- ✅ 内存使用量下降
|
||
- ✅ 没有持续增长的内存占用
|
||
|
||
**验证代码**:
|
||
```javascript
|
||
// 检查事件监听器是否被清理
|
||
const view = window.pdfCompareView;
|
||
view.segmentManager?.destroy();
|
||
|
||
// 验证清理后的状态
|
||
console.log('Segments:', view.segmentManager?.segments?.length); // 应该为 0
|
||
console.log('Handlers:', view.segmentManager?._originalScrollHandler); // 应该为 null
|
||
```
|
||
|
||
## 🐛 常见问题排查
|
||
|
||
### 问题1: 控制台报错 "TextFittingAdapter is not defined"
|
||
**原因**: 模块未正确加载
|
||
**解决**:
|
||
1. 检查HTML中的script标签顺序
|
||
2. 确保模块文件路径正确
|
||
3. 清除浏览器缓存
|
||
|
||
### 问题2: 文本大小与预期不符
|
||
**原因**: PDF导出和Canvas渲染的公式不一致
|
||
**解决**:
|
||
1. 检查是否使用了最新的修复版本
|
||
2. 确认PDFExporter.js中的文本高度公式为 `mid * 1.2`
|
||
|
||
### 问题3: 滚动时内存持续增长
|
||
**原因**: 事件监听器未正确清理
|
||
**解决**:
|
||
1. 确认SegmentManager.js的destroy方法正确实现
|
||
2. 检查事件处理函数是否保存了引用
|
||
|
||
### 问题4: 页面加载缓慢或白屏
|
||
**原因**: 懒加载未生效
|
||
**解决**:
|
||
1. 检查SegmentManager的配置
|
||
2. 验证maxSegmentPixels设置是否合理
|
||
|
||
## 📊 性能对比
|
||
|
||
重构前后性能对比：
|
||
|
||
| 指标 | 重构前 | 重构后 | 改进 |
|
||
|------|--------|--------|------|
|
||
| 代码行数 | 2606行 | 1300行+1270行(模块) | 模块化 ✅ |
|
||
| 首次加载时间 | 测试中 | 测试中 | - |
|
||
| 滚动帧率 | 测试中 | 测试中 | - |
|
||
| 内存占用 | 测试中 | 测试中 | - |
|
||
| 导出时间 | 测试中 | 测试中 | - |
|
||
|
||
## 🔍 调试技巧
|
||
|
||
### 启用详细日志
|
||
在浏览器控制台运行：
|
||
```javascript
|
||
// 设置日志级别
|
||
localStorage.setItem('debug', 'true');
|
||
location.reload();
|
||
```
|
||
|
||
### 查看模块状态
|
||
```javascript
|
||
const view = window.pdfCompareView;
|
||
|
||
// 检查所有模块
|
||
console.log('TextFittingAdapter:', view.textFittingAdapter);
|
||
console.log('PDFExporter:', view.pdfExporter);
|
||
console.log('SegmentManager:', view.segmentManager);
|
||
|
||
// 查看缓存
|
||
console.log('Font cache size:', view.textFittingAdapter?.globalFontSizeCache?.size);
|
||
console.log('Formula cache size:', view.textFittingAdapter?._formulaCache?.size);
|
||
```
|
||
|
||
### 性能分析
|
||
```javascript
|
||
// 测量渲染时间
|
||
console.time('render-segment');
|
||
await view.segmentManager.renderSegment(view.segmentManager.segments[0]);
|
||
console.timeEnd('render-segment');
|
||
|
||
// 测量导出时间
|
||
console.time('export-pdf');
|
||
await view.pdfExporter.exportStructuredTranslation(...);
|
||
console.timeEnd('export-pdf');
|
||
```
|
||
|
||
## 📝 测试报告模板
|
||
|
||
完成测试后，请填写以下报告：
|
||
|
||
```markdown
|
||
## 测试环境
|
||
- 浏览器: [Chrome 120 / Firefox 121 / Safari 17]
|
||
- 操作系统: [Windows 11 / macOS 14 / Linux]
|
||
- PDF文件大小: [XX MB, XX页]
|
||
- 测试时间: [YYYY-MM-DD HH:MM]
|
||
|
||
## 测试结果
|
||
- [ ] 测试1: PDF加载和显示 - [通过/失败]
|
||
- [ ] 测试2: 文本自适应渲染 - [通过/失败]
|
||
- [ ] 测试3: 长画布分段渲染 - [通过/失败]
|
||
- [ ] 测试4: PDF导出功能 - [通过/失败]
|
||
- [ ] 测试5: 交互功能 - [通过/失败]
|
||
- [ ] 测试6: 内存泄漏检测 - [通过/失败]
|
||
|
||
## 发现的问题
|
||
1. [问题描述]
|
||
- 重现步骤:
|
||
- 预期结果:
|
||
- 实际结果:
|
||
- 控制台错误:
|
||
|
||
## 总体评价
|
||
- 功能完整性: [0-100%]
|
||
- 性能表现: [优秀/良好/一般/较差]
|
||
- 稳定性: [优秀/良好/一般/较差]
|
||
- 建议:
|
||
```
|
||
|
||
## 🚀 回滚方案
|
||
|
||
如果测试发现严重问题，可以快速回滚到原始版本：
|
||
|
||
```bash
|
||
# 查看最近的提交
|
||
git log --oneline -5
|
||
|
||
# 回滚到重构前的版本
|
||
git checkout <commit-hash> -- js/history/history_pdf_compare.js
|
||
|
||
# 或者切换到main分支
|
||
git checkout main
|
||
```
|
||
|
||
## 📞 支持
|
||
|
||
如有问题，请：
|
||
1. 查看浏览器控制台的详细错误信息
|
||
2. 检查本文档的"常见问题排查"部分
|
||
3. 提供完整的测试报告和错误日志
|
||
|
||
---
|
||
|
||
**测试重点**: 确保重构后的功能与原始版本**完全一致**，无功能退化。
|