🦄 refactor: 基础适配新格式

Author: imsyy

components.d.ts

@@ -100,9 +100,11 @@ declare module 'vue' {
     NP: typeof import('naive-ui')['NP']
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NPopover: typeof import('naive-ui')['NPopover']
+    NProgress: typeof import('naive-ui')['NProgress']
     NQrCode: typeof import('naive-ui')['NQrCode']
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NResult: typeof import('naive-ui')['NResult']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSkeleton: typeof import('naive-ui')['NSkeleton']

src/components/Player/FullPlayer.vue

@@ -31,7 +31,7 @@
           'player-content',
           {
             pure: statusStore.pureLyricMode && musicStore.isHasLrc,
-            'no-lrc': !musicStore.isHasLrc,
+            'no-lrc': !musicStore.isHasLrc || (!musicStore.isHasLrc && !statusStore.lyricLoading),
           },
         ]"
         @mousemove="playerMove"
@@ -114,7 +114,8 @@ const instantLyrics = computed(() => {
   const content = isYrc
     ? musicStore.songLyric.yrcData[statusStore.lyricIndex]
     : musicStore.songLyric.lrcData[statusStore.lyricIndex];
-  return { content: content?.content, tran: settingStore.showTran && content?.tran };
+  const contentStr = content?.words?.map((v) => v.word).join("") || "";
+  return { content: contentStr, tran: settingStore.showTran && content?.translatedLyric };
 });
 
 // 隐藏播放元素

src/components/Player/MainAMLyric.vue

@@ -72,8 +72,8 @@ const amLyricsData = computed<LyricLine[]>(() => {
   if (!songLyric) return [];
 
   // 优先使用逐字歌词(YRC/TTML)
-  const useYrc = songLyric.yrcAMData?.length && settingStore.showYrc;
-  const lyrics = useYrc ? songLyric.yrcAMData : songLyric.lrcAMData;
+  const useYrc = songLyric.yrcData?.length && settingStore.showYrc;
+  const lyrics = useYrc ? songLyric.yrcData : songLyric.lrcData;
 
   // 简单检查歌词有效性
   if (!Array.isArray(lyrics) || lyrics.length === 0) return [];

src/components/Player/MainLyric.vue

@@ -21,7 +21,7 @@
   >
     <Transition name="fade" mode="out-in">
       <div
-        :key="musicStore.songLyric.lrcData?.[0]?.content"
+        :key="musicStore.songLyric.lrcData?.[0]?.words?.[0]?.word"
         class="lyric-content"
         @after-enter="lyricsScroll(statusStore.lyricIndex)"
         @after-leave="lyricsScroll(statusStore.lyricIndex)"
@@ -34,7 +34,7 @@
               <!-- 倒计时 -->
               <CountDown
                 :start="0"
-                :duration="musicStore.songLyric.yrcData[0].time || 0"
+                :duration="(musicStore.songLyric.yrcData[0].startTime || 0) / 1000"
                 :seek="playSeek"
                 :playing="statusStore.playStatus"
               />
@@ -50,68 +50,73 @@
                   // on: statusStore.lyricIndex === index,
                   // 当播放时间大于等于当前歌词的开始时间
                   on:
-                    (playSeek >= item.time && playSeek < item.endTime) ||
+                    (playSeek >= item.startTime / 1000 && playSeek < item.endTime / 1000) ||
                     statusStore.lyricIndex === index,
                   'is-bg': item.isBG,
                   'is-duet': item.isDuet,
                 },
               ]"
               :style="{
                 filter: settingStore.lyricsBlur
-                  ? (playSeek >= item.time && playSeek < item.endTime) ||
+                  ? (playSeek >= item.startTime / 1000 && playSeek < item.endTime / 1000) ||
                     statusStore.lyricIndex === index
                     ? 'blur(0)'
                     : `blur(${Math.min(Math.abs(statusStore.lyricIndex - index) * 1.8, 10)}px)`
                   : 'blur(0)',
               }"
-              @click="jumpSeek(item.time)"
+              @click="jumpSeek(item.startTime)"
             >
               <!-- 歌词 -->
               <div class="content">
                 <div
-                  v-for="(text, textIndex) in item.contents"
+                  v-for="(text, textIndex) in item.words"
                   :key="textIndex"
                   :class="{
                     'content-text': true,
                     'content-long':
                       settingStore.showYrcLongEffect &&
