🎈 perf: 完善部分桌面歌词

components.d.ts

@@ -106,7 +106,6 @@ declare module 'vue' {
     NSlider: typeof import('naive-ui')['NSlider']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
-    NTab: typeof import('naive-ui')['NTab']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']

src/assets/icons/Collapse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M9 15H6q-.425 0-.712-.288T5 14t.288-.712T6 13h4q.425 0 .713.288T11 14v4q0 .425-.288.713T10 19t-.712-.288T9 18zm6-6h3q.425 0 .713.288T19 10t-.288.713T18 11h-4q-.425 0-.712-.288T13 10V6q0-.425.288-.712T14 5t.713.288T15 6z"/></svg>

src/assets/icons/Expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M7 17h3q.425 0 .713.288T11 18t-.288.713T10 19H6q-.425 0-.712-.288T5 18v-4q0-.425.288-.712T6 13t.713.288T7 14zM17 7h-3q-.425 0-.712-.288T13 6t.288-.712T14 5h4q.425 0 .713.288T19 6v4q0 .425-.288.713T18 11t-.712-.288T17 10z"/></svg>

src/components/Player/MainPlayer.vue

@@ -42,7 +42,7 @@
             </template>
           </n-image>
           <!-- 打开播放器 -->
-          <SvgIcon name="Zoom" :size="30" />
+          <SvgIcon name="Expand" :size="30" />
         </div>
       </Transition>
       <!-- 信息 -->

src/views/DesktopLyrics/index.d.ts

@@ -11,6 +11,8 @@ export interface LyricData {
   /** 歌词数据 */
   lrcData: LyricType[];
   yrcData: LyricType[];
+  /** 歌词播放索引 */
+  lyricIndex: number;
 }
 
 /** 桌面歌词配置 */

src/views/DesktopLyrics/index.vue

@@ -1,8 +1,14 @@
 <template>
   <n-config-provider :theme="null">
-    <div ref="desktopLyricsRef" class="desktop-lyrics">
-      {{ lyricData.playName }}
-      {{ lyricConfig }}
+    <div
+      ref="desktopLyricsRef"
+      :class="[
+        'desktop-lyrics',
+        {
+          locked: lyricConfig.isLock,
+        },
+      ]"
+    >
       <div class="header" align="center" justify="space-between">
         <n-flex :wrap="false" align="center" justify="flex-start" size="small">
           <div class="menu-btn" title="返回应用">
@@ -39,6 +45,18 @@
           </div>
         </n-flex>
       </div>
+      <div
+        :style="{
+          fontSize: lyricConfig.fontSize + 'px',
+          fontFamily: lyricConfig.fontFamily,
+          lineHeight: lyricConfig.lineHeight + 'px',
+        }"
+        class="lyrics-container"
+      >
+        <span v-for="(item, index) in displayLyricLines" :key="index" class="lyric-line">
+          {{ item }}
+        </span>
+      </div>
     </div>
   </n-config-provider>
 </template>
@@ -54,6 +72,7 @@ const lyricData = reactive<LyricData>({
   progress: 0,
   lrcData: [],
   yrcData: [],
+  lyricIndex: -1,
 });
 
 // 桌面歌词配置
@@ -73,6 +92,36 @@ const lyricConfig = reactive<LyricConfig>({
 // 桌面歌词元素
 const desktopLyricsRef = useTemplateRef<HTMLElement>("desktopLyricsRef");
 
+// 需要显示的歌词行
+const displayLyricLines = computed<string[]>(() => {
+  // 优先使用逐字歌词，无则使用普通歌词
+  const lyrics = lyricData.yrcData.length ? lyricData.yrcData : lyricData.lrcData;
+  if (!lyrics.length) return ["纯音乐，请欣赏"];
+  // 当前播放歌词索引
+  let idx = lyricData.lyricIndex;
+  if (idx < 0) idx = 0; // 开头之前按首句处理
+  // 当前与下一句
+  const current = lyrics[idx];
+  const next = lyrics[idx + 1];
+  if (!current) return [];
+  // 若当前句有翻译，无论单/双行设置都显示两行：原文 + 翻译
+  if (current.tran && current.tran.trim().length > 0) {
+    return [current.content, current.tran];
+  }
+  // 单行：仅返回当前句原文
+  if (!lyricConfig.isDoubleLine) {
+    return [current.content];
+  }
+  // 双行：两行内容交替
+  const isEven = idx % 2 === 0;
+  if (isEven) {
+    // 偶数句：第一行当前句，第二行下一句
+    return [current.content, next?.content ?? ""];
+  }
+  // 奇数句：第一行下一句，第二行当前句
+  return [next?.content ?? "", current.content];
+});
+
 // 桌面歌词拖动
 const lyricDragMove = (position: Position) => {
   console.log(position);
@@ -112,6 +161,8 @@ onMounted(() => {
       font-size: 1em;
       text-align: left;
       flex: 1 1 auto;
+      line-height: 36px;
+      padding: 0 8px;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;