直接从歌单详情收藏的列表新增同步功能

src/renderer/views/List.vue

@@ -100,6 +100,7 @@ export default {
         isShowItemMenu: false,
         itemMenuControl: {
           rename: true,
+          sync: false,
           moveup: true,
           movedown: true,
           remove: true,
@@ -131,6 +132,7 @@ export default {
       isMove: false,
       isMoveMultiple: false,
       isVisibleMusicSearch: false,
+      fetchingListStatus: {},
     }
   },
   computed: {
@@ -180,6 +182,11 @@ export default {
           action: 'rename',
           disabled: !this.listsData.itemMenuControl.rename,
         },
+        {
+          name: this.$t('view.list.lists_sync'),
+          action: 'sync',
+          disabled: !this.listsData.itemMenuControl.sync,
+        },
         {
           name: this.$t('view.list.lists_moveup'),
           action: 'moveup',
@@ -309,7 +316,18 @@ export default {
   },
   methods: {
     ...mapMutations(['setPrevSelectListId']),
-    ...mapMutations('list', ['listRemove', 'listRemoveMultiple', 'setUserListName', 'createUserList', 'moveupUserList', 'movedownUserList', 'removeUserList', 'setListScroll']),
+    ...mapMutations('list', [
+      'listRemove',
+      'listRemoveMultiple',
+      'setUserListName',
+      'createUserList',
+      'moveupUserList',
+      'movedownUserList',
+      'removeUserList',
+      'setListScroll',
+      'setList',
+    ]),
+    ...mapActions('songList', ['getListDetailAll']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
     ...mapMutations('player', {
       setPlayList: 'setList',
@@ -668,6 +686,8 @@ export default {
       }).catch(_ => _)
     },
     handleListsItemRigthClick(event, index) {
+      const source = this.userList[index].source
+      this.listsData.itemMenuControl.sync = !!source && !!musicSdk[source].songList
       this.listsData.itemMenuControl.moveup = index > 0
       this.listsData.itemMenuControl.movedown = index < this.userList.length - 1
       this.listsData.rightClickItemIndex = index
@@ -714,6 +734,9 @@ export default {
             dom.querySelector('input').focus()
           })
           break
+        case 'sync':
+          this.handleSyncSourceList(index)
+          break
         case 'moveup':
           this.moveupUserList(index)
           break
@@ -814,6 +837,27 @@ export default {
           break
       }
     },
+    fetchList(id, source, sourceListId) {
+      if (this.fetchingListStatus[id] == null) {
+        this.$set(this.fetchingListStatus, id, true)
+      } else {
+        this.fetchingListStatus[id] = true
+      }
+      return this.getListDetailAll({ source, id: sourceListId }).catch(err => {
+        return Promise.reject(err)
+      }).finally(() => {
+        this.fetchingListStatus[id] = false
+      })
+    },
+    async handleSyncSourceList(index) {
+      const targetList = this.userList[index]
+      const list = await this.fetchList(targetList.id, targetList.source, targetList.sourceListId)
+      // console.log(targetList.list.length, list.length)
+      this.setList({
+        ...targetList,
+        list,
+      })
+    },
   },
 }
 </script>

src/renderer/views/SongList.vue

@@ -405,14 +405,22 @@ export default {
     },
     async fetchList() {
       this.detailLoading = true
-      const list = await this.getListDetailAll(this.selectListInfo.id)
-      this.detailLoading = false
-      return list
+      return this.getListDetailAll({ source: this.source, id: this.selectListInfo.id }).catch(err => {
+        return Promise.reject(err)
+      }).finally(() => {
+        this.detailLoading = false
+      })
     },
     async addSongListDetail() {
       if (!this.listDetail.info.name) return
       const list = await this.fetchList()
-      this.createUserList({ name: this.listDetail.info.name, id: `${this.listDetail.source}__${this.listDetail.id}`, list })
+      this.createUserList({
+        name: this.listDetail.info.name,
+        id: `${this.listDetail.source}__${this.listDetail.id}`,
+        list,
+        source: this.listDetail.source,
+        sourceListId: this.listDetail.id,
+      })
     },
     async playSongListDetail() {
       if (!this.listDetail.info.name) return