新增列表多选操作功能

build-config/renderer/webpack.config.dev.js

@@ -10,7 +10,7 @@ const { mergeCSSLoaderDev } = require('../utils')
 
 module.exports = merge(baseConfig, {
   mode: 'development',
-  devtool: '#cheap-module-eval-source-map',
+  devtool: 'eval-source-map',
   module: {
     rules: [
       {
@@ -46,7 +46,7 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"development"',
         ELECTRON_DISABLE_SECURITY_WARNINGS: 'true',
       },
-      '__static': `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
+      __static: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
     }),
   ],
   performance: {

build-config/web/webpack.config.dev.js

@@ -9,7 +9,7 @@ const { mergeCSSLoaderDev } = require('../utils')
 
 module.exports = merge(baseConfig, {
   mode: 'development',
-  devtool: '#cheap-module-eval-source-map',
+  devtool: 'eval-source-map',
   output: {
     filename: '[name].js',
     path: path.join(__dirname, '../../dist/web'),

publish/changeLog.md

@@ -0,0 +1,10 @@
+### 新增
+
+- 新增搜索列表批量试听与下载功能
+- 新增排行榜列表批量试听与下载功能
+- 新增试听列表批量移除与下载功能
+- 新增下载列表批量开始、暂停与移除功能
+
+### 优化
+
+- 优化歌曲切换机制

publish/index.js

@@ -16,7 +16,7 @@ const run = async() => {
   try {
     console.log(chalk.blue('Clearing assets...'))
     await clearAssets()
-    console.log(chalk.green('Assets clear complated...'))
+    console.log(chalk.green('Assets clear completed...'))
 
     // console.log(chalk.blue('Compileing assets...'))
     // await compileAssets()

src/renderer/App.vue

@@ -38,6 +38,7 @@ export default {
     ...mapGetters('list', ['defaultList']),
     ...mapGetters('download', {
       downloadList: 'list',
+      downloadStatus: 'downloadStatus',
     }),
   },
   mounted() {
@@ -119,6 +120,12 @@ export default {
     initDownloadList() {
       let downloadList = this.electronStore.get('download.list')
       if (downloadList) {
+        downloadList.forEach(item => {
+          if (item.status == this.downloadStatus.RUN || item.status == this.downloadStatus.WAITING) {
+            item.status = this.downloadStatus.PAUSE
+            item.statusText = '暂停下载'
+          }
+        })
         this.updateDownloadList(downloadList)
       }
     },

src/renderer/components/core/Player.vue

@@ -252,36 +252,43 @@ export default {
     },
     handleNext() {
       // if (this.list.listName === null) return
-      const list = this.isAPITemp ? this.list.filter(s => s.source == 'kw') : this.list
-      if (!list.length) return
+      let list
+      if (this.listId == 'download') {
+        list = this.list.filter(s => !(!checkPath(s.filePath) || !s.isComplate || /\.ape$/.test(s.filePath)))
+      } else if (this.isAPITemp) {
+        list = this.list.filter(s => s.source == 'kw')
+      } else {
+        list = this.list
+      }
+      if (!list.length) return this.setPlayIndex(-1)
+      let playIndex = this.list === list ? this.playIndex : list.indexOf(this.list[this.playIndex])
+
       let index
       switch (this.setting.player.togglePlayMethod) {
         case 'listLoop':
-          index = this.hanldeListLoop()
+          index = this.hanldeListLoop(list, playIndex)
           break
         case 'random':
-          index = this.hanldeListRandom()
+          index = this.hanldeListRandom(list, playIndex)
           break
         case 'list':
-          index = this.hanldeListNext()
+          index = this.hanldeListNext(list, playIndex)
           break
         default:
           return
       }
       if (index < 0) return
+      if (this.list !== list) index = this.list.indexOf(list[index])
       this.setPlayIndex(index)
     },
-    hanldeListLoop(index = this.playIndex) {
-      index = index === this.list.length - 1 ? 0 : index + 1
-      return this.isAPITemp && this.list[index].source != 'kw' ? this.hanldeListLoop(index) : index
+    hanldeListLoop(list, index) {
+      return index === list.length - 1 ? 0 : index + 1
     },
-    hanldeListNext(index = this.playIndex) {
-      index = index === this.list.length - 1 ? -1 : index + 1
-      return this.isAPITemp && this.list[index].source != 'kw' ? this.hanldeListNext(index) : index
+    hanldeListNext(list, index) {
+      return index === list.length - 1 ? -1 : index + 1
     },
-    hanldeListRandom(index = this.playIndex) {
-      index = getRandom(0, this.list.length)
-      return this.isAPITemp && this.list[index].source != 'kw' ? this.hanldeListRandom(index) : index
+    hanldeListRandom(list, index) {
+      return getRandom(0, list.length)
     },
     startPlay() {
       this.isPlay = true
@@ -333,6 +340,9 @@ export default {
         this.audio.src = this.musicInfo.url
       }).catch(err => {
         this.status = err.message
+        setTimeout(() => {
+          this.handleNext()
+        }, 2000)
       })
     },
     setImg(targetSong) {

src/renderer/components/material/Checkbox.vue

@@ -10,7 +10,7 @@ div(:class="$style.checkbox")
     div(v-else)
       svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
         use(xlink:href='#icon-check-true')
-    span(v-if="label != null") {{label}}
+    span(v-if="label != null" v-html="label")
 </template>
 
 <script>

src/renderer/components/material/DownloadMultipleModal.vue

@@ -0,0 +1,94 @@
+<template lang="pug">
+material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
+  main(:class="$style.main")
+    h2
+      | 已选择 {{list.length}} 首歌曲
+      br
+      | 请选择要优先下载的音质
+    material-btn(:class="$style.btn" @click="handleClick('128k')") 普通音质 - 128K
+    material-btn(:class="$style.btn" @click="handleClick('320k')") 高品音质 - 320K
+    material-btn(:class="$style.btn" @click="handleClick('ape')") 无损音质 - APE
+    material-btn(:class="$style.btn" @click="handleClick('flac')") 无损音质 - FLAC
+</template>
+
+<script>
+
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    bgClose: {
+      type: Boolean,
+      default: true,
+    },
+    list: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  methods: {
+    handleClick(type) {
+      this.$emit('select', type)
+    },
+    handleClose() {
+      this.$emit('close')
+    },
+    getTypeName(type) {
+      switch (type) {
+        case 'flac':
+        case 'ape':
+          return '无损音质'
+        case '320k':
+          return '高品音质'
+        case '192k':
+        case '128k':
+          return '普通音质'
+      }
+    },
+  },
+}
+</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/components/material/FlowBtn.vue

@@ -0,0 +1,122 @@
+<template lang="pug">
+transition(enter-active-class="animated-fast zoomIn" leave-active-class="animated zoomOut")
+  div(:class="$style.btns" v-show="show")
+    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="addBtn" title="添加" @click.stop="handleClick('add')")
+      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')
+    button(type="button" v-if="startBtn" title="开始" @click.stop="handleClick('start')")
+      svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
+        use(xlink:href='#icon-play')
+    button(type="button" v-if="pauseBtn" title="暂停" @click.stop="handleClick('pause')")
+      svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
+        use(xlink:href='#icon-pause')
+    button(type="button" v-if="removeBtn" title="移除" @click.stop="handleClick('remove')")
+      svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
+        use(xlink:href='#icon-delete')
+
+</template>
+
+<script>
+
+export default {
+  props: {
+    removeBtn: {
+      type: Boolean,
+      default: true,
+    },
+    startBtn: {
+      type: Boolean,
+      default: false,
+    },
+    pauseBtn: {
+      type: Boolean,
+      default: false,
+    },
+    downloadBtn: {
+      type: Boolean,
+      default: true,
+    },
+    addBtn: {
+      type: Boolean,
+      default: true,
+    },
+    playBtn: {
+      type: Boolean,
+      default: true,
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    handleClick(action) {
+      this.$emit('btn-click', action)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.btns {
+  position: fixed;
+  bottom: 80px;
+  right: 30px;
+  background-color: @color-search-form-background;
+  border-radius: 5px;
+  // padding: 3px 5px;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
+  button {
+    background-color: transparent;
+    border: none;
+    border-radius: 3px;
+    margin-right: 5px;
+    cursor: pointer;
+    padding: 4px 7px;
+    color: @color-btn;
+    outline: none;
+    transition: background-color 0.2s ease;
+    line-height: 0;
+    &:last-child {
+      margin-right: 0;
+    }
+
+    svg {
+      height: 1.2em;
+    }
+
+    &:hover {
+      background-color: @color-theme_2-hover;
+    }
+    &:active {
+      background-color: @color-theme_2-active;
+    }
+  }
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .btns {
+      background-color: ~'@{color-@{value}-search-form-background}';
+      button {
+        color: ~'@{color-@{value}-btn}';
+        &:hover {
+          background-color: ~'@{color-@{value}-theme_2-hover}';
+        }
+        &:active {
+          background-color: ~'@{color-@{value}-theme_2-active}';
+        }
+      }
+    }
+  }
+})
+</style>

src/renderer/components/material/ListButtons.vue

@@ -9,6 +9,12 @@ div(:class="$style.btns")
   button(type="button" title="添加" v-if="userInfo" @click.stop="handleClick('add')")
     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="startBtn" title="开始" @click.stop="handleClick('start')")
+    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
+      use(xlink:href='#icon-play')
+  button(type="button" v-if="pauseBtn" title="暂停" @click.stop="handleClick('pause')")
+    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
+      use(xlink:href='#icon-pause')
   button(type="button" v-if="removeBtn" title="移除" @click.stop="handleClick('remove')")
     svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
       use(xlink:href='#icon-delete')
@@ -27,6 +33,14 @@ export default {
       type: Number,
       required: true,
     },
+    startBtn: {
+      type: Boolean,
+      default: false,
+    },
+    pauseBtn: {
+      type: Boolean,
+      default: false,
+    },
     removeBtn: {
       type: Boolean,
       default: true,