# Molecular Visualizer - 功能测试指南

## 快速测试

在浏览器中打开 http://localhost:8080/ 并按以下步骤测试：

---

## 测试 1: 基础可视化

### 步骤:
1. 在SMILES输入框中输入: `CCO` (乙醇)
2. 点击 **Visualize** 按钮
3. 观察分子是否显示

### 预期结果:
- ✅ 显示3D乙醇分子
- ✅ 状态栏显示 "Molecule visualized successfully!"
- ✅ 信息区域显示分子式 C₂H₆O

### 验证失败排查:
- 检查OpenBabel是否加载 (状态栏)
- 检查浏览器控制台 (F12) 是否有错误

---

## 测试 2: 示例分子

### 步骤:
1. 点击 **Aspirin** 按钮
2. 点击 **Caffeine** 按钮
3. 点击 **Ibuprofen** 按钮

### 预期结果:
- ✅ 分子正确显示
- ✅ 历史记录中显示3个分子

---

## 测试 3: 暗色模式

### 步骤:
1. 点击右上角 🌙 按钮

### 预期结果:
- ✅ 整个界面变为深色主题
- ✅ 按钮变为 ☀️
- ✅ 刷新页面后保持暗色模式 (localStorage)

### 验证:
- 检查header、controls、viewer-section是否都是深色

---

## 测试 4: SMILES验证

### 步骤:
1. 清空输入框
2. 输入无效SMILES: `CC(` (不完整)
3. 输入框显示 ❌
4. 输入有效SMILES: `CCO`
5. 输入框显示 ✅

### 预期结果:
- ✅ 无效SMILES显示红色 ❌
- ✅ 有效SMILES显示绿色 ✅

---

## 测试 5: 测量工具

### 步骤:
1. 可视化一个分子 (如 `CCO`)
2. 点击 **Distance** 按钮 (已激活)
3. 点击两个不同的原子
4. 测量结果显示在下方

### 预期结果:
- ✅ 选中的原子显示绿色数字标签 (1, 2)
- ✅ 显示距离值 (Å)
- ✅ 显示连接的原子

### 测试角度测量:
1. 点击 **Angle** 按钮
2. 点击三个原子
3. ✅ 显示角度值 (°)

### 测试二面角:
1. 点击 **Dihedral** 按钮
2. 点击四个原子
3. ✅ 显示二面角值 (°)

### 测试清除:
1. 点击 **Clear** 按钮
2. ✅ 标签和结果消失

---

## 测试 6: PubChem搜索

### 步骤:
1. 在搜索框输入: `Aspirin`
2. 点击 **Search** 按钮

### 预期结果:
- ✅ 显示搜索结果
- ✅ 点击结果自动加载SMILES

### 测试CID:
1. 输入 `2244` (Aspirin的CID)
2. 点击 **Search**
3. ✅ 找到Aspirin

### 验证失败排查:
- 需要网络连接
- 检查浏览器控制台是否有CORS错误

---

## 测试 7: 快捷键面板

### 步骤:
1. 点击右上角 ⌨️ 按钮 或 按 `H` 键

### 预期结果:
- ✅ 弹出快捷键说明面板
- ✅ 显示所有快捷键
- ✅ 点击遮罩层关闭
- ✅ 按 `Esc` 关闭

### 快捷键测试:
| 按键 | 预期效果 |
|------|----------|
| `R` | 重置视图 |
| `+` | 放大 |
| `-` | 缩小 |
| `↑↓←→` | 旋转分子 |
| `Space` | 开始/停止自动旋转 |
| `H` | 打开/关闭快捷键面板 |
| `Esc` | 清除选择 |

---

## 测试 8: 预设配置

### 步骤:
1. 可视化一个分子
2. 从 **Preset** 下拉框选择:

#### Medicinal Chemistry:
- ✅ 样式变为 Ball+Stick
- ✅ 自动显示元素标签

#### Presentation:
- ✅ 样式变为 Stick
- ✅ 背景变为黑色

#### Crystallography:
- ✅ 样式变为 Sphere
- ✅ 显示标签和原子序号

---

## 测试 9: 背景颜色切换

### 步骤:
1. 点击颜色按钮:
   - 白色按钮 → 白色背景
   - 深色按钮 → 黑色背景
   - 灰色按钮 → 灰色背景
   - 棋盘按钮 → 透明背景

### 预期结果:
- ✅ viewer背景色变化
- ✅ 导出PNG时使用对应背景

