fix:修复歌词显示相关

[Pissofdvpe]

概述

• 重点修复播放页面歌词设置在居中和居右状态下不能自动换行的问题
• 优化了SPlayer的歌词显示功能
• 优化调整歌词大小设置,重点改进歌词内容的自动换行和字体大小调整，同时优化逐字歌词、翻译和罗马音的显示效果
• 优化旨在提升歌词在不同设备和语言环境下的可读性和视觉一致性

变更涉及

src/components/Player/MainLyric.vue
src/components/Setting/LyricsSetting.vue
web/lyric.html

修改内容

1. 歌词组件更新 (src/components/Player/MainLyric.vue)

• 歌词内容自动换行：
  • 添加 CSS 属性：.content 和 .count-down-content .content 设置 overflow-wrap: anywhere; word-break: break-word; white-space: normal; hyphens: auto;，确保长歌词自动换行，避免溢出。
  • 添加 width: 100%; 和 box-sizing: border-box; 到 .lrc-line 和 .content，优化宽度控制。
• 字体大小调整：
  • 使用 clamp(14px, 2vw, 18px) 动态调整歌词字体大小，适配不同屏幕。
  • 添加 lang 属性：通过正则 /[\u4e00-\u9fa5]/ 检测中文（lang="zh-CN"）或英文（lang="en"），应用于 <span class="content">。
• 逐字歌词（word 和 filler）：
  • 添加 lang 属性：动态检测中文或英文，应用于 <span class="word"> 和 <span class="filler">。
  • 移除 translateY 垂直微调逻辑（包括 translateY(-${Math.min(((playSeek.value - wordData.time) / wordData.duration) * 2, 2)}px) 和默认 translateY(-2px)），简化动画。
• 翻译（tran）和罗马音（roma）：
  • 添加 lang="en" 到 <span class="tran"> 和 <span class="roma">。
  • 添加换行属性：overflow-wrap: anywhere; word-break: break-word; white-space: normal; hyphens: auto;。
• 样式优化：
  • 删除 .lrc-line 的 align-items: flex-end; 和 align-items: center !important;，改进布局对齐。
  • 添加 :deep(.n-scrollbar-content) 的 max-width: 100%; box-sizing: border-box;。

2. 歌词设置组件更新 (src/components/Setting/LyricsSetting.vue)

• 字体大小调整：
  • 调整歌词字体大小（lyricFontSize）、翻译歌词大小（tranFontSize）、音译歌词大小（romaFontSize）的最小值以适配不同设备使用体验。
  • 更新桌面歌词文字大小设置：
    • 修改 <n-select> 的选项生成逻辑，调整 label 和 value 的起始值从 20 + i 改为 10 + i。
    • 示例变更：
      • 修改前：label: "${20 + i} px", value: 20 + i
      • 修改后：label: "${10 + i} px", value: 10 + i

3. Web 歌词页面更新 (web/lyric.html)

• 字体大小调整：
  • 修改字体大小限制：调整fontSize > 10 为配合 LyricsSetting.vue 中的桌面歌词文字大小设置（最小值 10px）。
  • 未添加换行或语言属性相关修改，仅同步字体大小逻辑。