fix(PlayerControl): 评论数量在没有评论按钮时也意外显示 - #982
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! 此拉取请求旨在修复一个用户界面显示问题，即在全屏播放器模式下，当评论按钮被禁用时，评论数量仍然会意外显示。通过调整设置界面的逻辑和播放器控制组件的渲染条件，确保评论数量的显示与评论按钮的可见性正确关联，提升用户体验。 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://cdn.statically.io/img/avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| v-if=" | ||
| !musicStore.playSong.path && | ||
| !statusStore.pureLyricMode && | ||
| settingStore.fullscreenPlayerElements.comments | ||
| " |
There was a problem hiding this comment.
为了提高代码的可读性和可维护性，建议将这个 v-if 的条件提取到一个计算属性中。这样可以使模板更简洁，逻辑也更清晰。
可以在 <script setup> 中添加如下计算属性：
const showCommentButton = computed(
() =>
!musicStore.playSong.path &&
!statusStore.pureLyricMode &&
settingStore.fullscreenPlayerElements.comments,
);然后模板中就可以使用这个计算属性了。
v-if="showCommentButton"
There was a problem hiding this comment.
Pull request overview
该 PR 旨在修复全屏播放器中“评论按钮被隐藏时，评论数量仍意外显示”的问题，并在设置面板中对相关开关进行联动约束，使 UI 行为更一致。
Changes:
- 将评论相关的
v-if从内部图标移动到<n-badge>上，避免仅徽标被渲染导致计数单独显示。 - 在全屏播放器元素管理设置中，为“显示评论数量”增加禁用态（当“显示评论按钮”关闭时不可操作）。
- 将设置项列表从静态数组改为
computed，以便根据当前设置动态计算禁用态。
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/components/Player/PlayerControl.vue |
将评论徽标整体按“评论按钮开关”条件渲染，避免只显示数量不显示按钮 |
src/components/Modal/Setting/FullscreenPlayerManager.vue |
增加“评论数量”开关的禁用态，并将 items 改为计算属性以响应联动 |
You can also share your feedback on Copilot code review. Take the survey.
| <n-text class="name">{{ item.label }}</n-text> | ||
| <n-switch | ||
| :value="settingStore.fullscreenPlayerElements[item.key]" | ||
| :value="item.disabled ? false : settingStore.fullscreenPlayerElements[item.key]" |
There was a problem hiding this comment.
The switch’s displayed value is forced to false when item.disabled is true, even though settingStore.fullscreenPlayerElements[item.key] may still be true (e.g., user enables commentCount then disables comments). This makes the UI state diverge from the persisted setting and can surprise users when re-enabling comments. Consider either (1) always displaying the real stored value while disabled, or (2) actively syncing the store (set commentCount to false) when comments is turned off.
| :value="item.disabled ? false : settingStore.fullscreenPlayerElements[item.key]" | |
| :value="settingStore.fullscreenPlayerElements[item.key]" |
| settingStore.fullscreenPlayerElements.comments | ||
| " | ||
| :show=" | ||
| statusStore.songCommentCount > 0 && settingStore.fullscreenPlayerElements.commentCount |
There was a problem hiding this comment.
Now that the whole <n-badge> is gated by fullscreenPlayerElements.comments, the comment-count fetch logic in the script (which only checks fullscreenPlayerElements.commentCount) can still call the comments API even when the comments entry point is hidden. Consider also gating comment-count fetching on fullscreenPlayerElements.comments (or automatically turning off commentCount when comments is disabled) to avoid unnecessary requests.
| statusStore.songCommentCount > 0 && settingStore.fullscreenPlayerElements.commentCount | |
| statusStore.songCommentCount > 0 && | |
| settingStore.fullscreenPlayerElements.commentCount && | |
| settingStore.fullscreenPlayerElements.comments |
| type Item = { label: string; key: FullscreenPlayerElementKey; disabled?: boolean }; | ||
|
|
||
| const items: Item[] = [ | ||
| const items = computed<Item[]>(() => [ |
There was a problem hiding this comment.
items is now created with computed(...), but computed is not imported in this <script setup> block. This will cause a runtime/compile error when bundling the component. Import computed from vue (or refactor back to a static array if reactivity isn’t needed).
No description provided.