---

## 测试 10: 分子性质卡片

### 步骤:
1. 可视化一个分子 (如 `CCO` 或 `Aspirin`)
2. 向下滚动到 Molecular Information 下方

### 预期结果:
- ✅ 显示 Molecular Properties 部分
- ✅ 显示分子量 (MW)
- ✅ 显示精确质量
- ✅ 显示重原子数
- ✅ 显示氢键供体/受体数
- ✅ 显示可旋转键数
- ✅ 显示原子组成标签

### 验证值 (Aspirin):
- MW: ~180.16 Da
- Heavy Atoms: 9
- H-Bond Donors: 1
- H-Bond Acceptors: 3

---

## 测试 11: 工具提示 (Tooltip)

### 步骤:
1. 确认 **Tooltip** 复选框已勾选
2. 鼠标悬停在原子上

### 预期结果:
- ✅ 显示浮窗 (元素符号 + 序号)
- ✅ 浮窗跟随鼠标
- ✅ 移出viewer后消失
- ✅ 取消勾选后不显示

---

## 测试 12: 图片导出

### 步骤:
1. 可视化一个分子
2. 点击 **📷 PNG** 按钮
3. ✅ 下载PNG文件
4. 点击 **📐 SVG** 按钮
5. ✅ 下载SVG文件

### 验证:
- 文件名包含时间戳
- PNG分辨率高

---

## 测试 13: 历史记录

### 步骤:
1. 可视化3个不同分子
2. 查看 History 部分

### 预期结果:
- ✅ 显示历史列表
- ✅ 点击历史项重新加载
- ✅ 刷新页面后历史保持
- ✅ 点击 Clear History 清空

---

## 测试 14: 几何形状

### 步骤:
1. 可视化一个分子
2. 选择形状颜色
3. 点击 **Add Sphere**
4. ✅ 中心添加球体
5. 点击 **Add Arrow**
6. ✅ 添加箭头
7. 点击 **Add Cylinder**
8. ✅ 添加圆柱体
9. 点击 **Clear Shapes**
10. ✅ 清除所有形状

---

## 测试 15: 文件上传

### 步骤:
1. 点击 **Upload XYZ/PDB File**
2. 选择 `.xyz` 或 `.pdb` 文件

### 预期结果:
- ✅ 文件名显示
- ✅ 分子正确加载
- ✅ 显示分子式

---

## 测试 16: 样式切换

### 步骤:
1. 可视化一个分子
2. 切换不同样式:
   - Stick ✅
   - Sphere ✅
   - Ball+Stick ✅
   - Line ✅
   - Cross ✅
   - Cartoon ✅
   - Surface ✅

---

## 常见问题排查

### 问题: 分子不显示
```bash
# 检查
1. 状态栏是否显示 "OpenBabel loaded"
2. 控制台是否有错误 (F12)
3. SMILES是否有效
```

### 问题: 快捷键不响应
```bash
# 检查
1. 输入框没有焦点 (点击viewer)
2. 检查控制台错误
3. 按H打开快捷键面板确认按键
```

### 问题: PubChem搜索失败
```bash
# 检查
1. 网络连接
2. CORS设置 (某些浏览器可能阻止)
3. 尝试VPN
```

### 问题: 暗色模式不保存
```bash
# 检查
1. localStorage是否启用
2. 控制台是否有错误
```

---

## 浏览器兼容性

| 浏览器 | 状态 | 备注 |
|--------|------|------|
| Chrome | ✅ 推荐 | 最新版本 |
| Firefox | ✅ | 最新版本 |
| Safari | ✅ | 14+ |
| Edge | ✅ | 最新版本 |
| IE | ❌ | 不支持 |

---

## 测试结果记录

请在此记录测试结果:

| 功能 | 测试人 | 日期 | 结果 |
|------|--------|------|------|
| 基础可视化 | | | ✅/❌ |
| 暗色模式 | | | ✅/❌ |
| SMILES验证 | | | ✅/❌ |
| 测量工具 | | | ✅/❌ |
| PubChem搜索 | | | ✅/❌ |
| 快捷键面板 | | | ✅/❌ |
| 预设配置 | | | ✅/❌ |
| 背景切换 | | | ✅/❌ |
| 分子性质 | | | ✅/❌ |
| 工具提示 | | | ✅/❌ |
| 图片导出 | | | ✅/❌ |
| 历史记录 | | | ✅/❌ |

---

最后更新: 2024-01-19