github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

新增重复歌曲列表

pull/639/head
lyswhut 2021-10-01 22:15:45 +08:00
parent 91279922f1
commit 0a31d19561
7 changed files with 282 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
publish/changeLog.md
View File

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

256
src/renderer/components/material/DuplicateMusicModal.vue Normal file
View File

@ -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>

1
src/renderer/components/material/SearchList.vue
View File

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

1
src/renderer/lang/en-us/view/list.json
View File

@ -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",

1
src/renderer/lang/zh-cn/view/list.json
View File

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

1
src/renderer/lang/zh-tw/view/list.json
View File

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

33
src/renderer/views/List.vue
View File

@ -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
switch (index) {
case -2:
list = this.defaultList
break
case -1:
list = this.loveList
break
default:
list = this.userList[index]
break
}
if (!list) return
const list = this.getTargetListInfo(index)
selectDir({
title: this.$t('view.list.lists_import_part_desc'),