refactor(music): 优化音乐播放逻辑和数据处理

src/stores/data.ts

@@ -160,15 +160,23 @@ export const useDataStore = defineStore({
     },
     // 新增下一首播放歌曲
     async setNextPlaySong(song: SongType, index: number): Promise<number> {
-      // 移除重复的歌曲（如果存在）
-      const playList = this.playList.filter((item) => item.id !== song.id);
+      // 若为空,则直接添加
+      if (this.playList.length === 0) {
+        this.playList = [song];
+        await musicDB.setItem("playList", cloneDeep(this.playList));
+        return 0;
+      }
+
       // 在当前播放位置之后插入歌曲
-      const indexAdd = index + 1;
-      playList.splice(indexAdd, 0, song);
+      const indexAdd = index + 1
+      this.playList.splice(indexAdd, 0, song)
+      // 移除重复的歌曲（如果存在）
+      const playList = this.playList.filter((item,idx) => idx === indexAdd || item.id !== song.id);
       // 更新本地存储
       this.playList = playList;
       await musicDB.setItem("playList", cloneDeep(playList));
-      return indexAdd;
+      // 返回刚刚插入的歌曲索引
+      return playList.findIndex(item => item.id === song.id);
     },
     // 更改播放历史
     async setHistory(song: SongType) {

src/stores/music.ts

@@ -86,7 +86,7 @@ export const useMusicStore = defineStore({
   actions: {
     // 恢复默认音乐数据
     resetMusicData() {
-      this.playSong = defaultMusicData;
+      this.playSong = {...defaultMusicData};
       this.songLyric = {
         lrcData: [],
         yrcData: [],

src/stores/status.ts

@@ -74,7 +74,7 @@ export const useStatusStore = defineStore({
     // 音乐频谱数据
     spectrumsData: [],
     // 当前播放索引
-    playIndex: 0,
+    playIndex: -1,
     // 歌词播放索引
     lyricIndex: -1,
     // 默认倍速

src/utils/player.ts

@@ -588,6 +588,12 @@ class Player {
    */
   async pause(changeStatus: boolean = true) {
     const statusStore = useStatusStore();
+
+    // 播放器未加载完成
+    if (this.player.state() !== "loaded"){
+      return
+    }
+
     // 淡出
     await new Promise<void>((resolve) => {
       this.player.fade(statusStore.playVolume, 0, this.getFadeTime());
@@ -873,23 +879,24 @@ class Player {
     // 尝试添加
     const songIndex = await dataStore.setNextPlaySong(song, statusStore.playIndex);
     // 播放歌曲
-    if (!songIndex) return;
-    if (play) this.togglePlayIndex(songIndex);
+    if (songIndex < 0) return;
+    if (play) this.togglePlayIndex(songIndex,true);
     else window.$message.success("已添加至下一首播放");
   }
   /**
    * 切换播放索引
    * @param index 播放索引
+   * @param play 是否立即播放
    */
-  async togglePlayIndex(index: number) {
+  async togglePlayIndex(index: number,play:boolean = false) {
     const dataStore = useDataStore();
     const statusStore = useStatusStore();
     // 获取数据
     const { playList } = dataStore;
     // 若超出播放列表
     if (index >= playList.length) return;
     // 相同
-    if (statusStore.playIndex === index) {
+    if (!play && statusStore.playIndex === index) {
       this.play();
       return;
     }
@@ -915,6 +922,8 @@ class Player {
       this.cleanPlayList();
       return;
     }
+    // 是否为当前播放歌曲
+    const isCurrentPlay = statusStore.playIndex === index;
     // 深拷贝，防止影响原数据
     const newPlaylist = cloneDeep(playList);
     // 若将移除最后一首
@@ -929,7 +938,7 @@ class Player {
     newPlaylist.splice(index, 1);
     dataStore.setPlayList(newPlaylist);
     // 若为当前播放
-    if (statusStore.playIndex === index) {
+    if (isCurrentPlay) {
       this.initPlayer(statusStore.playStatus);
     }
   }
@@ -949,6 +958,7 @@ class Player {
       showFullPlayer: false,
       playHeartbeatMode: false,
       personalFmMode: false,
+      playIndex: -1,
     });
     musicStore.resetMusicData();
     dataStore.setPlayList([]);