fix(image-viewer): clean up animation timer on unmount to prevent unhandled errors during test runs

[Copilot]

🤔 这个 PR 的性质是？

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

🔗 相关 Issue

测试运行时偶发 NotFoundError: The child can not be found in the parent 错误，导致 CI 失败。

💡 需求背景和解决方案

问题描述：
在运行 upload 组件测试时，偶尔会出现 NotFoundError: The child can not be found in the parent 错误。这个错误在测试环境销毁后被捕获，表明有未完成的异步操作。

根本原因：
ImageViewer 组件在 packages/components/image-viewer/image-viewer.tsx 中使用了一个 200ms 的 setTimeout 来处理可见性变化时的动画。当测试用例通过 document.querySelectorAll('.t-image-viewer').forEach((node) => node.remove()) 手动移除 DOM 节点时，Vue 组件没有被正确卸载，导致定时器回调在测试环境销毁后仍然执行，尝试更新已移除组件的响应式状态。

解决方案：
在 ImageViewer 组件中添加 onBeforeUnmount 生命周期钩子，在组件卸载时清除动画定时器，防止内存泄漏和未处理的错误。

onBeforeUnmount(() => {
  clearTimeout(animationTimer.value);
});

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-vue-next

• fix(image-viewer): 在组件卸载时清除动画定时器

@tdesign-vue-next/chat

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

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

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

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

Original prompt

⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯
NotFoundError: The child can not be found in the parent.
�[2m⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 8, INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4, INVALID_CHARACTER_ERR: 5, NO_DATA_ALLOWED_ERR: 6, NO_MODIFICATION_ALLOWED_ERR: 7, NOT_FOUND_ERR: 8, NOT_SUPPORTED_ERR: 9, INUSE_ATTRIBUTE_ERR: 10, INVALID_STATE_ERR: 11, SYNTAX_ERR: 12, INVALID_MODIFICATION_ERR: 13, NAMESPACE_ERR: 14, INVALID_ACCESS_ERR: 15, VALIDATION_ERR: 16, TYPE_MISMATCH_ERR: 17, SECURITY_ERR: 18, NETWORK_ERR: 19, ABORT_ERR: 20, URL_MISMATCH_ERR: 21, QUOTA_EXCEEDED_ERR: 22, TIMEOUT_ERR: 23, INVALID_NODE_TYPE_ERR: 24, DATA_CLONE_ERR: 25 }
This error originated in "../../components/upload/tests/upload.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
This error was caught after test environment was torn down. Make sure to cancel any running tasks before test finishes:

• cancel timeouts using clearTimeout and clearInterval
• wait for promises to resolve using the await keyword
  ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

�[2m Test Files 118 passed (118)
�[2m Tests 2596 passed�[2m | 6 skipped (2602)
�[2m Errors 1 error
�[2m Start at 13:26:44
�[2m Duration 123.59s�[2m (transform 11.61s, setup 0ms, collect 198.21s, tests 61.47s, environment 74.67s, prepare 12.48s)

 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Test failed. See above for more details.
 ELIFECYCLE  Command failed with exit code 1.
Process completed with exit code 1.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[liweijie0812]

@copilot 继续工作

[liweijie0812]

@copilot 继续

[Copilot]

@copilot 继续

Fixed in commit e2cde96. The issue was that the ImageViewer component's animation timer (setTimeout) wasn't being cleaned up when the component was unmounted. Added an onBeforeUnmount hook to clear the timer, which prevents the intermittent "NotFoundError: The child can not be found in the parent" errors during test runs.

[pkg-pr-new]

tdesign-vue-next-demo

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

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

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

commit: e2cde96

[tdesign-bot]

TDesign Component Site Preview Open

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