feat(playBackground): 支持暂停时暂停背景动画

[MoYingJi]

通过设置 flowSpeed 为 0 来暂停动画，这样貌似没什么问题

除此之外，还优化了一些样式和问题
为 BackgroundRender 的 dispose 设置了 500ms 的延迟以修复点击关闭按钮后背景立即消失的问题 删掉了 PlayerControl 里一些地方的 cursor: pointer;

[gemini-code-assist]

Summary of Changes

Hello @MoYingJi, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

本次拉取请求主要引入了在音乐暂停时同步暂停背景动画的功能，为用户提供了更精细的视觉控制。此外，它还解决了背景动画在关闭时立即消失的视觉问题，并通过调整播放器控制界面的光标样式来优化用户体验。

Highlights

• 背景动画随音乐暂停: 通过将 flowSpeed 设置为 0，实现在音乐暂停时背景动画也暂停的功能。
• 优化背景动画销毁逻辑: 为 BackgroundRender 的 dispose 方法增加了 500ms 的延迟，修复了点击关闭按钮后背景动画立即消失的问题。
• 调整播放器控制样式: 移除了 PlayerControl 中部分元素的 cursor: pointer; 样式，并为进度条旁边的 span 元素重新添加了该样式。
• 新增背景动画暂停设置: 在播放设置中添加了一个新的开关，允许用户控制背景动画是否在音乐暂停时也暂停。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

本次 PR 实现了在暂停播放时暂停背景动画的功能，并进行了一些样式优化和问题修复。整体实现清晰，新功能的逻辑明确。

我在代码中发现了一些可以改进的地方：

1. 在 PlayerBackground.vue 中，audioManager 的事件监听器没有在组件卸载时被移除，这会造成内存泄漏。此外，playing 状态的初始值可能不准确。
2. 在 BackgroundRender.vue 中，onUnmounted 钩子中使用了一个硬编码的 500ms 延迟，这使得代码比较脆弱，未来难以维护。

我已经在具体的代码行上提出了修改建议，希望能帮助你提升代码质量。

[gemini-code-assist]

在 onUnmounted 钩子中使用 setTimeout 和一个硬编码的 500ms 延迟来处理 dispose 调用，虽然可以解决背景立即消失的问题，但这种方式比较脆弱。这个延迟时间很可能与 CSS 过渡动画的持续时间有关，如果动画时间在别处被修改，这里的代码也需要手动更新，容易导致不一致和未来的维护困难。

为了提高代码的可维护性和健壮性，建议将 500 这个“魔术数字”提取为一个有意义的常量，并添加注释说明其用途以及与动画时长的关联。

  bgRenderRef.value?.pause();

  // 延迟销毁以等待过渡动画完成，此值应与 CSS 过渡时间保持一致
  const FADE_OUT_DURATION = 500;
  setTimeout(() => {
    if (bgRenderRef.value) {
      bgRenderRef.value.dispose();
      bgRenderRef.value = undefined;
    }
  }, FADE_OUT_DURATION);