新增重复歌曲列表

publish/changeLog.md

@@ -1,9 +1,10 @@
 ### 新增
 
 - 新增歌词简体中文转繁体中文，当软件语言被设置为繁体中文后，播放歌曲的歌词也将自动转成繁体中文显示
-- 为方便分享歌曲列表，新增单个列表导入/导出功能，可在右击“我的列表”里的列表名后弹出的菜单中使用
+- 新增单个列表导入/导出功能，可以方便分享歌曲列表，可在右击“我的列表”里的列表名后弹出的菜单中使用
-- 为防止误删列表，新增删除列表前的确认弹窗
+- 新增删除列表前的确认弹窗，防止误删列表
 - 新增歌词文本选择复制功能，可在详情页进度条上方的歌词文本选择按钮进入歌词文本选择模式，选择完成后可鼠标右击或者使用系统快捷键复制
+- 新增重复歌曲列表，可以方便移除我的列表中的重复歌曲，此列表会列出目标列表里歌曲名相同的歌曲，可在右击“我的列表”里的列表名后弹出的菜单中使用
 
 ### 修复
 

src/renderer/components/material/DuplicateMusicModal.vue

@@ -0,0 +1,256 @@
+<template lang="pug">
+Modal(:show="visible" @close="$emit('update:visible', false)" bg-close)
+  div(:class="$style.header")
+    h2 {{listInfo.name}}
+  main.scroll(:class="$style.main")
+    ul(ref="dom_list" v-if="duplicateList.length" :class="$style.list")
+      li(v-for="(item, index) in duplicateList" :key="item.songmid" :class="$style.listItem")
+        div(:class="$style.num") {{item.index + 1}}
+        div(:class="$style.text")
+          h3(:class="$style.text") {{item.musicInfo.name}} - {{item.musicInfo.singer}}
+          h3(v-if="item.musicInfo.albumName" :class="[$style.text, $style.albumName]") {{item.musicInfo.albumName}}
+        div(:class="$style.label") {{item.musicInfo.source}}
+        div(:class="$style.label") {{item.musicInfo.interval}}
+        div(:class="$style.btns")
+          button(type="button" @click="handlePlay(index)" :class="$style.btn")
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='50%' viewBox='0 0 287.386 287.386' space='preserve' v-once)
+              use(xlink:href='#icon-testPlay')
+          button(type="button" @click="handleRemove(index)" :class="$style.btn")
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='50%' viewBox='0 0 212.982 212.982' space='preserve' v-once)
+              use(xlink:href='#icon-delete')
+    div(:class="$style.noItem" v-else)
+      p(v-text="$t('view.list.no_item')")
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import Modal from './Modal'
+import Btn from './Btn'
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    listInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  model: {
+    prop: 'visible',
+    event: 'visible',
+  },
+  components: {
+    Modal,
+    Btn,
+  },
+  watch: {
+    visible(n) {
+      if (n) this.handleFilterList()
+    },
+  },
+  data() {
+    return {
+      duplicateList: [],
+    }
+  },
+  mounted() {
+    if (this.listInfo.list) this.handleFilterList()
+  },
+  methods: {
+    ...mapMutations('list', [
+      'listRemove',
+    ]),
+    ...mapMutations('player', {
+      setPlayList: 'setList',
+    }),
+    handleFilterList() {
+      const listMap = new Map()
+      const duplicateList = []
+      this.listInfo.list.forEach((musicInfo, index) => {
+        if (listMap.has(musicInfo.name)) {
+          const targetMusicInfo = listMap.get(musicInfo.name)
+          duplicateList.push({
+            index: this.listInfo.list.indexOf(targetMusicInfo),
+            musicInfo: targetMusicInfo,
+          }, {
+            index,
+            musicInfo,
+          })
+        } else {
+          listMap.set(musicInfo.name, musicInfo)
+        }
+      })
+
+      this.duplicateList = duplicateList
+    },
+    handleRemove(index) {
+      const { musicInfo: targetMusicInfo } = this.duplicateList.splice(index, 1)[0]
+      // let duplicates = []
+      // for (let index = 0; index < this.duplicateList.length; index++) {
+      //   const { musicInfo } = this.duplicateList[index]
+      //   if (musicInfo.name == targetMusicInfo.name) {
+      //     duplicates.push(index)
+      //     if (duplicates.length > 1) break
+      //   }
+      // }
+      // console.log(duplicates)
+      // if (duplicates.length < 2) this.duplicateList.splice(duplicates[0], 1)
+
+      this.listRemove({ listId: this.listInfo.id, id: targetMusicInfo.songmid })
+
+      this.handleFilterList()
+    },
+    handlePlay(index) {
+      const { index: musicInfoIndex } = this.duplicateList[index]
+      this.setPlayList({ list: this.listInfo, index: musicInfoIndex })
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.header {
+  flex: none;
+  padding: 15px;
+  text-align: center;
+}
+.main {
+  min-height: 200px;
+  width: 460px;
+}
+
+.list {
+  // background-color: @color-search-form-background;
+  font-size: 13px;
+  transition-property: height;
+  position: relative;
+  .listItem {
+    position: relative;
+    padding: 8px 5px;
+    transition: background-color .2s ease;
+    line-height: 1.3;
+    // overflow: hidden;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+
+    &:hover {
+      background-color: @color-theme_2-hover;
+    }
+    // border-radius: 4px;
+    // &:last-child {
+    //   border-bottom-left-radius: 4px;
+    //   border-bottom-right-radius: 4px;
+    // }
+  }
+}
+
+.num {
+  flex: none;
+  font-size: 12px;
+  width: 30px;
+  text-align: center;
+  color: @color-theme_2-font-label;
+}
+
+.text {
+  flex: auto;
+  padding-left: 5px;
+  .mixin-ellipsis-1;
+}
+.albumName {
+  font-size: 12px;
+  opacity: 0.6;
+  .mixin-ellipsis-1;
+}
+.label {
+  flex: none;
+  font-size: 12px;
+  opacity: 0.5;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  // transform: rotate(45deg);
+  // background-color:
+}
+.btns {
+  flex: none;
+  font-size: 12px;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+}
+.btn {
+  background-color: transparent;
+  border: none;
+  border-radius: @form-radius;
+  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: 16px;
+  }
+
+  &:hover {
+    background-color: @color-theme_2-hover;
+  }
+  &:active {
+    background-color: @color-theme_2-active;
+  }
+}
+
+.no-item {
+  position: relative;
+  height: 200px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    font-size: 16px;
+    color: @color-theme_2-font-label;
+  }
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .listItem {
+      &:hover {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+    }
+    .num {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
+    .btn {
+      color: ~'@{color-@{value}-btn}';
+      &:hover {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+      &:active {
+        background-color: ~'@{color-@{value}-theme_2-active}';
+      }
+    }
+    .no-item {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
+  }
+})
+
+</style>

src/renderer/components/material/SearchList.vue

@@ -374,6 +374,7 @@ export default {
 .albumName {
   font-size: 12px;
   opacity: 0.6;
+  .mixin-ellipsis-1;
 }
 .source {
   flex: none;

src/renderer/lang/en-us/view/list.json

@@ -12,6 +12,7 @@
   "list_search": "Search",
   "list_sort": "Adjust position",
   "list_source_detail": "Song Page",
+  "lists_duplicate": "Duplicate song",
   "lists_export": "Export",
   "lists_export_part_desc": "Choose where to save the list file",
   "lists_import": "Import",

src/renderer/lang/zh-cn/view/list.json

@@ -12,6 +12,7 @@
   "list_search": "搜索",
   "list_sort": "调整位置",
   "list_source_detail": "歌曲详情页",
+  "lists_duplicate": "重复歌曲",
   "lists_export": "导出",
   "lists_export_part_desc": "选择列表文件保存位置",
   "lists_import": "导入",

src/renderer/lang/zh-tw/view/list.json

@@ -12,6 +12,7 @@
   "list_search": "搜索",
   "list_sort": "調整位置",
   "list_source_detail": "歌曲詳情頁",
+  "lists_duplicate": "重複歌曲",
   "lists_export": "導出",
   "lists_export_part_desc": "選擇列表文件保存位置",
   "lists_import": "導入",

src/renderer/views/List.vue

@@ -74,6 +74,7 @@
     material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
     material-search-list(:list="list" @action="handleMusicSearchAction" :visible="isVisibleMusicSearch")
     material-list-sort-modal(:show="isShowListSortModal" :music-info="musicInfo" :selected-num="selectdListDetailData.length" @close="isShowListSortModal = false" @confirm="handleSortMusicInfo")
+    material-duplicate-music-modal(:visible.sync="isShowDuplicateMusicModal" :list-info="selectedListInfo")
 </template>
 
 <script>
@@ -97,6 +98,7 @@ export default {
       isShowListAdd: false,
       isShowListAddMultiple: false,
       isShowListSortModal: false,
+      isShowDuplicateMusicModal: false,
       delayTimeout: null,
       isToggleList: true,
       focusTarget: 'listDetail',
@@ -109,6 +111,7 @@ export default {
         isShowItemMenu: false,
         itemMenuControl: {
           rename: true,
+          duplicate: true,
           import: true,
           export: true,
           sync: false,
@@ -147,6 +150,7 @@ export default {
       isMoveMultiple: false,
       isVisibleMusicSearch: false,
       fetchingListStatus: {},
+      selectedListInfo: {},
     }
   },
   computed: {
@@ -201,6 +205,11 @@ export default {
           action: 'sync',
           disabled: !this.listsData.itemMenuControl.sync,
         },
+        {
+          name: this.$t('view.list.lists_duplicate'),
+          action: 'duplicate',
+          disabled: !this.listsData.itemMenuControl.duplicate,
+        },
         {
           name: this.$t('view.list.lists_import'),
           action: 'import',
@@ -802,6 +811,10 @@ export default {
             dom.querySelector('input').focus()
           })
           break
+        case 'duplicate':
+          this.selectedListInfo = this.getTargetListInfo(index)
+          this.isShowDuplicateMusicModal = true
+          break
         case 'import':
           this.handleImportList(index)
           break
@@ -989,7 +1002,7 @@ export default {
         },
       })
     },
-    handleExportList(index) {
+    getTargetListInfo(index) {
       let list
       switch (index) {
         case -2:
@@ -1002,6 +1015,10 @@ export default {
           list = this.userList[index]
           break
       }
+      return list
+    },
+    handleExportList(index) {
+      const list = this.getTargetListInfo(index)
       if (!list) return
       openSaveDir({
         title: this.$t('view.list.lists_export_part_desc'),
@@ -1020,19 +1037,7 @@ export default {
       })
     },
     handleImportList(index) {
-      let list
+      const list = this.getTargetListInfo(index)
-      switch (index) {
-        case -2:
-          list = this.defaultList
-          break
-        case -1:
-          list = this.loveList
-          break
-        default:
-          list = this.userList[index]
-          break
-      }
-      if (!list) return
 
       selectDir({
         title: this.$t('view.list.lists_import_part_desc'),