✨ feat: 新增自定义背景图

[imsyy]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @imsyy, 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!

此拉取请求引入了一项备受期待的功能，允许用户设置自定义背景图片，极大地增强了应用程序的个性化能力。与此同时，主题定制选项也得到了显著扩展，提供了更丰富的调色板和专门的配置模态框。这些更改还包括将界面缩放功能重构到其自身的模态框中，以实现更流畅的用户体验，并通过模态组件的懒加载和CSS调整实现了多项性能优化，以无缝集成新的背景图片模式。

Highlights

• 自定义背景图功能: 新增了自定义背景图功能，允许用户上传图片作为应用背景，并提供调整缩放、模糊度和遮罩透明度等配置选项。
• 增强主题定制: 扩展了预定义主题色板，并引入了全新的“主题配置”弹窗，用户可以在其中选择更丰富的颜色、调整主题变体，并在图片背景模式下管理主题色。
• 界面缩放重构: 界面缩放功能被重构到一个独立的模态框中，提供更直观的缩放比例调整和恢复默认选项。
• 性能优化与代码结构改进: 通过模态组件的懒加载（动态导入）显著提升了应用启动性能，并优化了CSS动画以利用GPU加速。同时，重构了歌词处理逻辑和主题色生成机制，提高了代码的可维护性和灵活性。

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 引入了一个很棒的新功能：自定义背景图。这包括一个新的主题配置模态框、UI 缩放模态框，以及对主题和颜色生成逻辑的大量重构。同时，代码中还包含了一些性能优化，比如懒加载模态框组件。总的来说，这是一次出色的功能添加，代码质量很高，但在一些地方还有改进的空间。

[gemini-code-assist]

solid 主题的色值 #9e9e9e 使用了小写，而其他新增的颜色都使用了大写十六进制（例如 #F44336）。为了保持一致性，建议将所有颜色值统一为大写。

Suggested change

	"color": "#9e9e9e"
	"color": "#9E9E9E"

[gemini-code-assist]

这个 @click 事件处理函数中包含了多条语句，虽然在 Vue 中是允许的，但将复杂的逻辑直接写在模板中会降低代码的可读性和可维护性。建议将这部分逻辑提取到一个单独的方法中，例如：

const selectAutoThemeColor = () => {
  statusStore.backgroundConfig.useCustomColor = false;
  statusStore.backgroundConfig.isSolid = false;
};

然后在模板中直接调用 @click="selectAutoThemeColor"。

[gemini-code-assist]

在 .image 模式的样式覆盖中，大量使用了 !important。虽然这在覆盖UI库或全局样式时是一种快捷方式，但过度使用会增加未来样式维护的难度，并可能导致样式冲突。建议尽可能通过提高选择器特异性来避免使用 !important。