增强文本可选功能和别名显示

[ranhengzhang]

解决需求 discussions/885

• 使歌单页面中的歌曲标题、别名、专辑名、歌手名可以选中复制
• 使专辑、歌手页面的名称以及别名可以选中复制，并更改了排版方便显示和选择
• 专辑页面文字太多时布局会乱所以单独显示
• 专辑页面标题太长会 hidden 所以添加了点击弹窗事件在弹窗中选择
• 一些别的更改

Note

歌单中的专辑只有原标题，别名加不上去，等别人来实现了

下面是一些例子：

[gemini-code-assist]

Summary of Changes

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

• 增强文本可选择性: 在歌单页面、专辑页面和歌手页面中，歌曲标题、别名、专辑名和歌手名现在都可以被选中和复制，提升了用户体验。
• 优化别名显示与数据结构: 别名（alias）的数据结构从字符串更新为字符串数组，以便更好地处理和显示多个别名。同时，调整了别名的排版，使其在专辑和歌手页面更清晰地显示。
• 处理长标题显示: 针对专辑页面标题过长导致显示不全的问题，增加了点击标题弹出完整内容的功能，方便用户查看和选择。
• 改进“原唱”标签显示: 将歌曲卡片中的“原”标签更新为更明确的“原唱”标签。
• 布局与样式调整: 移除了部分组件中不必要的绝对定位样式，并对别名显示增加了统一的括号和分隔符样式，使界面更整洁。

Changelog

• src/components/Card/SongCard.vue
  • 为歌曲名称、别名、艺术家和专辑文本添加了 user-select-text 类，使其可选中。
  • 将“原”标签文本更新为“原唱”。
  • 为别名（alia）添加了 CSS 伪元素，以在文本前后自动添加括号和空格。
• src/components/List/ListDetail.vue
  • 为标题 n-h2 元素添加了 user-select-text 类和 handleTitleClick 事件。
  • 新增了别名（alias）的显示区域，并为其添加了 user-select-text 类。
  • 移除了 .collapse 元素的 position: absolute 和 top 样式。
  • 新增了 handleTitleClick 方法，用于在点击标题时弹出描述模态框。
  • 为别名（name-alias）添加了 CSS 伪元素，以在文本前后自动添加括号，并使用分号分隔多个别名。
• src/style/main.scss
  • 新增了 .user-select-text 样式类及其相关选择器，用于全局启用文本选择功能。
• src/types/main.ts
  • 在 CoverType 类型中新增了 alias?: string[] 属性。
  • 将 ArtistType 类型中的 alia?: string 属性更新为 alias?: string[]。
• src/utils/format.ts
  • 修改了 formatCoverList 函数，将 item.alias 和 item.transNames 合并并过滤后赋值给 alias 属性。
  • 修改了 formatArtistsList 函数，将 item.alias 和 item.transNames 合并并过滤后赋值给 alias 属性。
• src/utils/modal.ts
  • 在 openDescModal 函数中，为内容 div 添加了 user-select: text 样式，使弹窗内容可选中。
• src/views/Artist/layout.vue
  • 为艺术家名称 div 添加了 user-select-text 类。
  • 更新了别名（alias）的显示逻辑，以支持显示 alias 数组中的多个别名。
  • 移除了 .name 元素的 height 样式。
  • 移除了 .first-child 元素的 height 样式。
  • 移除了 .collapse 元素的 position: absolute 和 top 样式。
  • 为别名（name-alias）添加了 CSS 伪元素，以在文本前后自动添加括号，并使用分号分隔多个别名。
• src/views/List/album.vue
  • 调整了 getAlbumDetail 函数中 resetData 的调用逻辑，确保仅在 detailData.value?.id 与新 id 不同时才重置数据。

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

本次 PR 主要增强了应用内多个位置的文本可选复制功能，并改进了别名的显示方式。整体实现方式良好，通过添加 user-select-text CSS 类和全局样式，有效地启用了文本选择。将别名括号移至 CSS 伪元素是一个聪明的做法，改善了复制文本时的体验。同时，对 ArtistType 和 CoverType 的类型定义进行了更新，以支持多个别名，并在 format.ts 中进行了相应的数据处理，这些改动都与需求一致。

我发现一处可以改进的地方：在 src/views/Artist/layout.vue 中，别名显示的样式与其他组件存在轻微不一致，可能会导致多余的间距。我已经提出了具体的代码建议来修正这个问题。

除此之外，其他代码改动，包括布局调整和逻辑重构，都是合理且必要的。总体来说，这是一次高质量的更新。

[gemini-code-assist]

在 .name-alias 的 ::before 和 ::after 伪元素中，content 属性已经包含了空格，这与 margin 属性一起使用时可能会产生多余的间距，造成与其他组件（如 SongCard.vue）的视觉不一致。建议移除 margin 属性以保持样式统一和代码简洁。

          &::before {
            content: " (";
          }
          &::after {
            content: ") ";
          }

[imsyy]

感谢您的贡献，但是目前项目中已添加 复制更多信息 菜单项，该pr就先关闭了