🌈 style: 将对唱歌词、逐词音译与 span 左对齐

[ITManCHINA]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @ITManCHINA, 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

• 歌词显示优化: 引入了新的CSS规则，确保歌词中的所有span元素（包括对唱歌词和逐词音译）都左对齐，以提高可读性。
• 逐词音译布局调整: 为带有romanWord类的逐词音译span元素设置了display: flex;，这可能有助于更灵活地控制其内部布局。

Changelog

• src/components/Player/PlayerLyric/AMLyric.vue
  • 添加了:deep(.am-lyric div[class*="lyricMainLine"] span)样式规则，将歌词主行内的所有span元素文本对齐方式设置为start（左对齐）。
  • 添加了:deep(.am-lyric div[class*="lyricMainLine"] span[class*="romanWord"])样式规则，将带有romanWord类的span元素的显示类型设置为flex。

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. ↩

[gemini-code-assist]

Code Review

你好！这次的代码审查主要关注了新添加的 CSS 样式。我注意到一个样式规则可能无法按预期工作，因为它将 text-align 应用于了默认的内联元素 <span> 上。我在代码中留下了具体的评论和建议，希望能帮助你改进。除此之外，整体改动目标明确。

[gemini-code-assist]

text-align 属性仅对块级容器（如 div）或 display 值为 block、inline-block、flex 等的元素生效。<span> 元素默认为 inline，因此 text-align: start; 这条规则对它本身没有效果。在下面的规则中，span[class*="romanWord"] 的 display 被设置为 flex，这使其成为一个块级容器，所以 text-align 会对它生效。然而，对于此选择器匹配到的其他 <span> 元素，这条规则将是无效的。为了确保所有目标元素都能正确对齐，建议将此样式与 display 属性的更改结合使用，或者将 text-align 应用于其父级块状元素上。