-                      text.duration >= 1.5 &&
-                      playSeek <= text.endTime,
-                    'end-with-space': text.endsWithSpace,
+                      (text.endTime - item.startTime) / 1000 >= 1.5 &&
+                      playSeek <= text.endTime / 1000,
+                    'end-with-space': text.word.endsWith(' ') || text.startTime === 0,
                   }"
                 >
-                  <span class="word" :lang="getLyricLanguage(text.content)">
-                    {{ text.content }}
+                  <span class="word" :lang="getLyricLanguage(text.word)">
+                    {{ text.word }}
                   </span>
                   <span
                     class="filler"
                     :style="getYrcStyle(text, index)"
-                    :lang="getLyricLanguage(text.content)"
+                    :lang="getLyricLanguage(text.word)"
                   >
-                    {{ text.content }}
+                    {{ text.word }}
                   </span>
                 </div>
               </div>
               <!-- 翻译 -->
-              <span v-if="item.tran && settingStore.showTran" class="tran" lang="en">
-                {{ item.tran }}
+              <span v-if="item.translatedLyric && settingStore.showTran" class="tran" lang="en">
+                {{ item.translatedLyric }}
               </span>
               <!-- 音译 -->
-              <span v-if="item.roma && settingStore.showRoma" class="roma" lang="en">
-                {{ item.roma }}
+              <span v-if="item.romanLyric && settingStore.showRoma" class="roma" lang="en">
+                {{ item.romanLyric }}
               </span>
               <!-- 间奏倒计时 -->
               <div
                 v-if="
                   settingStore.countDownShow &&
-                  item.time > 0 &&
-                  musicStore.songLyric.yrcData[index + 1]?.time - item.endTime >= 10
+                  item.startTime > 0 &&
+                  ((musicStore.songLyric.yrcData[index + 1]?.startTime || 0) - item.endTime) /
+                    1000 >=
+                    10
                 "
                 class="count-down-content"
               >
                 <CountDown
-                  :start="item.endTime"
-                  :duration="musicStore.songLyric.yrcData[index + 1]?.time - item.endTime || 0"
+                  :start="item.endTime / 1000"
+                  :duration="
+                    ((musicStore.songLyric.yrcData[index + 1]?.startTime || 0) - item.endTime) /
+                    1000
+                  "
                   :seek="playSeek"
                   :playing="statusStore.playStatus"
                 />
@@ -125,7 +130,7 @@
               <!-- 倒计时 -->
               <CountDown
                 :start="0"
-                :duration="musicStore.songLyric.lrcData[0].time || 0"
+                :duration="(musicStore.songLyric.lrcData[0].startTime || 0) / 1000"
                 :seek="playSeek"
                 :playing="statusStore.playStatus"
               />
@@ -140,17 +145,19 @@
                   ? `blur(${Math.min(Math.abs(statusStore.lyricIndex - index) * 1.8, 10)}px)`
                   : 'blur(0)',
               }"
-              @click="jumpSeek(item.time)"
+              @click="jumpSeek(item.startTime)"
             >
               <!-- 歌词 -->
-              <span class="content" :lang="getLyricLanguage(item.content)">{{ item.content }}</span>
+              <span class="content" :lang="getLyricLanguage(item.words?.[0]?.word)">
+                {{ item.words?.[0]?.word }}
+              </span>
               <!-- 翻译 -->
-              <span v-if="item.tran && settingStore.showTran" class="tran" lang="en">
-                {{ item.tran }}
+              <span v-if="item.translatedLyric && settingStore.showTran" class="tran" lang="en">
+                {{ item.translatedLyric }}
               </span>
               <!-- 音译 -->
-              <span v-if="item.roma && settingStore.showRoma" class="roma" lang="en">
-                {{ item.roma }}
+              <span v-if="item.romanLyric && settingStore.showRoma" class="roma" lang="en">
+                {{ item.romanLyric }}
               </span>
             </div>
             <div class="placeholder" />
@@ -164,7 +171,8 @@
 </template>
 
 <script setup lang="ts">
-import type { LyricContentType } from "@/types/main";
+// import type { LyricContentType } from "@/types/main";
+import { LyricWord } from "@applemusic-like-lyrics/lyric";
 import { NScrollbar } from "naive-ui";
 import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import player from "@/utils/player";
