Merge pull request #469 from Pissofdvpe/dev-fix

fix:修复歌词显示相关

src/components/Player/MainLyric.vue

@@ -60,16 +60,16 @@
                     'end-with-space': text.endsWithSpace,
                   }"
                 >
-                  <span class="word">{{ text.content }}</span>
-                  <span class="filler" :style="getYrcStyle(text, index)">
+                  <span class="word" :lang="/[\u4e00-\u9fa5]/.test(text.content) ? 'zh-CN' : 'en'">{{ text.content }}</span>
+                  <span class="filler" :style="getYrcStyle(text, index)" :lang="/[\u4e00-\u9fa5]/.test(text.content) ? 'zh-CN' : 'en'">
                     {{ text.content }}
                   </span>
                 </div>
               </div>
               <!-- 翻译 -->
-              <span v-if="item.tran && settingStore.showTran" class="tran">{{ item.tran }}</span>
+              <span v-if="item.tran && settingStore.showTran" class="tran" lang="en">{{ item.tran }}</span>
               <!-- 音译 -->
-              <span v-if="item.roma && settingStore.showRoma" class="roma">{{ item.roma }}</span>
+              <span v-if="item.roma && settingStore.showRoma" class="roma" lang="en">{{ item.roma }}</span>
               <!-- 倒计时 -->
               <div
                 v-if="
@@ -113,11 +113,11 @@
               @click="jumpSeek(item.time)"
             >
               <!-- 歌词 -->
-              <span class="content">{{ item.content }}</span>
+              <span class="content" :lang="/[\u4e00-\u9fa5]/.test(item.content) ? 'zh-CN' : 'en'">{{ item.content }}</span>
               <!-- 翻译 -->
-              <span v-if="item.tran && settingStore.showTran" class="tran">{{ item.tran }}</span>
+              <span v-if="item.tran && settingStore.showTran" class="tran" lang="en">{{ item.tran }}</span>
               <!-- 音译 -->
-              <span v-if="item.roma && settingStore.showRoma" class="roma">{{ item.roma }}</span>
+              <span v-if="item.roma && settingStore.showRoma" class="roma" lang="en">{{ item.roma }}</span>
             </div>
             <div class="placeholder" />
           </template>
@@ -217,11 +217,6 @@ const getYrcStyle = (wordData: LyricContentType, lyricIndex: number) => {
         WebkitMaskPositionX: `${
           100 - Math.max(((playSeek.value - wordData.time) / wordData.duration) * 100, 0)
         }%`,
-        // 最大上移2px
-        // transform: `translateY(-${Math.min(
-        //   ((playSeek.value - wordData.time) / wordData.duration) * 2,
-        //   2,
-        // )}px)`,
       };
     }
     // 如果以上条件都不满足
