Skip to content

feat(歌词): 增加自适应歌词字体大小模式 添加歌词字体大小自适应模式,可根据窗口高度自动缩放歌词大小,避免全屏时过小或窗口时过大。新增设置选项允许用户在固定大小和自适应模式之间切换,并更新了歌词预览和播放器组件以支持新的字体大小计算逻辑。#852

Merged
imsyy merged 3 commits into
devfrom
dev-style
Feb 9, 2026

Conversation

@kazukokawagawa
Copy link
Copy Markdown
Collaborator

No description provided.

添加歌词字体大小自适应模式,可根据窗口高度自动缩放歌词大小,避免全屏时过小或窗口时过大。新增设置选项允许用户在固定大小和自适应模式之间切换,并更新了歌词预览和播放器组件以支持新的字体大小计算逻辑。
@kazukokawagawa kazukokawagawa self-assigned this Feb 9, 2026
@kazukokawagawa kazukokawagawa marked this pull request as ready for review February 9, 2026 13:12
@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @kazukokawagawa, I'm Gemini Code Assist1! 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!

此拉取请求为歌词显示功能引入了一项重要增强,即增加了自适应字体大小模式。此模式可根据应用程序窗口的高度动态调整歌词文本,确保在全屏和窗口模式等各种窗口尺寸下都能获得最佳可读性。此外,它还包含对QRC歌词解析器的一项重要修复,提高了其正确解释和显示来自可能格式不正确的XML结构的歌词内容的能力。

Highlights

  • 自适应歌词字体大小: 引入了新的自适应模式,歌词字体大小可根据窗口高度自动缩放,以优化不同窗口尺寸下的显示效果。
  • 新增设置选项: 在设置中添加了一个新的切换选项,允许用户在固定和自适应歌词字体大小模式之间切换。
  • 歌词组件更新: 播放器歌词组件(AMLyric.vue、DefaultLyric.vue、LyricPreview.vue)已更新,以支持新的自适应字体大小计算逻辑。
  • QRC解析器改进: 增强了QRC歌词解析器,通过引入XML实体解码和更健壮的LyricContent匹配策略,提高了对非标准XML内容的兼容性。
Changelog
  • src/components/Player/PlayerLyric/AMLyric.vue
    • 集成 getFontSize 函数以实现自适应歌词大小。
  • src/components/Player/PlayerLyric/DefaultLyric.vue
    • 集成 getFontSize 函数以实现自适应歌词大小。
  • src/components/Setting/components/LyricPreview.vue
    • 集成 getFontSize 函数以实现自适应歌词大小,并调整了CSS变量的使用。
  • src/components/Setting/config/lyric.ts
    • 添加了“自适应歌词大小”设置选项。
    • 更新了字体大小输入框的描述,以反映自适应模式下的基准大小说明。
  • src/stores/setting.ts
    • 在设置存储中添加了 lyricFontSizeMode 属性,并将其初始化为“adaptive”。
  • src/utils/lyric/qrc-parser.ts
    • 添加了XML实体解码功能。
    • 改进了 LyricContent 的提取逻辑,以更好地处理非标准XML格式。
Activity
  • 此拉取请求目前没有人工活动记录。
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.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

本次更新引入了歌词字体大小自适应模式,这是一个很棒的用户体验改进。整体实现清晰,通过新增设置项、更新 store 和在组件中使用 getFontSize 函数来动态计算字体大小。我发现 getFontSize 函数在三个不同的组件中被重复定义,建议将其提取到公共的工具函数中以提高代码的可维护性,具体细节请见我的评论。此外,本次提交还包含了对 QRC 歌词解析的修复。这是一个很好的改进,但为了便于代码审查和追溯,建议将不同功能的修改放在独立的 PR 中。

Comment on lines +74 to +79
const getFontSize = (size: number) => {
if (settingStore.lyricFontSizeMode === "adaptive") {
return `calc(${size} / 1080 * 100vh)`;
}
return `${size}px`;
};
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

getFontSize 函数在多个组件(AMLyric.vueDefaultLyric.vueLyricPreview.vue)中重复定义。为了遵循 DRY (Don't Repeat Yourself) 原则并提高代码的可维护性,建议将此函数提取到一个共享的工具文件中(例如,一个新的 src/utils/style.ts 或一个现有的相关工具文件),然后在这三个组件中导入并使用它。

将多个组件中重复的字体大小计算逻辑提取到统一的工具函数 getFontSize 中
该函数根据字体大小模式(自适应或固定)返回相应的 CSS 值
@imsyy imsyy merged commit 740f73c into dev Feb 9, 2026
4 checks passed
@kazukokawagawa kazukokawagawa deleted the dev-style branch February 10, 2026 07:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants