完成我喜欢播放列表

publish/changeLog.md

@@ -0,0 +1,3 @@
+#### 新增
+
+- 新增我喜欢播放列表

src/renderer/components/material/ListButtons.vue

@@ -3,6 +3,9 @@ div(:class="$style.btns")
   button(type="button" v-if="playBtn" title="播放" @click.stop="handleClick('play')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve')
       use(xlink:href='#icon-testPlay')
+  button(type="button" v-if="listAddBtn" title="添加到..." @click.stop="handleClick('listAdd')")
+    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
+      use(xlink:href='#icon-addTo')
   button(type="button" v-if="downloadBtn" title="下载" @click.stop="handleClick('download')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve')
       use(xlink:href='#icon-download')
@@ -56,6 +59,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    listAddBtn: {
+      type: Boolean,
+      default: true,
+    },
     searchBtn: {
       type: Boolean,
       default: false,

src/renderer/components/material/SongList.vue

@@ -11,8 +11,8 @@ div(:class="$style.songList")
                   :indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? '全不选' : '全选'")
               th.nobreak(style="width: 25%;") 歌曲名
               th.nobreak(style="width: 20%;") 歌手
-              th.nobreak(style="width: 22%;") 专辑
+              th.nobreak(style="width: 20%;") 专辑
-              th.nobreak(style="width: 18%;") 操作
+              th.nobreak(style="width: 20%;") 操作
               th.nobreak(style="width: 10%;") 时长
       div.scroll(:class="$style.tbody" ref="dom_scrollContent")
         table
@@ -25,9 +25,13 @@ div(:class="$style.songList")
                 span.badge.badge-info(v-if="item._types['320k']") 高品质
                 span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
               td.break(style="width: 20%;") {{item.singer}}
-              td.break(style="width: 22%;") {{item.albumName}}
+              td.break(style="width: 20%;") {{item.albumName}}
-              td(style="width: 18%;")
+              td(style="width: 20%; padding-left: 0; padding-right: 0;")
-                material-list-buttons(:index="index" :search-btn="true" :play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')" :download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')" :remove-btn="false" @btn-click="handleListBtnClick")
+                material-list-buttons(:index="index" :search-btn="true"
+                  :remove-btn="false" @btn-click="handleListBtnClick"
+                  :listAdd-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
+                  :play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
+                  :download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')")
                 //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
                 //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
                 //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋

src/renderer/components/material/listAddModal.vue

@@ -0,0 +1,103 @@
+<template lang="pug">
+material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
+  main(:class="$style.main")
+    h2
+      | 添加&nbsp;
+      span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
+      | &nbsp;到...
+    material-btn(:class="$style.btn" :title="`把该歌曲添加到 ${item.name}`" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    musicInfo: {
+      type: Object,
+    },
+    bgClose: {
+      type: Boolean,
+      default: true,
+    },
+    excludeListId: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  computed: {
+    ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
+    lists() {
+      return [
+        this.defaultList,
+        this.loveList,
+        ...this.userList,
+      ].filter(l => !this.excludeListId.includes(l.id))
+    },
+  },
+  methods: {
+    ...mapMutations('list', ['listAdd']),
+    handleClick(index) {
+      this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
+      this.$nextTick(() => {
+        this.handleClose()
+      })
+    },
+    handleClose() {
+      this.$emit('close')
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.main {
+  padding: 15px;
+  max-width: 300px;
+  min-width: 200px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  h2 {
+    font-size: 13px;
+    color: @color-theme_2-font;
+    line-height: 1.3;
+    text-align: center;
+    margin-bottom: 15px;
+  }
+}
+
+.name {
+  color: @color-theme;
+}
+
+.btn {
+  display: block;
+  margin-bottom: 15px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .main {
+      h2 {
+        color: ~'@{color-@{value}-theme_2-font}';
+      }
+    }
+    .name {
+      color: ~'@{color-@{value}-theme}';
+    }
+  }
+})
+
+</style>

src/renderer/components/material/listAddMultipleModal.vue

@@ -0,0 +1,97 @@
+<template lang="pug">
+material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
+  main(:class="$style.main")
+    h2 添加已选的 {{musicList.length}} 首歌曲到...
+    material-btn(:class="$style.btn" :title="`把该歌曲添加到 ${item.name}`" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    musicList: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    bgClose: {
+      type: Boolean,
+      default: true,
+    },
+    excludeListId: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  computed: {
+    ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
+
+    lists() {
+      return [
+        this.defaultList,
+        this.loveList,
+        ...this.userList,
+      ].filter(l => !this.excludeListId.includes(l.id))
+    },
+  },
+  methods: {
+    ...mapMutations('list', ['listAddMultiple']),
+    handleClick(index) {
+      this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
+      this.$nextTick(() => {
+        this.handleClose(true)
+      })
+    },
+    handleClose(isSelect = false) {
+      this.$emit('close', isSelect)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.main {
+  padding: 15px;
+  max-width: 300px;
+  min-width: 200px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  h2 {
+    font-size: 13px;
+    color: @color-theme_2-font;
+    line-height: 1.3;
+    text-align: center;
+    margin-bottom: 15px;
+  }
+}
+
+.btn {
+  display: block;
+  margin-bottom: 15px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .main {
+      h2 {
+        color: ~'@{color-@{value}-theme_2-font}';
+      }
+    }
+  }
+})
+
+</style>

src/renderer/store/modules/list.js

@@ -44,7 +44,12 @@ const getList = (state, id) => {
 // mitations
 const mutations = {
   initList(state, { defaultList, loveList }) {
-    if (defaultList !== undefined) state.defaultList = defaultList
+    if (defaultList !== undefined) {
+      // 处理0.6.2及以前的版本默认列表没有ID的兼容问题
+      if (!defaultList.id) defaultList.id = 'default'
+
+      state.defaultList = defaultList
+    }
     if (loveList !== undefined) state.loveList = loveList
   },
   setList(state, { id, list }) {

src/renderer/views/Download.vue

@@ -26,7 +26,7 @@ div(:class="$style.download")
             td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
             td(style="width: 20%; padding-left: 0; padding-right: 0;")
               material-list-buttons(:index="index" :download-btn="false" :file-btn="true" :start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
-                :pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)"
+                :pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
                 :play-btn="item.status == downloadStatus.COMPLETED" @btn-click="handleListBtnClick")
     material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
   div(:class="$style.noItem" v-else)

src/renderer/views/Leaderboard.vue

@@ -6,6 +6,8 @@
     material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :list="list")
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
+    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
+    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
 </template>
 
 <script>
@@ -21,6 +23,8 @@ export default {
       musicInfo: null,
       selectdData: [],
       isShowDownloadMultiple: false,
+      isShowListAdd: false,
+      isShowListAddMultiple: false,
     }
   },
   computed: {
@@ -72,8 +76,12 @@ export default {
         case 'search':
           this.handleSearch(info.index)
           break
-        // case 'add':
+        case 'listAdd':
-        //   break
+          this.musicInfo = this.list[info.index]
+          this.$nextTick(() => {
+            this.isShowListAdd = true
+          })
+          break
       }
     },
     testPlay(index) {
@@ -125,6 +133,10 @@ export default {
       this.isShowDownloadMultiple = false
       this.resetSelect()
     },
+    handleListAddModalClose(isSelect) {
+      if (isSelect) this.resetSelect()
+      this.isShowListAddMultiple = false
+    },
     handleFlowBtnClick(action) {
       switch (action) {
         case 'download':
@@ -134,8 +146,7 @@ export default {
           this.testPlay()
           break
         case 'add':
-          this.listAddMultiple({ id: 'default', list: this.selectdData })
+          this.isShowListAddMultiple = true
-          this.resetSelect()
           break
       }
     },

src/renderer/views/List.vue

@@ -40,7 +40,9 @@
       p(v-text="list.length ? '加载中...' : '列表竟然是空的...'")
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
-    material-flow-btn(:show="isShowEditBtn" :add-btn="false" :play-btn="false" @btn-click="handleFlowBtnClick")
+    material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
+    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="isShowListAdd = false")
+    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
 </template>
 
 <script>
@@ -62,6 +64,8 @@ export default {
       isShowDownloadMultiple: false,
       delayShow: false,
       routeLeaveLocation: null,
+      isShowListAdd: false,
+      isShowListAddMultiple: false,
     }
   },
   computed: {
@@ -72,21 +76,16 @@ export default {
       playIndex: 'playIndex',
     }),
     isPlayList() {
-      return this.playerListId != 'download' && (
+      return this.playerListId == this.listId
-        ((!this.$route.query.id || this.$route.query.id == 'test') && this.playerListId == 'test') ||
-        this.$route.query.id == this.playerListId
-      )
     },
     list() {
-      return !this.$route.query.id || this.$route.query.id == 'test'
+      return this.listData.list
-        ? this.defaultList.list
-        : this.userList.find(l => l._id == this.$route.query.id) || []
     },
     isAPITemp() {
       return this.setting.apiSource == 'temp'
     },
     listData() {
-      if (this.listId == null) return this.defaultList
+      if (!this.listId) return this.defaultList
       let targetList
       switch (this.listId) {
         case 'default':
@@ -101,6 +100,9 @@ export default {
       }
       return targetList
     },
+    excludeListId() {
+      return [this.listId]
+    },
   },
   watch: {
     selectdData(n) {
@@ -120,7 +122,13 @@ export default {
   },
   beforeRouteUpdate(to, from, next) {
     if (to.query.id === undefined) return
-    this.listId = to.query.id
+    this.delayShow = false
+    this.$nextTick(() => {
+      this.listId = to.query.id
+      this.$nextTick(() => {
+        this.handleDelayShow()
+      })
+    })
     next()
   },
   // mounted() {
@@ -142,6 +150,7 @@ export default {
     next()
   },
   created() {
+    this.listId = this.$route.query.id
     this.handleScroll = throttle(e => {
       if (this.routeLeaveLocation) {
         this.setListScroll(this.routeLeaveLocation)
@@ -157,7 +166,9 @@ export default {
     ...mapMutations(['setListScroll']),
     ...mapMutations('list', ['listRemove', 'listRemoveMultiple']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
-    ...mapMutations('player', ['setList']),
+    ...mapMutations('player', {
+      setPlayList: 'setList',
+    }),
     handleDelayShow() {
       if (this.list.length > 150) {
         setTimeout(() => {
@@ -185,10 +196,10 @@ export default {
     },
     testPlay(index) {
       if ((this.isAPITemp && this.list[index].source != 'kw') || this.list[index].source == 'tx' || this.list[index].source == 'wy') return
-      this.setList({ list: this.list, listId: 'test', index })
+      this.setPlayList({ list: this.list, listId: this.listId, index })
     },
     handleRemove(index) {
-      this.listRemove({ id: 'default', index })
+      this.listRemove({ id: this.listId, index })
     },
     handleListBtnClick(info) {
       switch (info.action) {
@@ -207,6 +218,12 @@ export default {
         case 'remove':
           this.handleRemove(info.index)
           break
+        case 'listAdd':
+          this.musicInfo = this.list[info.index]
+          this.$nextTick(() => {
+            this.isShowListAdd = true
+          })
+          break
       }
     },
     handleAddDownload(type) {
@@ -232,11 +249,18 @@ export default {
           this.isShowDownloadMultiple = true
           break
         case 'remove':
-          this.listRemoveMultiple({ id: 'default', list: this.selectdData })
+          this.listRemoveMultiple({ id: this.listId, list: this.selectdData })
           this.resetSelect()
           break
+        case 'add':
+          this.isShowListAddMultiple = true
+          break
       }
     },
+    handleListAddModalClose(isSelect) {
+      if (isSelect) this.resetSelect()
+      this.isShowListAddMultiple = false
+    },
     // handleScroll(e) {
     //   console.log(e.target.scrollTop)
     // },

src/renderer/views/Search.vue

@@ -28,7 +28,7 @@
                 span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
               td.break(style="width: 20%;") {{item.singer}}
               td.break(style="width: 25%;") {{item.albumName}}
-              td(style="width: 15%;")
+              td(style="width: 15%; padding-left: 0; padding-right: 0;")
                 material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
                   :play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
                   :download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
@@ -41,6 +41,8 @@
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
     material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'kw' || searchSourceId == 'all' || !isAPITemp)" :remove-btn="false" @btn-click="handleFlowBtnClick")
+    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
+    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
 </template>
 
 <script>
@@ -63,6 +65,8 @@ export default {
       isShowEditBtn: false,
       isShowDownloadMultiple: false,
       searchSourceId: null,
+      isShowListAdd: false,
+      isShowListAddMultiple: false,
     }
   },
   beforeRouteUpdate(to, from, next) {
@@ -164,7 +168,11 @@ export default {
         case 'play':
           this.testPlay(info.index)
           break
-        case 'add':
+        case 'listAdd':
+          this.musicInfo = this.listInfo.list[info.index]
+          this.$nextTick(() => {
+            this.isShowListAdd = true
+          })
           break
       }
     },
@@ -218,14 +226,17 @@ export default {
           this.resetSelect()
           break
         case 'add':
-          this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
+          this.isShowListAddMultiple = true
-          this.resetSelect()
           break
       }
     },
     filterList(list) {
       return this.setting.apiSource == 'temp' ? list.filter(s => s.source == 'kw') : list.filter(s => s.source != 'tx' && s.source != 'wy')
     },
+    handleListAddModalClose(isSelect) {
+      if (isSelect) this.resetSelect()
+      this.isShowListAddMultiple = false
+    },
   },
 }
 </script>

src/renderer/views/Setting.vue

@@ -162,7 +162,7 @@ export default {
   name: 'Setting',
   computed: {
     ...mapGetters(['setting', 'themes', 'version']),
-    ...mapGetters('list', ['defaultList']),
+    ...mapGetters('list', ['defaultList', 'loveList']),
     isLatestVer() {
       return this.version.newVersion && this.version.version === this.version.newVersion.version
     },
@@ -325,19 +325,30 @@ export default {
       })
     },
     importPlayList(path) {
-      let defautlList
+      let listData
       try {
-        defautlList = JSON.parse(fs.readFileSync(path, 'utf8'))
+        listData = JSON.parse(fs.readFileSync(path, 'utf8'))
       } catch (error) {
         return
       }
-      if (defautlList.type !== 'defautlList') return
+      console.log(listData.type)
-      this.setList({ id: 'default', list: defautlList.data.list })
+
+      // 兼容0.6.2及以前版本的列表数据
+      if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list })
+
+      if (listData.type !== 'playList') return
+
+      for (const list of listData.data) {
+        this.setList({ id: list.id, list: list.list })
+      }
     },
     exportPlayList(path) {
       const data = {
-        type: 'defautlList',
+        type: 'playList',
-        data: this.defaultList,
+        data: [
+          this.defaultList,
+          this.loveList,
+        ],
       }
       fs.writeFile(path, JSON.stringify(data, null, 2), 'utf8', err => {
         console.log(err)
@@ -353,13 +364,20 @@ export default {
       if (allData.type !== 'allData') return
       this.setSetting(updateSetting(allData.setting))
       this.init()
-      this.setList({ id: 'default', list: allData.defaultList.list })
+      if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list })
+
+      for (const list of allData.playList) {
+        this.setList({ id: list.id, list: list.list })
+      }
     },
     exportAllData(path) {
       let allData = {
         type: 'allData',
         setting: this.setting,
-        defaultList: this.defaultList,
+        playList: [
+          this.defaultList,
+          this.loveList,
+        ],
       }
       fs.writeFile(path, JSON.stringify(allData, null, 2), 'utf8', err => {
         console.log(err)

src/renderer/views/SongList.vue

@@ -31,6 +31,8 @@
             material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
+    material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
+    material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
 </template>
 
 <script>
@@ -52,6 +54,8 @@ export default {
       selectdData: [],
       isShowDownloadMultiple: false,
       isToggleSource: false,
+      isShowListAdd: false,
+      isShowListAddMultiple: false,
     }
   },
   computed: {
@@ -137,8 +141,12 @@ export default {
         case 'search':
           this.handleSearch(info.index)
           break
-        // case 'add':
+        case 'listAdd':
-        //   break
+          this.musicInfo = this.listDetail.list[info.index]
+          this.$nextTick(() => {
+            this.isShowListAdd = true
+          })
+          break
       }
     },
     testPlay(index) {
@@ -216,8 +224,7 @@ export default {
           this.testPlay()
           break
         case 'add':
-          this.listAddMultiple({ id: 'default', list: this.selectdData })
+          this.isShowListAddMultiple = true
-          this.resetSelect()
           break
       }
     },
@@ -241,6 +248,10 @@ export default {
     hideListDetail() {
       setTimeout(() => this.setVisibleListDetail(false), 50)
     },
+    handleListAddModalClose(isSelect) {
+      if (isSelect) this.resetSelect()
+      this.isShowListAddMultiple = false
+    },
   },
 }
 </script>