重构列表功能，使其支持多列表，新增我喜欢列表

publish/changeLog.md

@@ -1,12 +0,0 @@
-祝贺祖国成立70周年~！
-
-#### 新增
-
-- 新增QQ音乐源歌单
-
-#### 修复
-
-- 修正火影皮肤名字
-- 修复当试听列表为空时，无法切到其他界面的Bug
-- 修复百度源搜索结果为空时的接口处理Bug
-- 恢复**酷狗**其他音质播放

src/renderer/App.vue

@@ -49,7 +49,7 @@ export default {
   },
   computed: {
     ...mapGetters(['electronStore', 'setting', 'theme', 'version']),
-    ...mapGetters('list', ['defaultList']),
+    ...mapGetters('list', ['defaultList', 'loveList']),
     ...mapGetters('download', {
       downloadList: 'list',
       downloadStatus: 'downloadStatus',
@@ -73,6 +73,13 @@ export default {
       },
       deep: true,
     },
+    loveList: {
+      handler(n) {
+        // console.log(n)
+        this.electronStore.set('list.loveList', n)
+      },
+      deep: true,
+    },
     downloadList: {
       handler(n) {
         this.electronStore.set('download.list', n)
@@ -90,7 +97,7 @@ export default {
   methods: {
     ...mapActions(['getVersionInfo']),
     ...mapMutations(['setNewVersion', 'setVersionModalVisible']),
-    ...mapMutations('list', ['initDefaultList']),
+    ...mapMutations('list', ['initList']),
     ...mapMutations('download', ['updateDownloadList']),
     ...mapMutations(['setSetting']),
     init() {
@@ -156,13 +163,9 @@ export default {
     },
     initPlayList() {
       let defaultList = this.electronStore.get('list.defaultList')
+      let loveList = this.electronStore.get('list.loveList')
       // console.log(defaultList)
-      if (defaultList) {
+      if (defaultList) this.initList({ defaultList, loveList })
-        // defaultList.list.forEach(m => {
-        //   m.typeUrl = {}
-        // })
-        this.initDefaultList(defaultList)
-      }
     },
     initDownloadList() {
       let downloadList = this.electronStore.get('download.list')

src/renderer/components/core/Aside.vue

@@ -16,8 +16,9 @@ div(:class="$style.aside")
     dl
       dt 我的音乐
       dd
-        router-link(:active-class="$style.active" to="list") {{defaultList.name}}
+        router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{defaultList.name}}
-        router-link(:active-class="$style.active" v-for="item in userList" :to="`list?id=${item._id}`" :key="item._id") {{item.name}}
+        router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`") {{loveList.name}}
+        router-link(:active-class="$route.query.id === item.id ? $style.active : ''" v-for="item in userList" :to="`list?id=${item._id}`" :key="item._id") {{item.name}}
     dl
       dt 其他
       dd
@@ -43,7 +44,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('list', ['defaultList', 'userList']),
+    ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
   },
   methods: {},
 }

src/renderer/components/core/Player.vue

@@ -210,7 +210,7 @@ export default {
           this.audio.currentTime = this.audioErrorTime
           this.audioErrorTime = 0
         }
-        if (!this.targetSong.interval && this.listId != 'download') this.updateMusicInfo({ index: this.playIndex, data: { interval: formatPlayTime2(this.maxPlayTime) } })
+        if (!this.targetSong.interval && this.listId != 'download') this.updateMusicInfo({ id: 'default', index: this.playIndex, data: { interval: formatPlayTime2(this.maxPlayTime) } })
         this.status = '音乐加载中...'
       })
       this.audio.addEventListener('loadstart', () => {

src/renderer/store/modules/list.js

@@ -1,15 +1,22 @@
 // state
 const state = {
   defaultList: {
+    id: 'default',
     name: '试听列表',
     list: [],
   },
+  loveList: {
+    id: 'love',
+    name: '我喜欢',
+    list: [],
+  },
   userList: [],
 }
 
 // getters
 const getters = {
   defaultList: state => state.defaultList || {},
+  loveList: state => state.loveList || {},
   userList: state => state.userList,
 }
 
@@ -18,39 +25,72 @@ const actions = {
 
 }
 
+const getList = (state, id) => {
+  let targetList
+  switch (id) {
+    case 'default':
+      targetList = state.defaultList
+      break
+    case 'love':
+      targetList = state.loveList
+      break
+    default:
+      targetList = state.userList.find(l => l.id === id)
+      break
+  }
+  return targetList
+}
+
 // mitations
 const mutations = {
-  initDefaultList(state, data) {
+  initList(state, { defaultList, loveList }) {
-    state.defaultList = data
+    if (defaultList !== undefined) state.defaultList = defaultList
+    if (loveList !== undefined) state.loveList = loveList
   },
-  setDefaultList(state, list) {
+  setList(state, { id, list }) {
-    state.defaultList.list = list
+    const targetList = getList(state, id)
+    if (!targetList) return
+    targetList.list = list
   },
-  defaultListAdd(state, musicInfo) {
+  listAdd(state, { id, musicInfo }) {
-    if (state.defaultList.list.some(s => s.songmid === musicInfo.songmid)) return
+    const targetList = getList(state, id)
-    state.defaultList.list.push(musicInfo)
+    if (!targetList) return
+    if (targetList.list.some(s => s.songmid === musicInfo.songmid)) return
+    targetList.list.push(musicInfo)
   },
-  defaultListAddMultiple(state, list) {
+  listAddMultiple(state, { id, list }) {
+    let targetList = getList(state, id)
+    if (!targetList) return
+    targetList = targetList.list
     list.forEach(musicInfo => {
-      if (state.defaultList.list.some(s => s.songmid === musicInfo.songmid)) return
+      if (targetList.some(s => s.songmid === musicInfo.songmid)) return
-      state.defaultList.list.push(musicInfo)
+      targetList.push(musicInfo)
     })
   },
-  defaultListRemove(state, index) {
+  listRemove(state, { id, index }) {
-    state.defaultList.list.splice(index, 1)
+    let targetList = getList(state, id)
+    if (!targetList) return
+    targetList.list.splice(index, 1)
   },
-  updateMusicInfo(state, { index, data }) {
+  listRemoveMultiple(state, { id, list }) {
-    Object.assign(state.defaultList.list[index], data)
+    let targetList = getList(state, id)
-  },
+    if (!targetList) return
-  defaultListRemoveMultiple(state, list) {
+    targetList = targetList.list
     list.forEach(musicInfo => {
-      let index = state.defaultList.list.indexOf(musicInfo)
+      let index = targetList.indexOf(musicInfo)
       if (index < 0) return
-      state.defaultList.list.splice(index, 1)
+      targetList.splice(index, 1)
     })
   },
-  defaultListClear(state) {
+  listClear(state, id) {
-    state.defaultList.list.length = 0
+    let targetList = getList(state, id)
+    if (!targetList) return
+    targetList.list.length = 0
+  },
+  updateMusicInfo(state, { id, index, data }) {
+    let targetList = getList(state, id)
+    if (!targetList) return
+    Object.assign(targetList.list[index], data)
   },
 }
 

src/renderer/views/Leaderboard.vue

@@ -56,7 +56,7 @@ export default {
     ...mapMutations(['setLeaderboard']),
     ...mapActions('leaderboard', ['getList']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
-    ...mapMutations('list', ['defaultListAdd', 'defaultListAddMultiple']),
+    ...mapMutations('list', ['listAdd', 'listAddMultiple']),
     ...mapMutations('player', ['setList']),
     handleListBtnClick(info) {
       switch (info.action) {
@@ -80,11 +80,11 @@ export default {
       let targetSong
       if (index == null) {
         targetSong = this.selectdData[0]
-        this.defaultListAddMultiple(this.selectdData)
+        this.listAddMultiple({ id: 'default', list: this.selectdData })
         this.resetSelect()
       } else {
         targetSong = this.list[index]
-        this.defaultListAdd(targetSong)
+        this.listAdd({ id: 'default', musicInfo: targetSong })
       }
       let targetIndex = this.defaultList.list.findIndex(
         s => s.songmid === targetSong.songmid
@@ -134,7 +134,7 @@ export default {
           this.testPlay()
           break
         case 'add':
-          this.defaultListAddMultiple(this.selectdData)
+          this.listAddMultiple({ id: 'default', list: this.selectdData })
           this.resetSelect()
           break
       }

src/renderer/views/List.vue

@@ -50,6 +50,7 @@ export default {
   name: 'List',
   data() {
     return {
+      listId: null,
       clickTime: window.performance.now(),
       clickIndex: -1,
       isShowDownload: false,
@@ -65,12 +66,15 @@ export default {
   },
   computed: {
     ...mapGetters(['userInfo', 'setting']),
-    ...mapGetters('list', ['defaultList', 'userList']),
+    ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
-    ...mapGetters('player', ['listId', 'playIndex']),
+    ...mapGetters('player', {
+      playerListId: 'listId',
+      playIndex: 'playIndex',
+    }),
     isPlayList() {
-      return this.listId != 'download' && (
+      return this.playerListId != 'download' && (
-        ((!this.$route.query.id || this.$route.query.id == 'test') && this.listId == 'test') ||
+        ((!this.$route.query.id || this.$route.query.id == 'test') && this.playerListId == 'test') ||
-        this.$route.query.id == this.listId
+        this.$route.query.id == this.playerListId
       )
     },
     list() {
@@ -81,6 +85,22 @@ export default {
     isAPITemp() {
       return this.setting.apiSource == 'temp'
     },
+    listData() {
+      if (this.listId == null) return this.defaultList
+      let targetList
+      switch (this.listId) {
+        case 'default':
+          targetList = this.defaultList
+          break
+        case 'love':
+          targetList = this.loveList
+          break
+        default:
+          targetList = this.userList.find(l => l.id === this.listId)
+          break
+      }
+      return targetList
+    },
   },
   watch: {
     selectdData(n) {
@@ -98,17 +118,11 @@ export default {
       this.resetSelect()
     },
   },
-  // beforeRouteUpdate(to, from, next) {
+  beforeRouteUpdate(to, from, next) {
-  //   // if (to.query.id === undefined) return
+    if (to.query.id === undefined) return
-  //   // if (to.query.text === '') {
+    this.listId = to.query.id
-  //   //   this.clearList()
+    next()
-  //   // } else {
+  },
-  //   //   this.text = to.query.text
-  //   //   this.page = 1
-  //   //   this.handleSearch(this.text, this.page)
-  //   // }
-  //   next()
-  // },
   // mounted() {
   // console.log('mounted')
   // if (this.$route.query.text === undefined) {
@@ -137,22 +151,25 @@ export default {
     }, 1000)
   },
   mounted() {
-    if (this.list.length > 150) {
+    this.handleDelayShow()
-      setTimeout(() => {
-        this.delayShow = true
-        if (this.setting.list.scroll.enable && this.setting.list.scroll.location) {
-          this.$nextTick(() => this.$refs.dom_scrollContent.scrollTo(0, this.setting.list.scroll.location))
-        }
-      }, 200)
-    } else {
-      this.delayShow = true
-    }
   },
   methods: {
     ...mapMutations(['setListScroll']),
-    ...mapMutations('list', ['defaultListRemove', 'defaultListRemoveMultiple']),
+    ...mapMutations('list', ['listRemove', 'listRemoveMultiple']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
     ...mapMutations('player', ['setList']),
+    handleDelayShow() {
+      if (this.list.length > 150) {
+        setTimeout(() => {
+          this.delayShow = true
+          if (this.setting.list.scroll.enable && this.setting.list.scroll.location) {
+            this.$nextTick(() => this.$refs.dom_scrollContent.scrollTo(0, this.setting.list.scroll.location))
+          }
+        }, 200)
+      } else {
+        this.delayShow = true
+      }
+    },
     handleDoubleClick(index) {
       if (
         window.performance.now() - this.clickTime > 400 ||
@@ -171,7 +188,7 @@ export default {
       this.setList({ list: this.list, listId: 'test', index })
     },
     handleRemove(index) {
-      this.defaultListRemove(index)
+      this.listRemove({ id: 'default', index })
     },
     handleListBtnClick(info) {
       switch (info.action) {
@@ -215,7 +232,7 @@ export default {
           this.isShowDownloadMultiple = true
           break
         case 'remove':
-          this.defaultListRemoveMultiple(this.selectdData)
+          this.listRemoveMultiple({ id: 'default', list: this.selectdData })
           this.resetSelect()
           break
       }

src/renderer/views/Search.vue

@@ -128,7 +128,7 @@ export default {
     ...mapActions('search', ['search']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
     ...mapMutations('search', ['clearList', 'setPage']),
-    ...mapMutations('list', ['defaultListAdd', 'defaultListAddMultiple']),
+    ...mapMutations('list', ['listAdd', 'listAddMultiple']),
     ...mapMutations('player', ['setList']),
     handleSearch(text, page) {
       if (text === '') return this.clearList()
@@ -172,11 +172,11 @@ export default {
       let targetSong
       if (index == null) {
         targetSong = this.selectdData[0]
-        this.defaultListAddMultiple(this.filterList(this.selectdData))
+        this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
       } else {
         if ((this.isAPITemp && this.listInfo.list[index].source != 'kw') || this.listInfo.list[index].source == 'tx' || this.listInfo.list[index].source == 'wy') return
         targetSong = this.listInfo.list[index]
-        this.defaultListAdd(targetSong)
+        this.listAdd({ id: 'default', musicInfo: targetSong })
       }
       let targetIndex = this.defaultList.list.findIndex(
         s => s.songmid === targetSong.songmid
@@ -218,7 +218,7 @@ export default {
           this.resetSelect()
           break
         case 'add':
-          this.defaultListAddMultiple(this.filterList(this.selectdData))
+          this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
           this.resetSelect()
           break
       }

src/renderer/views/Setting.vue

@@ -286,7 +286,7 @@ export default {
   },
   methods: {
     ...mapMutations(['setSetting', 'setVersionModalVisible']),
-    ...mapMutations('list', ['setDefaultList']),
+    ...mapMutations('list', ['setList']),
     init() {
       this.current_setting = JSON.parse(JSON.stringify(this.setting))
     },
@@ -332,7 +332,7 @@ export default {
         return
       }
       if (defautlList.type !== 'defautlList') return
-      this.setDefaultList(defautlList.data.list)
+      this.setList({ id: 'default', list: defautlList.data.list })
     },
     exportPlayList(path) {
       const data = {
@@ -353,7 +353,7 @@ export default {
       if (allData.type !== 'allData') return
       this.setSetting(updateSetting(allData.setting))
       this.init()
-      this.setDefaultList(allData.defaultList.list)
+      this.setList({ id: 'default', list: allData.defaultList.list })
     },
     exportAllData(path) {
       let allData = {

src/renderer/views/SongList.vue

@@ -121,7 +121,7 @@ export default {
     ...mapActions('songList', ['getTags', 'getList', 'getListDetail']),
     ...mapMutations('songList', ['setVisibleListDetail', 'setSelectListInfo', 'clearListDetail']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
-    ...mapMutations('list', ['defaultListAdd', 'defaultListAddMultiple']),
+    ...mapMutations('list', ['listAdd', 'listAddMultiple']),
     ...mapMutations('player', ['setList']),
     handleListBtnClick(info) {
       switch (info.action) {
@@ -145,11 +145,11 @@ export default {
       let targetSong
       if (index == null) {
         targetSong = this.selectdData[0]
-        this.defaultListAddMultiple(this.selectdData)
+        this.listAddMultiple({ id: 'default', list: this.selectdData })
         this.resetSelect()
       } else {
         targetSong = this.listDetail.list[index]
-        this.defaultListAdd(targetSong)
+        this.listAdd({ id: 'default', musicInfo: targetSong })
       }
       let targetIndex = this.defaultList.list.findIndex(
         s => s.songmid === targetSong.songmid
@@ -216,7 +216,7 @@ export default {
           this.testPlay()
           break
         case 'add':
-          this.defaultListAddMultiple(this.selectdData)
+          this.listAddMultiple({ id: 'default', list: this.selectdData })
           this.resetSelect()
           break
       }