[PR #469] [MERGED] fix:修复歌词显示相关 #473

New issue

Closed

opened 2026-02-27 07:11:59 +03:00 by kerem · 0 comments

kerem commented

2026-02-27 07:11:59 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/imsyy/SPlayer/pull/469
Author: @Pissofdvpe
Created: 9/20/2025
Status: ✅ Merged
Merged: 9/23/2025
Merged by: @imsyy

Base: dev ← Head: dev-fix

📝 Commits (4)

8bd3dc5 Update MainLyric.vue
105fed4 Update LyricsSetting.vue
6e1e56c Update lyric.html
172ca5a Update lyric.html

📊 Changes

3 files changed (+45 additions, -31 deletions)

View changed files

📝 src/components/Player/MainLyric.vue (+36 -22)
📝 src/components/Setting/LyricsSetting.vue (+8 -8)
📝 web/lyric.html (+1 -1)

📄 Description

概述

重点修复播放页面歌词设置在居中和居右状态下不能自动换行的问题
优化了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"），应用于 。
逐字歌词（word 和 filler）：
- 添加 lang 属性：动态检测中文或英文，应用于  和 。
- 移除 translateY 垂直微调逻辑（包括 translateY(-${Math.min(((playSeek.value - wordData.time) / wordData.duration) * 2, 2)}px) 和默认 translateY(-2px)），简化动画。
翻译（tran）和罗马音（roma）：
- 添加 lang="en" 到  和 。
- 添加换行属性：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）。
- 未添加换行或语言属性相关修改，仅同步字体大小逻辑。

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/imsyy/SPlayer/pull/469 **Author:** [@Pissofdvpe](https://github.com/Pissofdvpe) **Created:** 9/20/2025 **Status:** ✅ Merged **Merged:** 9/23/2025 **Merged by:** [@imsyy](https://github.com/imsyy) **Base:** `dev` ← **Head:** `dev-fix` --- ### 📝 Commits (4) - [`8bd3dc5`](https://github.com/imsyy/SPlayer/commit/8bd3dc56d8cae13475887dca4168bb0fe345ae71) Update MainLyric.vue - [`105fed4`](https://github.com/imsyy/SPlayer/commit/105fed4bd02f376cb3d8a483aec51f1dcc6328e9) Update LyricsSetting.vue - [`6e1e56c`](https://github.com/imsyy/SPlayer/commit/6e1e56c1bd55024119b29c49b54fb5aba2d0cebd) Update lyric.html - [`172ca5a`](https://github.com/imsyy/SPlayer/commit/172ca5a2f3e7863d0d0deb03f9277a22b5ad88e2) Update lyric.html ### 📊 Changes **3 files changed** (+45 additions, -31 deletions) <details> <summary>View changed files</summary> 📝 `src/components/Player/MainLyric.vue` (+36 -22) 📝 `src/components/Setting/LyricsSetting.vue` (+8 -8) 📝 `web/lyric.html` (+1 -1) </details> ### 📄 Description ## 概述 - 重点修复播放页面歌词设置在居中和居右状态下不能自动换行的问题 - 优化了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"`），应用于 ``。 - **逐字歌词（word 和 filler）**： - 添加 `lang` 属性：动态检测中文或英文，应用于 `` 和 ``。 - 移除 `translateY` 垂直微调逻辑（包括 `translateY(-${Math.min(((playSeek.value - wordData.time) / wordData.duration) * 2, 2)}px)` 和默认 `translateY(-2px)`），简化动画。 - **翻译（tran）和罗马音（roma）**： - 添加 `lang="en"` 到 `` 和 ``。 - 添加换行属性：`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）。 - 未添加换行或语言属性相关修改，仅同步字体大小逻辑。 --- 🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.