@@ -230,7 +225,6 @@ const getYrcStyle = (wordData: LyricContentType, lyricIndex: number) => {
       transitionDelay: `${wordData.time - playSeek.value}ms, ${
         wordData.time - playSeek.value + wordData.duration * 0.5
       }ms, 0ms`,
-      // transform: "translateY(-2px)",
     };
   } else {
     // 如果当前歌词索引与播放歌曲的歌词索引不匹配，或者播放状态不是加载中且当前单词的时间大于等于播放进度
@@ -299,6 +293,8 @@ onBeforeUnmount(() => {
   :deep(.n-scrollbar-content) {
     padding-left: 10px;
     padding-right: 80px;
+    max-width: 100%; /* 新增：防止宽度溢出 */
+    box-sizing: border-box; /* 新增：确保 padding 不影响宽度 */
   }
   .placeholder {
     width: 100%;
@@ -315,6 +311,7 @@ onBeforeUnmount(() => {
   .lyric-content {
     width: 100%;
     height: 100%;
+    box-sizing: border-box; /* 新增：确保宽度计算正确 */
   }
   .lrc-line {
     position: relative;
@@ -330,16 +327,23 @@ onBeforeUnmount(() => {
       opacity 0.35s,
       transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
     cursor: pointer;
-    // 歌词
+    width: 100%;
+    box-sizing: border-box; /* 新增：确保 padding 不影响宽度 */
     .content {
       display: block;
       font-size: var(--lrc-size);
       font-weight: var(--lrc-bold);
-      word-wrap: break-word;
-      // 逐字歌词
+      width: 100%;
+      overflow-wrap: anywhere; /* 支持超长单词换行 */
+      word-break: break-word; /* 优先空格或连字符换行，超长单词强制换行 */
+      white-space: normal; /* 新增：明确文本换行行为 */
+      hyphens: auto; /* 英文自动连字符 */
       .content-text {
         position: relative;
         display: inline-block;
+        overflow-wrap: anywhere; /* 新增：逐字歌词单词支持换行 */
+        word-break: break-word; /* 新增：单词内换行 */
+        white-space: normal; /* 新增：确保逐字歌词换行 */
         .word {
           opacity: 0.3;
           display: inline-block;
@@ -386,21 +390,28 @@ onBeforeUnmount(() => {
         }
       }
     }
-    // 翻译
     .tran {
       margin-top: 8px;
       opacity: 0.6;
       font-size: var(--lrc-tran-size);
       transition: opacity 0.35s;
+      width: 100%;
+      overflow-wrap: anywhere; /* 支持超长单词换行 */
+      word-break: break-word; /* 优先空格或连字符换行，超长单词强制换行 */
+      white-space: normal; /* 新增：明确文本换行行为 */
+      hyphens: auto; /* 英文自动连字符 */
     }
-    // 音译
     .roma {
       margin-top: 4px;
       opacity: 0.5;
       font-size: var(--lrc-roma-size);
       transition: opacity 0.35s;
+      width: 100%;
+      overflow-wrap: anywhere; /* 支持超长单词换行 */
+      word-break: break-word; /* 优先空格或连字符换行，超长单词强制换行 */
+      white-space: normal; /* 新增：明确文本换行行为 */
+      hyphens: auto; /* 英文自动连字符 */
     }
-    // 倒计时
     .count-down-content {
       height: 50px;
       margin-top: 40px;
@@ -416,6 +427,10 @@ onBeforeUnmount(() => {
       .content {
         display: flex;
         flex-wrap: wrap;
+        width: 100%;
+        overflow-wrap: anywhere; /* 逐字歌词支持超长单词换行 */
+        word-break: break-word; /* 优先空格或连字符换行 */
+        white-space: normal; /* 确保换行行为 */
       }
       .tran,
       .roma {
@@ -425,7 +440,6 @@ onBeforeUnmount(() => {
     &.on {
       opacity: 1;
       transform: scale(1);
-      // 逐字歌词
       .content-text {
         .filler {
           opacity: 1;
@@ -542,7 +556,6 @@ onBeforeUnmount(() => {
     }
     .lrc-line {
       transform-origin: right;
-      align-items: flex-end;
       .content {
         text-align: right;
       }
@@ -562,7 +575,6 @@ onBeforeUnmount(() => {
     }
     .lrc-line {
       transform-origin: center !important;
-      align-items: center !important;
       .content {
         text-align: center !important;
       }
@@ -575,6 +587,8 @@ onBeforeUnmount(() => {
   &.pure {
     :deep(.n-scrollbar-content) {
       padding: 0 80px;
+      max-width: 100%; /* 新增：防止宽度溢出 */
+      box-sizing: border-box; /* 新增：确保 padding 不影响宽度 */
     }
     .lyric-content {
       .placeholder {

src/components/Setting/LyricsSetting.vue

@@ -29,7 +29,7 @@
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">歌词字体大小</n-text>
-          <n-text class="tip" :depth="3">单位 px，最小 30，最大 60</n-text>
+          <n-text class="tip" :depth="3">单位 px，最小 12，最大 60</n-text>
         </div>
         <n-flex>
           <Transition name="fade" mode="out-in">
@@ -45,7 +45,7 @@
           </Transition>
           <n-input-number
             v-model:value="settingStore.lyricFontSize"
-            :min="30"
+            :min="12"
             :max="60"
             class="set"
             placeholder="请输入歌词字体大小"
@@ -58,7 +58,7 @@
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">翻译歌词大小</n-text>
-          <n-text class="tip" :depth="3">单位 px，最小 12，最大 40</n-text>
+          <n-text class="tip" :depth="3">单位 px，最小 5，最大 40</n-text>
         </div>
         <n-flex>
           <Transition name="fade" mode="out-in">
@@ -74,7 +74,7 @@
           </Transition>
           <n-input-number
             v-model:value="settingStore.lyricTranFontSize"
-            :min="12"
+            :min="5"
             :max="40"
             :disabled="settingStore.useAMLyrics"
             class="set"
@@ -90,7 +90,7 @@
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">音译歌词大小</n-text>
-          <n-text class="tip" :depth="3">单位 px，最小 12，最大 40</n-text>
+          <n-text class="tip" :depth="3">单位 px，最小 5，最大 40</n-text>
         </div>
         <n-flex>
           <Transition name="fade" mode="out-in">
@@ -106,7 +106,7 @@
           </Transition>
           <n-input-number
             v-model:value="settingStore.lyricRomaFontSize"
-            :min="12"
+            :min="5"
             :max="40"
             :disabled="settingStore.useAMLyrics"
             class="set"
@@ -285,8 +285,8 @@
           :options="
             Array.from({ length: 41 }, (_, i) => {
               return {
-                label: `${20 + i} px`,
-                value: 20 + i,
+                label: `${10 + i} px`,
+                value: 10 + i,
               };
             })
           "

web/lyric.html

@@ -365,7 +365,7 @@
             }
             case "font-size-reduce": {
               let fontSize = options.fontSize;
-              if (fontSize > 20) {
+              if (fontSize > 10) {
                 fontSize--;
                 this.changeOptions({ ...options, fontSize });
               }