# 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. 控制台没有"缓存未初始化"警告

测试结果:
- [ ] ✅ 所有检查通过，优化生效
- [ ] ⚠️ 部分检查失败
- [ ] ❌ 优化未生效

备注: _______________
```