170 lines
4.5 KiB
Markdown
170 lines
4.5 KiB
Markdown
# Phase 2 批注缓存测试指南
|
||
|
||
## 📍 测试位置
|
||
|
||
### 1. 打开历史详情页
|
||
|
||
```
|
||
应用首页 → 历史记录 → 点击任意一条记录
|
||
```
|
||
|
||
应该看到类似这样的页面：
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ [仅OCR] [仅翻译] [分块对比] [PDF对照] │ ← 标签栏
|
||
├─────────────────────────────────────────┤
|
||
│ │
|
||
│ 这是文档的内容... │
|
||
│ Lorem ipsum dolor sit amet... │ ← 文本内容
|
||
│ 这里有很多段落... │
|
||
│ │
|
||
│ Each paragraph is divided into │
|
||
│ sub-blocks for annotation... │ ← 每个句子是一个 sub-block
|
||
│ │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2. 右键点击文本
|
||
|
||
**在内容区域的任意文本上右键点击**
|
||
|
||
例如：
|
||
- 右键点击 "这是文档的内容"
|
||
- 右键点击 "Lorem ipsum dolor"
|
||
- 右键点击任何一个句子或段落
|
||
|
||
### 3. 应该看到的菜单
|
||
|
||
正常情况下会弹出**批注菜单**，类似：
|
||
|
||
```
|
||
┌──────────────────────┐
|
||
│ ✏️ 添加批注 │
|
||
│ 🎨 高亮显示 │
|
||
│ 📋 复制文本 │
|
||
│ ... │
|
||
└──────────────────────┘
|
||
```
|
||
|
||
## ⏱️ 性能测试重点
|
||
|
||
### 优化前：
|
||
- 右键点击后 → **等待 200-300ms** → 菜单弹出
|
||
- 大文档（1000+ 句子）延迟更明显
|
||
|
||
### 优化后：
|
||
- 右键点击后 → **立即弹出**（< 10ms）
|
||
- 无论文档多大，延迟都很小
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 步骤 1: 检查缓存状态
|
||
|
||
在控制台运行：
|
||
```javascript
|
||
console.log('AnnotationDOMCache:', window.AnnotationDOMCache);
|
||
console.log('已初始化?', window.AnnotationDOMCache?.initialized);
|
||
console.log('缓存数量:', window.AnnotationDOMCache?.subBlocks?.length);
|
||
```
|
||
|
||
### 步骤 2: 右键测试
|
||
|
||
1. 在文本内容上**右键点击**
|
||
2. 观察菜单弹出速度
|
||
3. 观察控制台日志
|
||
|
||
**预期日志**（优化生效）：
|
||
```
|
||
[跨子块检测] 开始检测跨子块选择...
|
||
[跨子块检测] 页面上的子块总数: 1247
|
||
```
|
||
- ✅ 没有延迟
|
||
- ✅ 没有警告
|
||
|
||
**失败标志**（优化未生效）：
|
||
```
|
||
[AnnotationCache] 缓存未初始化，执行动态查询 ❌
|
||
```
|
||
- ❌ 明显延迟
|
||
- ❌ 看到警告
|
||
|
||
### 步骤 3: 性能对比（可选）
|
||
|
||
**测量右键延迟**：
|
||
|
||
在控制台运行：
|
||
```javascript
|
||
// 准备计时
|
||
document.addEventListener('contextmenu', function measureTime() {
|
||
console.time('⏱️ 右键菜单响应时间');
|
||
|
||
setTimeout(() => {
|
||
console.timeEnd('⏱️ 右键菜单响应时间');
|
||
}, 100);
|
||
|
||
// 只测一次
|
||
document.removeEventListener('contextmenu', measureTime);
|
||
}, { once: true });
|
||
|
||
console.log('✅ 已准备好测量。现在右键点击任意文本...');
|
||
```
|
||
|
||
然后右键点击文本。
|
||
|
||
**预期输出**：
|
||
```
|
||
⏱️ 右键菜单响应时间: 2.5ms ✅ 优化生效
|
||
```
|
||
|
||
**失败输出**：
|
||
```
|
||
⏱️ 右键菜单响应时间: 285.3ms ❌ 优化未生效
|
||
```
|
||
|
||
## 🔍 如果没有批注菜单怎么办？
|
||
|
||
### 情况 1: 看到浏览器默认的右键菜单
|
||
|
||
可能原因：
|
||
- 页面还没加载完成
|
||
- 批注功能没有启用
|
||
- 右键点击的位置不对（点到了空白处）
|
||
|
||
**解决方法**：
|
||
- 等待页面完全加载
|
||
- 确保点击的是**文本内容**，不是空白区域
|
||
- 先选中一段文本，再右键点击
|
||
|
||
### 情况 2: 菜单没有弹出
|
||
|
||
**检查**：
|
||
```javascript
|
||
// 检查批注功能是否加载
|
||
console.log('annotation_logic.js 加载?', typeof annotationContextMenuElement !== 'undefined');
|
||
```
|
||
|
||
## 📝 测试清单
|
||
|
||
```
|
||
测试环境: _______________
|
||
测试日期: _______________
|
||
|
||
[ ] 1. 打开历史详情页
|
||
[ ] 2. 等待内容完全加载
|
||
[ ] 3. 控制台检查缓存状态
|
||
- AnnotationDOMCache 存在? [ ]
|
||
- 已初始化? [ ]
|
||
- 缓存数量 > 0? [ ]
|
||
[ ] 4. 右键点击文本
|
||
[ ] 5. 菜单立即弹出（无延迟）
|
||
[ ] 6. 控制台没有"缓存未初始化"警告
|
||
|
||
测试结果:
|
||
- [ ] ✅ 所有检查通过，优化生效
|
||
- [ ] ⚠️ 部分检查失败
|
||
- [ ] ❌ 优化未生效
|
||
|
||
备注: _______________
|
||
```
|