Repository navigation
Conversation
Summary of ChangesHello @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! 此拉取请求旨在通过引入对英语和韩语歌词的单独字体自定义功能，显著增强用户体验。现在，用户可以根据个人偏好为不同语言的歌词选择特定的字体，从而提升歌词显示的可读性和美观性。这一改进使得歌词显示更加灵活和个性化。 Highlights
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 旨在完善歌词字体的自定义功能，增加了对英语和韩语歌词的单独字体设置。这是一个很好的功能增强。
但在审查代码时，我发现一个关键问题和一个可以改进的地方：
-
（关键）韩语字体功能无法正常工作：您为韩语歌词添加了设置项和 CSS 样式，但用于检测歌词语言的
getLyricLanguage函数（位于src/utils/format.ts）并未更新，它无法识别韩语。这将导致lang="ko"属性永远不会被设置到歌词元素上，因此韩语字体的设置不会生效。为了修复这个问题，您需要修改getLyricLanguage函数，增加对韩语字符的检测逻辑（例如，使用正则表达式/[\uac00-\ud7af]/.test(lyric)）。 -
（建议）设置项存在代码重复：在
GeneralSetting.vue文件中，英语、日语和韩语的字体设置卡片存在大量重复代码。建议您通过v-for循环来动态生成这些卡片，以提高代码的可维护性。我已在具体的文件评论中给出了建议。
请务必修复第一个关键问题，以确保新功能的完整性。
| <n-card class="set-item"> | ||
| <div class="label"> | ||
| <n-text class="name">英语歌词字体</n-text> | ||
| <n-text class="tip" :depth="3"> 是否在歌词为英语时单独设置字体 </n-text> | ||
| </div> | ||
| <n-flex> | ||
| <Transition name="fade" mode="out-in"> | ||
| <n-button | ||
| v-if="settingStore.englishLyricFont !== 'follow'" | ||
| type="primary" | ||
| strong | ||
| secondary | ||
| @click="settingStore.englishLyricFont = 'follow'" | ||
| > | ||
| 恢复默认 | ||
| </n-button> | ||
| </Transition> | ||
| <n-select | ||
| v-model:value="settingStore.englishLyricFont" | ||
| :options="[ | ||
| { label: '跟随全局', value: 'follow' }, | ||
| ...allFontsData.filter((v) => v.value !== 'default'), | ||
| ]" | ||
| class="set" | ||
| filterable | ||
| /> | ||
| </n-flex> | ||
| </n-card> | ||
| <n-card class="set-item"> | ||
| <div class="label"> | ||
| <n-text class="name">日语歌词字体</n-text> | ||
| <n-text class="tip" :depth="3"> 是否在歌词为日语时单独设置字体 </n-text> | ||
| </div> | ||
| <n-flex> | ||
| <Transition name="fade" mode="out-in"> | ||
| <n-button | ||
| v-if="settingStore.japaneseLyricFont !== 'follow'" | ||
| type="primary" | ||
| strong | ||
| secondary | ||
| @click="settingStore.japaneseLyricFont = 'follow'" | ||
| > | ||
| 恢复默认 | ||
| </n-button> | ||
| </Transition> | ||
| <n-select | ||
| v-model:value="settingStore.japaneseLyricFont" | ||
| :options="[ | ||
| { label: '跟随全局', value: 'follow' }, | ||
| ...allFontsData.filter((v) => v.value !== 'default'), | ||
| ]" | ||
| class="set" | ||
| filterable | ||
| /> | ||
| </n-flex> | ||
| </n-card> | ||
| <n-card class="set-item"> | ||
| <div class="label"> | ||
| <n-text class="name">韩语歌词字体</n-text> | ||
| <n-text class="tip" :depth="3"> 是否在歌词为韩语时单独设置字体 </n-text> | ||
| </div> | ||
| <n-flex> | ||
| <Transition name="fade" mode="out-in"> | ||
| <n-button | ||
| v-if="settingStore.koreanLyricFont !== 'follow'" | ||
| type="primary" | ||
| strong | ||
| secondary | ||
| @click="settingStore.koreanLyricFont = 'follow'" | ||
| > | ||
| 恢复默认 | ||
| </n-button> | ||
| </Transition> | ||
| <n-select | ||
| v-model:value="settingStore.koreanLyricFont" | ||
| :options="[ | ||
| { label: '跟随全局', value: 'follow' }, | ||
| ...allFontsData.filter((v) => v.value !== 'default'), | ||
| ]" | ||
| class="set" | ||
| filterable | ||
| /> | ||
| </n-flex> | ||
| </n-card> |
There was a problem hiding this comment.
这三张用于设置英语、日语、韩语歌词字体的卡片（n-card）包含了大量重复的模板代码。这会降低代码的可维护性，未来如果需要添加更多语言支持会很麻烦。
建议您进行重构，使用 v-for 指令来动态生成这些卡片。具体做法是：
- 在
<script setup>中创建一个包含各语言配置的对象数组，例如：const languageFontSettings = [ { name: '英语', model: 'englishLyricFont' }, { name: '日语', model: 'japaneseLyricFont' }, { name: '韩语', model: 'koreanLyricFont' }, ];
- 在模板中，使用
v-for遍历这个数组，只写一个n-card的模板，并使用数组中的数据动态绑定v-if,@click,v-model:value等。
这样可以显著减少代码量，使组件更易于维护和扩展。
2 participants
No description provided.