feat(taskbar): 添加任务栏逐字歌词功能

[laoshuikaixue]

• 在 TaskbarLyric 组件中添加 words 和 currentTime 属性传递
• 引入 LyricWord 类型定义并扩展 lyric line 数据结构
• 实现逐字歌词渲染逻辑和进度计算功能
• 添加任务栏设置中的逐字歌词开关选项
• 集成 IPC 通信以支持逐字歌词配置传递
• 实现基于时间轴的逐字进度动画效果
• 添加 CSS 样式实现逐字歌词遮罩渐变效果

[gemini-code-assist]

Summary of Changes

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

此拉取请求为任务栏歌词功能引入了逐字歌词显示。它通过在设置中添加一个新选项来启用此功能，更新了任务栏配置以包含此设置，并实现了逐字歌词的渲染逻辑，包括基于时间轴的进度动画和视觉渐变效果。这些更改还涉及扩展数据类型和IPC通信，以确保逐字歌词功能在整个应用程序中正确传递和应用。

Highlights

• 逐字歌词功能: 在任务栏歌词组件中新增逐字歌词显示功能。
• 设置选项: 引入新的设置项，允许用户开启或关闭任务栏逐字歌词效果。
• 渲染与动画: 实现逐字歌词的渲染逻辑、进度计算以及基于时间轴的动画效果。
• 数据结构与通信: 扩展了歌词数据结构以支持逐字信息，并集成了IPC通信来传递配置。
• 视觉效果: 添加了CSS样式，为逐字歌词实现了遮罩渐变效果。

Changelog

• electron/main/ipc/ipc-taskbar.ts
  • 为任务栏配置添加了 showYrc 属性。
• src/components/Setting/config/lyric.ts
  • 在任务栏歌词设置中新增了“显示逐字歌词”的开关选项。
• src/composables/useInit.ts
  • 更新了任务栏配置，使其在设置更改时包含 showYrc 和 themeMode。
• src/stores/setting.ts
  • 在设置状态中添加了 taskbarLyricShowYrc 属性。
  • 将 taskbarLyricShowYrc 的默认值初始化为 true。
• src/types/shared/taskbar-ipc.ts
  • 在 TaskbarConfig 接口中添加了 showYrc 属性。
• src/utils/initIpc.ts
  • 在通过IPC发送的任务栏配置中包含了 showYrc。
• src/views/TaskbarLyric/LyricScroll.vue
  • 修改了组件以根据条件渲染逐字歌词。
  • 添加了 words 和 currentTime 属性。
  • 实现了 getWordStyle 函数用于进度计算。
  • 添加了 word-item 的CSS遮罩渐变样式。
• src/views/TaskbarLyric/index.vue
  • 向 LyricScroll 组件传递了 words 和 currentTime 属性。
  • 导入了 LyricWord 类型。
  • 扩展了 DisplayItem 接口以包含 words 属性。
  • 根据 taskbarLyricShowYrc 设置有条件地为 displayItems 提供 words。

Activity

• 在 TaskbarLyric 组件中添加 words 和 currentTime 属性传递。
• 引入 LyricWord 类型定义并扩展 lyric line 数据结构。
• 实现逐字歌词渲染逻辑和进度计算功能。
• 添加任务栏设置中的逐字歌词开关选项。
• 集成 IPC 通信以支持逐字歌词配置传递。
• 实现基于时间轴的逐字进度动画效果。
• 添加 CSS 样式实现逐字歌词遮罩渐变效果。

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

This PR effectively implements the taskbar word-by-word lyric feature. The code structure is clear, and the integration of new features is well-considered, such as adding rendering logic for word-by-word lyrics in the TaskbarLyric component and utilizing CSS mask-image for a karaoke effect; adding a switch for word-by-word lyrics in the settings, and ensuring configuration is passed from the main process to the render process; and updating relevant data types and interfaces to support word-by-word lyric data. The overall code quality is high. I only found one issue: a watch in useInit.ts is missing a dependency, which may cause the taskbar lyric style not to update when the theme is switched. I have provided specific modification suggestions for this.

[laoshuikaixue]

2026-02-21.19-33-18.mp4