feat(theme-generator): add animation

[RylanBot]

🤔 这个 PR 的性质是？

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

🔗 相关 Issue

💡 需求背景和解决方案

demo.mp4

📝 更新日志

• feat(theme-generator): add animation

• 本条 PR 不需要纳入 Changelog

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

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

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

[tencent-adm]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull Request Overview

This pull request introduces animation support for the theme generator, enhancing the visual feedback when the brand color changes.

• Updated the template to conditionally render animation elements.
• Added a MutationObserver in the component to detect and respond to brand color changes.
• Introduced new CSS keyframe animations and associated style changes for smooth transitions.

Comments suppressed due to low confidence (2)

packages/theme-generator/src/common/StickyThemeDisplay/index.vue:54

• Observing all <style> elements along with the document element may introduce performance overhead. Consider narrowing the observation target if possible.

document.querySelectorAll('style').forEach((styleEl) => {

packages/theme-generator/src/common/StickyThemeDisplay/index.vue:138

• Using the 'tan(8deg)' function inside calc may lead to unexpected results if the preprocessor does not compile it as intended. Verify the computed value and consider pre-calculating the constant if supported.

clip-path: polygon(0 0, 0 0, calc(tan(8deg) * -100vh) 100%, calc(tan(8deg) * -100vh) 100%);