@@ -222,22 +230,22 @@ const INACTIVE_NO_ANIMATION_STYLE = { opacity: 0 } as const;
  * @param lyricIndex 歌词索引
  * @returns 逐字歌词动画样式
  */
-const getYrcStyle = (wordData: LyricContentType, lyricIndex: number) => {
+const getYrcStyle = (wordData: LyricWord, lyricIndex: number) => {
   // 获取当前歌词行数据
   const currentLine = musicStore.songLyric.yrcData[lyricIndex];
   // 缓存 playSeek 值，避免多次访问响应式变量
   const currentSeek = playSeek.value;
 
   // 判断当前行是否处于激活状态
   const isLineActive =
-    (currentSeek >= currentLine.time && currentSeek < currentLine.endTime) ||
+    (currentSeek >= currentLine.startTime / 1000 && currentSeek < currentLine.endTime / 1000) ||
     statusStore.lyricIndex === lyricIndex;
 
   // 如果当前歌词行不是激活状态，返回固定样式，避免不必要的计算
   if (!isLineActive) {
     if (settingStore.showYrcAnimation) {
       // 判断单词是否已经唱过：已唱过保持填充状态(0%)，未唱到保持未填充状态(100%)
-      const hasPlayed = currentSeek >= wordData.time + wordData.duration;
+      const hasPlayed = currentSeek >= wordData.endTime / 1000;
       return {
         WebkitMaskPositionX: hasPlayed ? "0%" : "100%",
       };
@@ -249,24 +257,30 @@ const getYrcStyle = (wordData: LyricContentType, lyricIndex: number) => {
   // 激活状态的样式计算
   if (settingStore.showYrcAnimation) {
     // 如果播放状态不是加载中，且当前单词的时间加上持续时间减去播放进度大于 0
-    if (statusStore.playLoading === false && wordData.time + wordData.duration - currentSeek > 0) {
+    if (statusStore.playLoading === false && wordData.endTime / 1000 - currentSeek > 0) {
       return {
         transitionDuration: `0s, 0s, 0.35s`,
         transitionDelay: `0ms`,
         WebkitMaskPositionX: `${
-          100 - Math.max(((currentSeek - wordData.time) / wordData.duration) * 100, 0)
+          100 -
+          Math.max(
+            ((currentSeek - wordData.startTime / 1000) /
+              ((wordData.endTime - wordData.startTime) / 1000)) *
+              100,
+            0,
+          )
         }%`,
       };
     }
     // 预计算时间差，避免重复计算
-    const timeDiff = wordData.time - currentSeek;
+    const timeDiff = wordData.startTime - currentSeek * 1000;
     return {
-      transitionDuration: `${wordData.duration}ms, ${wordData.duration * 0.8}ms, 0.35s`,
-      transitionDelay: `${timeDiff}ms, ${timeDiff + wordData.duration * 0.5}ms, 0ms`,
+      transitionDuration: `${wordData.endTime - wordData.startTime}ms, ${(wordData.endTime - wordData.startTime) * 0.8}ms, 0.35s`,
+      transitionDelay: `${timeDiff}ms, ${timeDiff + (wordData.endTime - wordData.startTime) * 0.5}ms, 0ms`,
     };
   } else {
     // 无动画模式：根据单词时间判断透明度
-    return statusStore.playLoading === false && wordData.time >= currentSeek
+    return statusStore.playLoading === false && wordData.startTime / 1000 >= currentSeek
       ? { opacity: 0 }
       : { opacity: 1 };
   }
@@ -277,7 +291,7 @@ const jumpSeek = (time: number) => {
   if (!time) return;
   lrcMouseStatus.value = false;
   const offsetSeconds = statusStore.getSongOffset(musicStore.playSong?.id);
-  player.setSeek(time - offsetSeconds);
+  player.setSeek(time / 1000 - offsetSeconds);
   player.play();
 };
 
@@ -411,7 +425,7 @@ onBeforeUnmount(() => {
             opacity 0.3s,
             filter 0.3s,
             margin 0.3s,
-            padding 0.3s !important;
+            padding 0.3s;
         }
         &.end-with-space {
           margin-right: 12px;

src/components/Player/MainPlayer.vue

@@ -275,9 +275,10 @@ const instantLyrics = computed(() => {
   const content = isYrc
     ? musicStore.songLyric.yrcData[statusStore.lyricIndex]
     : musicStore.songLyric.lrcData[statusStore.lyricIndex];
-  return content?.tran && settingStore.showTran
-    ? `${content?.content}（ ${content?.tran} ）`
-    : content?.content;
+  const contentStr = content?.words?.map((v) => v.word).join("") || "";
+  return content?.translatedLyric && settingStore.showTran
+    ? `${contentStr}（ ${content?.translatedLyric} ）`
+    : contentStr || "";
 });
 </script>
 

src/stores/music.ts

@@ -1,18 +1,13 @@
 import { defineStore } from "pinia";
-import type { LyricLine } from "@applemusic-like-lyrics/core";
-import type { SongType, LyricType } from "@/types/main";
+import type { SongType } from "@/types/main";
 import { isElectron } from "@/utils/env";
 import { cloneDeep } from "lodash-es";
+import { SongLyric } from "@/types/lyric";
 
 interface MusicState {
   playSong: SongType;
   playPlaylistId: number;
-  songLyric: {
-    lrcData: LyricType[];
-    yrcData: LyricType[];
-    lrcAMData: LyricLine[];
-    yrcAMData: LyricLine[];
-  };
+  songLyric: SongLyric;
   personalFM: {
     playIndex: number;
     list: SongType[];
@@ -46,8 +41,6 @@ export const useMusicStore = defineStore("music", {
     songLyric: {
       lrcData: [], // 普通歌词
       yrcData: [], // 逐字歌词
-      lrcAMData: [], // 普通歌词-AM
-      yrcAMData: [], // 逐字歌词-AM
     },
     // 私人FM数据
     personalFM: {
@@ -88,32 +81,23 @@ export const useMusicStore = defineStore("music", {
     // 恢复默认音乐数据
     resetMusicData() {
       this.playSong = { ...defaultMusicData };
-      this.songLyric = {
-        lrcData: [],
-        yrcData: [],
-        lrcAMData: [],
-        yrcAMData: [],
-      };
+      this.songLyric = { lrcData: [], yrcData: [] };
     },
     /**
      * 设置/更新歌曲歌词数据
      * @param updates 部分或完整歌词数据
      * @param replace 是否覆盖（true：用提供的数据覆盖并为缺省字段置空；false：合并更新）
      */
-    setSongLyric(updates: Partial<MusicState["songLyric"]>, replace: boolean = false) {
+    setSongLyric(updates: Partial<SongLyric>, replace: boolean = false) {
       if (replace) {
         this.songLyric = {
           lrcData: updates.lrcData ?? [],
           yrcData: updates.yrcData ?? [],
-          lrcAMData: updates.lrcAMData ?? [],
-          yrcAMData: updates.yrcAMData ?? [],
         };
       } else {
         this.songLyric = {
           lrcData: updates.lrcData ?? this.songLyric.lrcData,
           yrcData: updates.yrcData ?? this.songLyric.yrcData,
-          lrcAMData: updates.lrcAMData ?? this.songLyric.lrcAMData,
-          yrcAMData: updates.yrcAMData ?? this.songLyric.yrcAMData,
         };
       }
       // 更新歌词窗口数据

src/types/desktop-lyric.d.ts

@@ -1,4 +1,4 @@
-import { LyricType } from "@/types/main";
+import { type LyricLine } from "@applemusic-like-lyrics/lyric";
 
 /** 桌面歌词数据 */
 export interface LyricData {
@@ -13,8 +13,8 @@ export interface LyricData {
   /** 当前歌曲的时间偏移（秒，正负均可） */
   songOffset?: number;
   /** 歌词数据 */
-  lrcData?: LyricType[];
-  yrcData?: LyricType[];
+  lrcData?: LyricLine[];
+  yrcData?: LyricLine[];
   /** 歌词播放索引 */
   lyricIndex?: number;
 }
@@ -52,7 +52,7 @@ export interface LyricConfig {
  */
 export interface RenderLine {
   /** 当前整行歌词数据（用于逐字渲染） */
-  line: LyricType;
+  line: LyricLine;
   /** 当前行在歌词数组中的索引 */
   index: number;
   /** 唯一键 */