style(setting): 优化本地目录样式

[MoYingJi]

• 优化设置页「本地与缓存」中的本地歌曲和歌词目录的样式
• 修复「本地歌曲」页面中「目录管理」被打开时意外选中第一个目录的删除按钮的问题

[gemini-code-assist]

Summary of Changes

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

• 样式优化: 优化了设置页中本地歌曲和歌词目录的显示样式，使其更美观。
• 文本更新: 将设置页中添加目录的按钮文本从“更改”更新为“添加”，更准确地表达了操作意图。
• Bug 修复: 修复了在本地歌曲页面中，当目录管理展开时，删除按钮意外被选中的问题。

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

本次的拉取请求主要优化了本地目录的样式，并修复了目录管理弹窗中的一个焦点问题。代码更改清晰、有效，成功实现了预期目标。

在 LocalSetting.vue 中，将按钮文字从“更改”更新为“添加”更符合其功能，内联样式的调整也改善了视觉效果。
在 src/views/Local/layout.vue 中，通过为删除按钮添加 :focusable="false" 属性，巧妙地解决了弹窗打开时意外获取焦点的问题。

代码质量很高。有一个小建议可以在未来的开发中考虑：在 src/components/Setting/LocalSetting.vue 中，v-for 循环使用了 index 作为 key。当列表项可能被删除或重新排序时，使用列表项自身的唯一标识（例如这里的路径 item）作为 key（即 :key="item"）会更健壮，可以避免潜在的渲染问题。

整体来看，这是一次不错的改进。做得很好！