feat(ImageViewer): 支持视口之外图片向中心缩放

[RSS1102]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

💡 需求背景和解决方案

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-vue-next

• feat(ImageViewer): 支持蒙层拖拽和鼠标中心缩放

@tdesign-vue-next/chat

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

[tdesign-bot]

TDesign Component Site Preview Open

Component	Preview
tdesign-vue-next
@tdesign-vue-next/chat

[pkg-pr-new]

• tdesign-vue-next-demo

  npm i https://pkg.pr.new/@tdesign-vue-next/auto-import-resolver@6406
  

  npm i https://pkg.pr.new/tdesign-vue-next@6406
  

  npm i https://pkg.pr.new/@tdesign-vue-next/chat@6406
  

commit: 5d81777

[Copilot]

Pull request overview

This PR enhances the ImageViewer zoom/transform behavior by coordinating wheel zoom with the dragged image position, enabling a “converge back toward center when zooming out while overflowed” experience. It does this by exposing transform state from the image item to the parent viewer and extending the scale hook to optionally return updated translation offsets.

Changes:

• Expose modalBoxRef / transform / resetTransform from TImageItem so the parent viewer can measure overflow and update translation during zoom.
• Extend useScale to accept optional zoom-center/translate inputs and return a computed newTranslate for compensation.
• Update image-viewer.tsx to detect overflow and adjust transform on wheel zoom-out, and to reset transforms on “reset”.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
packages/components/image-viewer/image-viewer.tsx	Adds overflow detection and wheel zoom-out convergence logic; wires a ref to TImageItem and resets its transform on reset.
packages/components/image-viewer/hooks/index.ts	Reworks scaling hook to optionally compute translation compensation and returns it to the caller; simplifies scale clamping.
packages/components/image-viewer/base/ImageItem.tsx	Adds expose() of internal refs/state (modalBoxRef, transform, resetTransform) and attaches a DOM ref for measurements.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.