Skip to content

[skip eval] feat: 大图查看支持缩放与平移 - #386

Merged
HyxiaoGe merged 1 commit into
masterfrom
feat/image-viewer-zoom
Oct 11, 2026
Merged

HyxiaoGe merged 1 commit into
masterfrom
feat/image-viewer-zoom

Conversation

@HyxiaoGe

Copy link
Copy Markdown
Owner

背景

点开大图后只能看到适应屏幕的尺寸,没法放大看细节,比如生成图上相机模组的零件。

改动

新增 ZoomableImage,替换 ImageViewer 里的 <img>。消息图片、生成图片、输入框预览、会话文件面板都用同一个查看器,所以这几处都能缩放。

  • 双击:在点击的位置放大,倍数取 2.5 倍和原图像素尺寸里较大的那个;再双击还原。切换时有 200ms 过渡,开启减少动态效果时没有过渡。
  • 滚轮和触控板:以鼠标所在位置为中心缩放,范围 1 到 6 倍,缩回 1 倍时位置复位。这里用的是非 passive 监听,缩放时页面不会跟着滚动。
  • 放大后可以拖动平移,光标显示为抓手。
  • 触屏:双指缩放,自己识别双击;拖动和双指操作不算点按。
  • 换图时缩放复位。单击图片仍然不会关闭查看器,点击空白处和按 Esc 的行为不变。

验证

  • ImageViewer.test.tsx 新增 3 个测试:双击放大和还原、滚轮缩放到最小时复位、放大后拖动平移。新增 ZoomableImage.test.ts,测试锚点不动的缩放计算和倍数上下限。
  • ImageViewer、ZoomableImage、GeneratedImages、ConversationFilesPanel、ChatInput 相关测试全部通过,eslint 和 tsc 无报错。
  • 合并后在 dev 上用 Chrome 检查双击、滚轮和拖动。触屏手势需要真机确认。

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@HyxiaoGe
HyxiaoGe merged commit 272fd25 into master Oct 11, 2026
5 checks passed
@HyxiaoGe
HyxiaoGe deleted the feat/image-viewer-zoom branch October 11, 2026 12:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant