ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

完善自定义列表、新增右键菜单

Browse Source
This commit is contained in:
lyswhut
2020-05-20 22:52:37 +08:00
parent 88b416c949
commit 0332b81d58
39 changed files with 1175 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/Download.vue
+216 -69
View File
@@ -8,34 +8,35 @@ div(:class="$style.download")
table
thead
tr
th.nobreak.center(style="width: 10px;") #
th.nobreak(style="width: 28%;") {{$t('view.download.name')}}
th.nobreak(style="width: 22%;") {{$t('view.download.progress')}}
th.nobreak(style="width: 15%;") {{$t('view.download.status')}}
th.nobreak.center(style="width: 5%;") #
th.nobreak {{$t('view.download.name')}}
th.nobreak(style="width: 20%;") {{$t('view.download.progress')}}
th.nobreak(style="width: 22%;") {{$t('view.download.status')}}
th.nobreak(style="width: 10%;") {{$t('view.download.quality')}}
th.nobreak(style="width: 20%;") {{$t('view.download.action')}}
div.scroll(v-if="list.length" :class="$style.tbody")
th.nobreak(style="width: 13%;") {{$t('view.download.action')}}
div.scroll(v-if="list.length" :class="$style.tbody" ref="dom_scrollContent")
table
tbody(ref="dom_tbody")
tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
td.nobreak.center(style="width: 37px;" @click.stop) {{index + 1}}
td.break(style="width: 28%;")
tr(v-for='(item, index) in showList' :key='item.key' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
td.break
span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
td.break(style="width: 22%;") {{item.progress.progress}}%
td.break(style="width: 15%;") {{item.statusText}}
td.break(style="width: 20%;") {{item.progress.progress}}%
td.break(style="width: 22%;") {{item.statusText}}
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="item.status != downloadStatus.ERROR"
td(style="width: 13%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" remove-btn
:start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
:pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
:play-btn="item.status == downloadStatus.COMPLETED" :search-btn="item.status == downloadStatus.ERROR" @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")
//- material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
div(:class="$style.noItem" v-else)
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { checkPath, openDirInExplorer } from '../utils'
import { checkPath, openDirInExplorer, findParentNode } from '../utils'
import path from 'path'
export default {
@@ -45,35 +46,28 @@ export default {
clickTime: window.performance.now(),
clickIndex: -1,
selectdData: [],
isShowEditBtn: false,
// isShowEditBtn: false,
isShowDownloadMultiple: false,
tabs: [
{
name: this.$t('view.download.all'),
id: 'all',
},
{
name: this.$t('view.download.runing'),
id: 'runing',
},
{
name: this.$t('view.download.paused'),
id: 'paused',
},
{
name: this.$t('view.download.error'),
id: 'error',
},
{
name: this.$t('view.download.finished'),
id: 'finished',
},
],
tabId: 'all',
keyEvent: {
isShiftDown: false,
isModDown: false,
},
listMenu: {
isShowItemMenu: false,
itemMenuControl: {
play: true,
start: true,
pause: true,
file: true,
search: true,
remove: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
}
},
computed: {
@@ -104,6 +98,64 @@ export default {
return this.list
}
},
tabs() {
return [
{
name: this.$t('view.download.all'),
id: 'all',
},
{
name: this.$t('view.download.runing'),
id: 'runing',
},
{
name: this.$t('view.download.paused'),
id: 'paused',
},
{
name: this.$t('view.download.error'),
id: 'error',
},
{
name: this.$t('view.download.finished'),
id: 'finished',
},
]
},
listItemMenu() {
return [
{
name: this.$t('view.download.menu_play'),
action: 'play',
hide: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('view.download.menu_start'),
action: 'start',
hide: !this.listMenu.itemMenuControl.start,
},
{
name: this.$t('view.download.menu_pause'),
action: 'pause',
hide: !this.listMenu.itemMenuControl.pause,
},
{
name: this.$t('view.download.menu_file'),
action: 'file',
hide: !this.listMenu.itemMenuControl.file,
},
{
name: this.$t('view.download.menu_search'),
action: 'search',
hide: !this.listMenu.itemMenuControl.search,
},
{
name: this.$t('view.download.menu_remove'),
action: 'remove',
hide: !this.listMenu.itemMenuControl.remove,
},
]
},
},
watch: {
selectdData(n) {
@@ -228,25 +280,22 @@ export default {
index = this.list.findIndex(i => i.key === key)
let info = this.list[index]
if (info.isComplate) {
this.handlePlay(index)
this.handlePlay(info)
} else if (info.status === this.downloadStatus.RUN) {
this.handlePauseTask(index)
} else {
this.handleStartTask(index)
}
},
async handlePlay(index) {
const targetSong = this.list[index]
async handlePlay(targetSong) {
if (!await checkPath(path.join(this.setting.download.savePath, targetSong.fileName))) return
this.setList({ list: { list: this.list, id: 'download' }, index: this.list.findIndex(i => i.key === targetSong.key) })
},
handleListBtnClick(info) {
let item = this.showList[info.index]
const key = item.key
let index = this.list.findIndex(i => i.key === key)
switch (info.action) {
case 'play':
this.handlePlay(index)
this.handlePlay(item)
break
case 'start':
this.startTask(item)
@@ -258,10 +307,10 @@ export default {
this.removeTask(item)
break
case 'file':
this.handleOpenFolder(index)
this.handleOpenFolder(item.filePath)
break
case 'search':
this.handleSearch(index)
this.handleSearch(item.musicInfo)
break
}
},
@@ -274,40 +323,138 @@ export default {
node.classList.add('active')
}
},
async handleFlowBtnClick(action) {
let selectdData = [...this.selectdData]
this.removeAllSelect()
await this.$nextTick()
// async handleFlowBtnClick(action) {
// let selectdData = [...this.selectdData]
// this.removeAllSelect()
// await this.$nextTick()
switch (action) {
case 'start':
this.startTasks(selectdData)
break
case 'pause':
this.pauseTasks(selectdData)
break
case 'remove':
this.removeTasks(selectdData)
break
}
// switch (action) {
// case 'start':
// this.startTasks(selectdData)
// break
// case 'pause':
// this.pauseTasks(selectdData)
// break
// case 'remove':
// this.removeTasks(selectdData)
// break
// }
// },
async handleOpenFolder(filePath) {
if (!await checkPath(filePath)) return
openDirInExplorer(filePath)
},
async handleOpenFolder(index) {
let path = this.list[index].filePath
if (!await checkPath(path)) return
openDirInExplorer(path)
},
handleSearch(index) {
const info = this.list[index].musicInfo
handleSearch(musicInfo) {
this.$router.push({
path: 'search',
query: {
text: `${info.name} ${info.singer}`,
text: `${musicInfo.name} ${musicInfo.singer}`,
},
})
},
handleTabChange() {
this.selectdData = []
},
handleListItemRigthClick(event, index) {
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
let dom_td = findParentNode(event.target, 'TD')
this.listMenu.rightClickItemIndex = index
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
let item = this.showList[index]
if (item.isComplate) {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.file = true
this.listMenu.itemMenuControl.start =
this.listMenu.itemMenuControl.pause = false
} else if (item.status === this.downloadStatus.ERROR || item.status === this.downloadStatus.PAUSE) {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.pause =
this.listMenu.itemMenuControl.file = false
this.listMenu.itemMenuControl.start = true
} else {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.start =
this.listMenu.itemMenuControl.file = false
this.listMenu.itemMenuControl.pause = true
}
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListMenu() {
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
// let key
let item
switch (action && action.action) {
case 'play':
item = this.showList[index]
if (item) this.handlePlay(item)
break
case 'start':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
this.removeAllSelect()
this.startTasks(selectdData)
} else {
item = this.showList[index]
if (item) this.startTask(item)
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'pause':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
this.removeAllSelect()
this.pauseTasks(selectdData)
} else {
item = this.showList[index]
if (item) this.pauseTask(item)
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'file':
item = this.showList[index]
// key = item.key
// index = this.list.findIndex(i => i.key === key)
if (item) this.handleOpenFolder(item.filePath)
break
case 'search':
item = this.showList[index]
if (item) this.handleSearch(item.musicInfo)
break
case 'remove':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
this.removeAllSelect()
this.removeTasks(selectdData)
} else {
item = this.showList[index]
if (item) this.removeTask(item)
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
}
},
},
}
</script>
src/renderer/views/Leaderboard.vue
+219 -18
View File
@@ -1,9 +1,20 @@
<template lang="pug">
div(:class="$style.leaderboard")
div(:class="$style.header")
//- div(:class="$style.header")
material-tab(:class="$style.tab" :list="types" align="left" item-key="id" item-name="name" v-model="tabId")
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :list="list")
div(:class="$style.lists" ref="dom_lists")
div(:class="$style.listsSelect")
//- h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
material-selection(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
//- button(:class="$style.listsAdd" @click="handleShowNewList" :title="$t('view.list.lists_new_list_btn')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-add')
ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
li(:class="[$style.listsItem, item.id == tabId ? $style.active : null]" :title="item.name" v-for="item in types" :key="item.id" @click="handleToggleList(item.id)")
span(:class="$style.listsLabel") {{item.name}}
div(:class="$style.list")
material-song-list(v-model="selectdData" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :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")
@@ -81,6 +92,38 @@ export default {
break
}
},
handleMenuClick(info) {
switch (info.action) {
case 'download':
if (this.selectdData.length) {
this.isShowDownloadMultiple = true
} else {
this.musicInfo = this.list[info.index]
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'play':
this.testPlay(info.index)
break
case 'search':
this.handleSearch(info.index)
break
case 'addTo':
if (this.selectdData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.list[info.index]
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
}
},
testPlay(index) {
let targetSong
if (index == null) {
@@ -129,33 +172,39 @@ export default {
if (isSelect) this.resetSelect()
this.isShowListAddMultiple = false
},
handleFlowBtnClick(action) {
switch (action) {
case 'download':
this.isShowDownloadMultiple = true
break
case 'play':
this.testPlay()
break
case 'add':
this.isShowListAddMultiple = true
break
}
},
// handleFlowBtnClick(action) {
// switch (action) {
// case 'download':
// this.isShowDownloadMultiple = true
// break
// case 'play':
// this.testPlay()
// break
// case 'add':
// this.isShowListAddMultiple = true
// break
// }
// },
handleSongListAction({ action, data }) {
switch (action) {
case 'listBtnClick':
return this.handleListBtnClick(data)
case 'menuClick':
return this.handleMenuClick(data)
case 'togglePage':
return this.handleTogglePage(data)
case 'flowBtnClick':
return this.handleFlowBtnClick(data)
// case 'flowBtnClick':
// return this.handleFlowBtnClick(data)
case 'testPlay':
return this.testPlay(data)
case 'search':
return this.handleSearch(data)
}
},
handleToggleList(id) {
if (this.tabId == id) return
this.tabId = id
},
resetSelect() {
this.selectdData = []
},
@@ -169,7 +218,7 @@ export default {
.leaderboard {
height: 100%;
display: flex;
flex-flow: column nowrap;
position: relative;
}
.header {
flex: none;
@@ -192,4 +241,156 @@ export default {
flex-flow: column nowrap;
}
.lists {
flex: none;
width: 14.8%;
display: flex;
flex-flow: column nowrap;
}
.listsHeader {
position: relative;
}
.listsSelect {
font-size: 12px;
&:hover {
:global(.icon) {
opacity: 1;
}
}
>:global(.content) {
display: block;
width: 100%;
}
:global(.label-content) {
background-color: transparent !important;
line-height: 38px;
height: 38px;
border-radius: 0;
&:hover {
background: none !important;
}
}
:global(.label) {
color: rgba(0, 0, 0, 0.95) !important;
}
:global(.icon) {
opacity: .6;
transition: opacity .3s ease;
}
:global(.list) {
max-height: 500px;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
li {
background-color: @color-theme_2-background_2;
line-height: 38px;
font-size: 13px;
&:hover {
background-color: @color-btn-hover;
}
&:active {
background-color: @color-btn-active;
}
}
}
// line-height: 38px;
// padding: 0 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
flex: none;
}
.listsContent {
flex: auto;
min-width: 0;
overflow-y: scroll;
overflow-x: hidden;
// border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.listsItem {
position: relative;
transition: .3s ease;
transition-property: color, background-color;
background-color: transparent;
&:hover:not(.active) {
background-color: @color-theme_2-hover;
cursor: pointer;
}
&.active {
// background-color:
color: @color-theme;
}
&.selected {
background-color: @color-theme_2-active;
}
&.clicked {
background-color: @color-theme_2-hover;
}
&.editing {
padding: 0 10px;
background-color: @color-theme_2-hover;
.listsLabel {
display: none;
}
.listsInput {
display: block;
}
}
}
.listsLabel {
display: block;
height: 100%;
padding: 0 10px;
font-size: 13px;
line-height: 36px;
.mixin-ellipsis-1;
}
.list {
overflow: hidden;
height: 100%;
flex: auto;
display: flex;
flex-flow: column nowrap;
// .noItem {
// }
}
each(@themes, {
:global(#container.@{value}) {
.listsSelect {
:global(.list) {
li {
background-color: ~'@{color-@{value}-theme_2-background_2}';
&:hover {
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-btn-active}';
}
}
}
}
.listsItem {
&:hover:not(.active) {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
&.active {
color: ~'@{color-@{value}-theme}';
}
&.select {
background-color: ~'@{color-@{value}-theme_2-active}';
}
&.clicked {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
&.editing {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
}
}
})
</style>
src/renderer/views/List.vue
+183 -48
View File
@@ -1,5 +1,5 @@
<template lang="pug">
div(:class="$style.container" @click="handleContainerClick($event)")
div(:class="$style.container" @click="handleContainerClick")
div(:class="$style.lists" ref="dom_lists")
div(:class="$style.listHeader")
h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
@@ -13,30 +13,30 @@
span(:class="$style.listsLabel") {{loveList.name}}
li.user-list(:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null]" @contextmenu="handleListsItemRigthClick($event, index)" :title="item.name" v-for="(item, index) in userList" :key="item.id")
span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}}
input.key-bind(:class="$style.listsInput" type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
input.key-bind(:class="$style.listsInput" @contextmenu.stop type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave")
li(:class="[$style.listsItem, $style.listsNew, listsData.isNewLeave ? $style.newLeave : null]" v-if="listsData.isShowNewList")
input.key-bind(:class="$style.listsInput" ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate($event)" @blur="handleListsCreate($event)" :placeholder="$t('view.list.lists_new_list_input')")
input.key-bind(:class="$style.listsInput" @contextmenu.stop ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate" @blur="handleListsCreate" :placeholder="$t('view.list.lists_new_list_input')")
div(:class="$style.list")
//- transition
div(:class="$style.thead")
table
thead
tr
th.nobreak.center(style="width: 10px;") #
th.nobreak(style="width: 25%;") {{$t('view.list.name')}}
th.nobreak(style="width: 20%;") {{$t('view.list.singer')}}
th.nobreak(style="width: 20%;") {{$t('view.list.album')}}
th.nobreak.center(style="width: 5%;") #
th.nobreak {{$t('view.list.name')}}
th.nobreak(style="width: 22%;") {{$t('view.list.singer')}}
th.nobreak(style="width: 22%;") {{$t('view.list.album')}}
th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
th.nobreak(style="width: 21%;") {{$t('view.list.action')}}
th.nobreak(style="width: 15%;") {{$t('view.list.action')}}
div(v-if="delayShow && list.length" :class="$style.content")
div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
table
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid" @contextmenu="handleListItemRigthClick($event, index)"
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(style="width: 25%;")
td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break
span.select {{item.name}}
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
//- span.badge.badge-light(v-if="item._types['128k']") 128K
@@ -44,13 +44,13 @@
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K
//- span.badge.badge-theme-info(v-if="item._types.ape") APE
//- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
td.break(style="width: 20%;")
td.break(style="width: 22%;")
span.select {{item.singer}}
td.break(style="width: 20%;")
td.break(style="width: 22%;")
span.select {{item.albumName}}
td(style="width: 9%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(style="width: 21%; padding-left: 0; padding-right: 0;")
td(style="width: 15%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" @btn-click="handleListBtnClick")
//- 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)') 试听
@@ -60,15 +60,16 @@
p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
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="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
//- material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
material-list-add-modal(:show="isShowListAdd" :is-move="isMove" :from-list-id="listData.id" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :is-move="isMoveMultiple" :from-list-id="listData.id" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddMultipleModalClose")
material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template>
<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { throttle, scrollTo, clipboardWriteText, assertApiSupport } from '../utils'
import { throttle, scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../utils'
export default {
name: 'List',
data() {
@@ -80,7 +81,7 @@ export default {
musicInfo: null,
selectdListDetailData: [],
selectdListData: [],
isShowEditBtn: false,
// isShowEditBtn: false,
isShowDownloadMultiple: false,
delayShow: false,
routeLeaveLocation: null,
@@ -109,6 +110,22 @@ export default {
isShowNewList: false,
isNewLeave: false,
},
listMenu: {
isShowItemMenu: false,
itemMenuControl: {
play: true,
addTo: true,
moveTo: true,
download: true,
remove: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
isMove: false,
isMoveMultiple: false,
}
},
computed: {
@@ -175,16 +192,45 @@ export default {
},
]
},
listItemMenu() {
return [
{
name: this.$t('view.list.list_play'),
action: 'play',
disabled: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('view.list.list_download'),
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('view.list.list_add_to'),
action: 'addTo',
disabled: !this.listMenu.itemMenuControl.addTo,
},
{
name: this.$t('view.list.list_move_to'),
action: 'moveTo',
disabled: !this.listMenu.itemMenuControl.moveTo,
},
{
name: this.$t('view.list.list_remove'),
action: 'remove',
disabled: !this.listMenu.itemMenuControl.remove,
},
]
},
},
watch: {
selectdListDetailData(n) {
const len = n.length
if (len) {
this.isShowEditBtn = true
} else {
this.isShowEditBtn = false
}
},
// selectdListDetailData(n) {
// const len = n.length
// if (len) {
// this.isShowEditBtn = true
// } else {
// this.isShowEditBtn = false
// }
// },
'listData.list'(n, o) {
if (n === o && n.length === o.length) return
this.removeAllSelectListDetail()
@@ -494,23 +540,28 @@ export default {
this.removeAllSelectListDetail()
this.isShowDownloadMultiple = false
},
handleFlowBtnClick(action) {
switch (action) {
case 'download':
this.isShowDownloadMultiple = true
break
case 'remove':
this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
this.removeAllSelectListDetail()
break
case 'add':
this.isShowListAddMultiple = true
break
}
// handleFlowBtnClick(action) {
// switch (action) {
// case 'download':
// this.isShowDownloadMultiple = true
// break
// case 'remove':
// this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
// this.removeAllSelectListDetail()
// break
// case 'add':
// this.isShowListAddMultiple = true
// break
// }
// },
handleListAddModalClose() {
this.isShowListAdd = false
if (this.isMove) this.isMove = false
},
handleListAddModalClose(isClearSelect) {
handleListAddMultipleModalClose(isClearSelect) {
if (isClearSelect) this.removeAllSelectListDetail()
this.isShowListAddMultiple = false
if (this.isMoveMultiple) this.isMoveMultiple = false
},
getMusicLocation(index) {
let dom = document.getElementById('mid_' + this.list[index].songmid)
@@ -521,6 +572,7 @@ export default {
// },
handleContextMenu(event) {
if (!event.target.classList.contains('select')) return
event.stopImmediatePropagation()
let classList = this.$refs.dom_scrollContent.classList
classList.add(this.$style.copying)
window.requestAnimationFrame(() => {
@@ -591,33 +643,116 @@ export default {
this.listsData.rightClickItemIndex = index
this.listsData.menuLocation.x = event.currentTarget.offsetLeft + event.offsetX
this.listsData.menuLocation.y = event.currentTarget.offsetTop + event.offsetY - this.$refs.dom_lists_list.scrollTop
this.hideListMenu()
this.$nextTick(() => {
this.listsData.isShowItemMenu = true
})
},
handleListItemRigthClick(event, index) {
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
let dom_td = findParentNode(event.target, 'TD')
this.listMenu.rightClickItemIndex = index
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
this.hideListsMenu()
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListsMenu() {
this.listsData.isShowItemMenu = false
this.listsData.rightClickItemIndex = -1
},
handleListsItemMenuClick(action) {
// console.log(action)
let index = this.listsData.rightClickItemIndex
this.hideListsMenu()
this.listsData.isShowItemMenu = false
let dom
switch (action && action.action) {
case 'rename':
dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[this.listsData.rightClickItemIndex]
dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[index]
this.$nextTick(() => {
dom.classList.add(this.$style.editing)
dom.querySelector('input').focus()
})
break
case 'moveup':
this.moveupUserList(this.listsData.rightClickItemIndex)
this.moveupUserList(index)
break
case 'movedown':
this.movedownUserList(this.listsData.rightClickItemIndex)
this.movedownUserList(index)
break
case 'remove':
this.removeUserList(this.listsData.rightClickItemIndex)
this.removeUserList(index)
break
}
},
hideListMenu() {
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
let minfo
switch (action && action.action) {
case 'play':
this.testPlay(index)
break
case 'addTo':
if (this.selectdListDetailData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.list[index]
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
case 'moveTo':
if (this.selectdListDetailData.length) {
this.isMoveMultiple = true
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.list[index]
this.isMove = true
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
case 'download':
if (this.selectdListDetailData.length) {
this.isShowDownloadMultiple = true
} else {
minfo = this.list[index]
if (!this.assertApiSupport(minfo.source)) return
this.musicInfo = minfo
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'remove':
if (this.selectdListDetailData.length) {
this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
this.removeAllSelectListDetail()
} else {
this.handleRemove(index)
}
break
}
this.listsData.rightClickItemIndex = -1
},
},
}
@@ -712,7 +847,7 @@ export default {
}
.listsLabel {
display: block;
height: 100%;
height: 36px;
padding: 0 10px;
font-size: 13px;
line-height: 36px;
src/renderer/views/Search.vue
+137 -48
View File
@@ -8,29 +8,29 @@
table
thead
tr
th.nobreak.center(style="width: 10px;") #
th.nobreak(style="width: 25%;") {{$t('view.search.name')}}
th.nobreak(style="width: 20%;") {{$t('view.search.singer')}}
th.nobreak(style="width: 25%;") {{$t('view.search.album')}}
th.nobreak(style="width: 10%;") {{$t('view.search.time')}}
th.nobreak(style="width: 15%;") {{$t('view.search.action')}}
th.nobreak.center(style="width: 5%;") #
th.nobreak {{$t('view.search.name')}}
th.nobreak(style="width: 22%;") {{$t('view.search.singer')}}
th.nobreak(style="width: 22%;") {{$t('view.search.album')}}
th.nobreak(style="width: 8%;") {{$t('view.search.time')}}
th.nobreak(style="width: 13%;") {{$t('view.search.action')}}
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
table
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick($event, index)")
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(style="width: 25%;")
tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break
span.select {{item.name}}
span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
span(:class="[$style.labelSource, $style.noSelect]" v-if="searchSourceId == 'all'") {{item.source}}
td.break(style="width: 20%;")
td.break(style="width: 22%;")
span.select {{item.singer}}
td.break(style="width: 25%;")
td.break(style="width: 22%;")
span.select {{item.albumName}}
td(style="width: 10%;")
td(style="width: 8%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(style="width: 15%; padding-left: 0; padding-right: 0;")
td(style="width: 13%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
:play-btn="assertApiSupport(item.source)"
:download-btn="assertApiSupport(item.source)"
@@ -53,14 +53,15 @@
p {{$t('view.search.no_item')}}
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 == 'all' || assertApiSupport(searchSourceId))" :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")
//- material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="handleListAddModalClose")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddMultipleModalClose")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { scrollTo, clipboardWriteText, assertApiSupport } from '../utils'
import { scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../utils'
// import music from '../utils/music'
export default {
name: 'Search',
@@ -73,7 +74,7 @@ export default {
isShowDownload: false,
musicInfo: null,
selectdData: [],
isShowEditBtn: false,
// isShowEditBtn: false,
isShowDownloadMultiple: false,
searchSourceId: null,
isShowListAdd: false,
@@ -82,6 +83,18 @@ export default {
isShiftDown: false,
isModDown: false,
},
listMenu: {
isShowItemMenu: false,
itemMenuControl: {
play: true,
addTo: true,
download: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
}
},
beforeRouteUpdate(to, from, next) {
@@ -120,14 +133,14 @@ export default {
this.handleGetHotSearch()
},
watch: {
selectdData(n) {
const len = n.length
if (len) {
this.isShowEditBtn = true
} else {
this.isShowEditBtn = false
}
},
// selectdData(n) {
// const len = n.length
// if (len) {
// this.isShowEditBtn = true
// } else {
// this.isShowEditBtn = false
// }
// },
'listInfo.list'() {
this.removeAllSelect()
},
@@ -147,6 +160,25 @@ export default {
...mapGetters(['userInfo', 'setting']),
...mapGetters('search', ['sourceList', 'allList', 'sources', 'historyList']),
...mapGetters('list', ['defaultList']),
listItemMenu() {
return [
{
name: this.$t('view.search.list_play'),
action: 'play',
disabled: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('view.search.list_download'),
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('view.search.list_add_to'),
action: 'addTo',
disabled: !this.listMenu.itemMenuControl.addTo,
},
]
},
listInfo() {
return this.setting.search.searchSource == 'all' ? this.allList : this.sourceList[this.setting.search.searchSource]
},
@@ -329,32 +361,36 @@ export default {
node.classList.add('active')
}
},
handleFlowBtnClick(action) {
switch (action) {
case 'download':
this.isShowDownloadMultiple = true
break
case 'play':
this.testPlay()
this.removeAllSelect()
break
case 'add':
this.isShowListAddMultiple = true
break
}
},
// handleFlowBtnClick(action) {
// switch (action) {
// case 'download':
// this.isShowDownloadMultiple = true
// break
// case 'play':
// this.testPlay()
// this.removeAllSelect()
// break
// case 'add':
// this.isShowListAddMultiple = true
// break
// }
// },
filterList(list) {
return this.searchSourceId == 'all'
? list.filter(s => this.assertApiSupport(s.source))
: this.assertApiSupport(this.searchSourceId)
? [...list] : []
},
handleListAddModalClose(isClearSelect) {
if (isClearSelect) this.removeAllSelect()
handleListAddModalClose() {
this.isShowListAdd = false
},
handleListAddMultipleModalClose(isClearSelect) {
if (isClearSelect) this.removeAllSelectListDetail()
this.isShowListAddMultiple = false
},
handleContextMenu(event) {
if (!event.target.classList.contains('select')) return
event.stopImmediatePropagation()
let classList = this.$refs.dom_scrollContent.classList
classList.add(this.$style.copying)
window.requestAnimationFrame(() => {
@@ -380,6 +416,59 @@ export default {
assertApiSupport(source) {
return assertApiSupport(source)
},
handleListItemRigthClick(event, index) {
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
let dom_td = findParentNode(event.target, 'TD')
this.listMenu.rightClickItemIndex = index
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListMenu() {
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
let minfo
switch (action && action.action) {
case 'play':
this.testPlay(index)
break
case 'addTo':
if (this.selectdData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.listInfo.list[index]
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
case 'download':
if (this.selectdData.length) {
this.isShowDownloadMultiple = true
} else {
minfo = this.listInfo.list[index]
if (!this.assertApiSupport(minfo.source)) return
this.musicInfo = minfo
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
}
},
},
}
</script>
@@ -397,7 +486,7 @@ export default {
flex: none;
}
.list {
position: relative;
// position: relative;
height: 100%;
font-size: 14px;
display: flex;
@@ -498,10 +587,10 @@ export default {
.mixin-ellipsis-1;
max-width: 150px;
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
}
.history-clear-btn {
@@ -536,10 +625,10 @@ each(@themes, {
color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
}
.tbody {
src/renderer/views/SongList.vue
+49 -15
View File
@@ -197,6 +197,38 @@ export default {
break
}
},
handleMenuClick(info) {
switch (info.action) {
case 'download':
if (this.selectdData.length) {
this.isShowDownloadMultiple = true
} else {
this.musicInfo = this.listDetail.list[info.index]
this.$nextTick(() => {
this.isShowDownload = true
})
}
break
case 'play':
this.testPlay(info.index)
break
case 'search':
this.handleSearch(info.index)
break
case 'addTo':
if (this.selectdData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
} else {
this.musicInfo = this.listDetail.list[info.index]
this.$nextTick(() => {
this.isShowListAdd = true
})
}
break
}
},
testPlay(index) {
let targetSong
if (index == null) {
@@ -259,27 +291,29 @@ export default {
this.handleGetListDetail(this.selectListInfo.id, 1)
})
},
handleFlowBtnClick(action) {
switch (action) {
case 'download':
this.isShowDownloadMultiple = true
break
case 'play':
this.testPlay()
break
case 'add':
this.isShowListAddMultiple = true
break
}
},
// handleFlowBtnClick(action) {
// switch (action) {
// case 'download':
// this.isShowDownloadMultiple = true
// break
// case 'play':
// this.testPlay()
// break
// case 'add':
// this.isShowListAddMultiple = true
// break
// }
// },
handleSongListAction({ action, data }) {
switch (action) {
case 'listBtnClick':
return this.handleListBtnClick(data)
case 'menuClick':
return this.handleMenuClick(data)
case 'togglePage':
return this.handleToggleListDetailPage(data)
case 'flowBtnClick':
return this.handleFlowBtnClick(data)
// case 'flowBtnClick':
// return this.handleFlowBtnClick(data)
case 'testPlay':
return this.testPlay(data)
case 'search':