优化歌单、排行榜一键播放按钮的播放机制

src/renderer/views/Leaderboard.vue

@@ -36,6 +36,7 @@
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
 import { nextTick } from '@renderer/utils/vueTools'
+import { tempList } from '@renderer/core/share/list'
 export default {
   name: 'Leaderboard',
   data() {
@@ -134,7 +135,7 @@ export default {
     ...mapMutations(['setLeaderboard']),
     ...mapActions('leaderboard', ['getBoardsList', 'getList', 'getListAll']),
     ...mapMutations('list', ['createUserList']),
-    ...mapMutations('player', ['setTempList']),
+    ...mapMutations('player', ['setTempList', 'updateTempList']),
     handleGetList(page) {
       const loadId = `${this.source}${this.tabId}${page}`
       this.loadError = false
@@ -187,27 +188,65 @@ export default {
 
       if (action) {
         const board = this.boardList[index]
-        const list = await this.getListAll(board.id)
-        if (!list.length) return
+        const id = `board__${this.source}__${board.id}`
         switch (action && action.action) {
           case 'play':
-            this.setTempList({
-              list,
-              index: 0,
+            this.playSongListDetail({
+              boardId: board.id,
+              list: [...this.list],
+              id,
             })
             break
           case 'collect':
-            this.createUserList({
-              name: board.name,
-              id: `board__${this.source}__${board.id}`,
-              list,
+            this.addSongListDetail({
+              boardId: board.id,
+              boardName: board.name,
               source: this.source,
-              sourceListId: `board__${board.id}`,
+              id,
             })
             break
         }
       }
     },
+    async addSongListDetail({ boardId, boardName, source, id }) {
+      // console.log(this.listDetail.info)
+      // if (!this.listDetail.info.name) return
+      const list = await this.getListAll(boardId)
+      this.createUserList({
+        name: boardName,
+        id,
+        list,
+        source,
+        sourceListId: `board__${boardId}`,
+      })
+    },
+    async playSongListDetail({ boardId, id, list }) {
+      let isPlayingList = false
+      if (list?.length) {
+        this.setTempList({
+          list,
+          index: 0,
+          id,
+        })
+        isPlayingList = true
+      }
+      const fullList = await this.getListAll(boardId)
+      if (!fullList.length) return
+      if (isPlayingList) {
+        if (tempList.meta.id == id) {
+          this.updateTempList({
+            list: fullList,
+            id,
+          })
+        }
+      } else {
+        this.setTempList({
+          list: fullList,
+          index: 0,
+          id,
+        })
+      }
+    },
   },
 }
 </script>

src/renderer/views/songList/SongList.vue

@@ -58,6 +58,7 @@ div(:class="$style.container")
 import { mapGetters, mapMutations, mapActions } from 'vuex'
 import { scrollTo } from '@renderer/utils'
 import TagList from './components/TagList'
+import { tempList } from '@renderer/core/share/list'
 export default {
   name: 'SongList',
   components: {
@@ -181,6 +182,7 @@ export default {
     ...mapMutations('list', ['listAdd', 'listAddMultiple', 'createUserList']),
     ...mapMutations('player', {
       setTempList: 'setTempList',
+      updateTempList: 'updateTempList',
       setTempPlayList: 'setTempPlayList',
     }),
     listenEvent() {
@@ -295,12 +297,32 @@ export default {
     },
     async playSongListDetail() {
       if (!this.listDetail.info.name) return
+      const id = `${this.listDetail.source}__${this.listDetail.id}`
+      let isPlayingList = false
+      if (this.listDetail.list?.length) {
+        this.setTempList({
+          list: [...this.listDetail.list],
+          index: 0,
+          id,
+        })
+        isPlayingList = true
+      }
       const list = await this.fetchList()
       if (!list.length) return
-      this.setTempList({
-        list,
-        index: 0,
-      })
+      if (isPlayingList) {
+        if (tempList.meta.id == id) {
+          this.updateTempList({
+            list,
+            id,
+          })
+        }
+      } else {
+        this.setTempList({
+          list,
+          index: 0,
+          id,
+        })
+      }
     },
   },
 }