<!-- Generated by SpecStory -->

# Keyboard Navigation and Preview Controls (2025-05-25 23:35:41)

_**User**_

增加 arrowkey 的 navigation + esc 取消 preview

---

_**Assistant**_

我来为PhotoViewer组件添加键盘导航功能，包括方向键导航和ESC键关闭预览。

---



---

完成！我已经为PhotoViewer组件添加了键盘导航功能：

1. **方向键导航**：
   - `ArrowLeft` (左箭头键) - 切换到上一张图片
   - `ArrowRight` (右箭头键) - 切换到下一张图片

2. **ESC键关闭**：
   - `Escape` - 关闭图片预览

这些功能通过一个新的`useEffect`钩子实现，它会：
- 只在预览窗口打开时监听键盘事件
- 阻止默认的键盘行为（`preventDefault()`）
- 调用相应的处理函数（`handlePrevious`、`handleNext`、`onClose`）
- 在组件卸载或预览关闭时清理事件监听器

现在用户可以使用键盘更方便地浏览图片了！

---

