✨ feat: 优化 AMLL 歌词高亮效果。

Author: ITManCHINA

src/components/Player/MainAMLyric.vue

@@ -4,7 +4,7 @@
       :key="amLyricsData?.[0]?.words?.length"
       :class="['lyric-am', { pure: statusStore.pureLyricMode }]"
       :style="{
-        '--amll-lp-color': 'rgb(var(--main-cover-color, 239 239 239))',
+        '--amll-lp-color': 'rgb(239 239 239)',
       }"
     >
       <div v-if="statusStore.lyricLoading" class="lyric-loading">歌词正在加载中...</div>
@@ -142,6 +142,9 @@ onBeforeUnmount(() => {
     hsla(0, 0%, 100%, 0)
   );
 
+  /* 限定混合模式只作用于歌词区域，避免影响页面其它元素。 */
+  isolation: isolate;
+
   :deep(.am-lyric) {
     width: 100%;
     height: 100%;
@@ -164,6 +167,44 @@ onBeforeUnmount(() => {
       }
     }
   }
+
+  /* 对常见的“当前高亮行”类名应用加法混合模式，使其高亮更亮 */
+  :deep(.am-lyric .current),
+  :deep(.am-lyric .is-current),
+  :deep(.am-lyric .active),
+  :deep(.am-lyric .is-active),
+  :deep(.am-lyric .lyric-line.current),
+  :deep(.am-lyric .lyric-line.is-current) {
+    /* 使用加法混合，叠加会更亮 */
+    mix-blend-mode: plus-lighter;
+    /* 更亮的文字颜色（半透明白），便于加法叠加效果 */
+    color: rgba(255, 255, 255, 0.95);
+    /* 轻微发光，配合混合模式效果更自然 */
+    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.06);
+    /* 告诉浏览器该元素可能会变化，优化渲染 */
+    will-change: transform, opacity, color;
+  }
+
+  /* 只对主歌词文本（非翻译/音译）启用混合，匹配带有 lang 属性的主元素 */
+  :deep(.am-lyric [lang]) {
+    /* 默认保持正常，但在高亮时会被上面的规则覆盖 */
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* 若浏览器不支持 plus-lighter，使用 supports 提供降级样式 */
+  @supports not (mix-blend-mode: plus-lighter) {
+    :deep(.am-lyric .current),
+    :deep(.am-lyric .is-current),
+    :deep(.am-lyric .active),
+    :deep(.am-lyric .is-active),
+    :deep(.am-lyric .lyric-line.current),
+    :deep(.am-lyric .lyric-line.is-current) {
+      /* 降级为更明显的颜色与阴影（非混合） */
+      color: #ffffff;
+      text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+    }
+  }
+
   :lang(ja) {
     font-family: var(--ja-font-family);
   }