Repository navigation
style(SongWiki): 修复了一些样式问题 - #1002
Conversation
Summary of ChangesHello, 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! 此拉取请求主要关注于优化歌曲维基页面中封面图片的显示样式。通过调整图片组件的属性和相关CSS，解决了非正方形封面导致背板显示异常的问题，并统一了封面预览图的圆角样式，以提供更美观和一致的用户界面。 Highlights
Changelog
Activity
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
本次 PR 主要修复了歌曲百科页面的一些样式问题，包括非正方形封面导致的背板显示错误，以及为封面预览添加了圆角，与 ListDetail 保持一致。
代码变更通过添加 object-fit: cover 属性和统一的 :deep(img) 样式，有效地解决了布局问题，并将样式逻辑从模板中移至样式块，提高了代码的可维护性。
不过，在重构过程中，n-image 组件的 alt 属性被意外移除了，这会影响到屏幕阅读器用户的可访问性。我已在具体的代码行提出了建议，希望能恢复并优化 alt 属性，为主封面图提供更具描述性的文本，并为装饰性图片设置为空的 alt 属性。
| class="cover-img" | ||
| object-fit="cover" | ||
| :previewed-img-props="{ style: { borderRadius: '8px' } }" | ||
| :render-toolbar="renderToolbar" |
There was a problem hiding this comment.
为了可访问性（accessibility），建议为封面图片添加 alt 属性。这对于屏幕阅读器用户至关重要。使用动态的歌曲名称作为 alt 文本会比之前硬编码的 'detail-cover' 更具描述性，同时也修复了此次变更中意外移除 alt 属性的问题。
:render-toolbar="renderToolbar"
:img-props="{ alt: currentSong.name }"
| preview-disabled | ||
| :src="currentSong.cover" | ||
| :img-props="{ alt: 'cover-shadow' }" | ||
| object-fit="cover" |
There was a problem hiding this comment.
这个封面阴影是装饰性图片，建议为其添加一个空的 alt 属性 (alt="")。这有助于屏幕阅读器等辅助技术正确地忽略它，从而改善可访问性。此次变更移除了 alt 属性，建议将其加回。
object-fit="cover"
:img-props="{ alt: '' }"
There was a problem hiding this comment.
Pull request overview
该 PR 聚焦于 SongWiki 页面封面展示样式：修复非正方形封面时背板（cover-shadow）显示异常，并让封面预览的圆角与 ListDetail 保持一致。
Changes:
- 为歌曲封面预览图增加圆角样式（与
ListDetail对齐） - 调整封面背板渲染方式以适配非正方形封面
- 在封面容器内补充
img的宽高约束以避免尺寸异常
You can also share your feedback on Copilot code review. Take the survey.
1. 当歌曲封面不是正方形时，封面背板（`cover-shadow`）显示错误 2. 为点击查看封面预览也设置了圆角，与 `ListDetail` 保持一致
cover-shadow）显示错误ListDetail保持一致