移除列表选择框，新增键盘选择机制
This commit is contained in:
lyswhut
@@ -1,5 +1,5 @@
|
||||
|
||||
require('./request')
|
||||
// require('./request')
|
||||
// require('./appName')
|
||||
require('./progressBar')
|
||||
require('./trafficLight')
|
||||
|
||||
@@ -85,6 +85,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
document.body.classList.add(this.isNt ? 'noTransparent' : 'transparent')
|
||||
window.eventHub.$emit('bindKey')
|
||||
this.init()
|
||||
},
|
||||
watch: {
|
||||
@@ -303,6 +304,7 @@ export default {
|
||||
document.body.removeEventListener('mouseleave', this.enableIgnoreMouseEvents)
|
||||
}
|
||||
document.body.removeEventListener('click', this.handleBodyClick)
|
||||
window.eventHub.$emit('unbindKey')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -53,6 +53,9 @@ table {
|
||||
&:hover {
|
||||
background-color: @color-theme_2-hover;
|
||||
}
|
||||
&.active {
|
||||
background-color: @color-theme_2-active;
|
||||
}
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
@@ -213,6 +216,9 @@ each(@themes, {
|
||||
&:hover {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
}
|
||||
&.active {
|
||||
background-color: ~'@{color-@{value}-theme_2-active}';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
@color-theme_2: rgba(255, 255, 255, .9);
|
||||
@color-theme_2-background_1: #fff;
|
||||
@color-theme_2-background_2: fadeout(@color-theme_2-background_1, 2%);
|
||||
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%);
|
||||
@color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%);
|
||||
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 80%);
|
||||
@color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%);
|
||||
@color-theme_2-font: darken(@color-theme_2, 70%);
|
||||
@color-theme_2-font-label: fadeout(@color-theme_2-font, 40%);
|
||||
@color-theme_2-line: lighten(@color-theme, 35%);
|
||||
@@ -78,8 +78,8 @@
|
||||
@color-green-theme_2: #fff;
|
||||
@color-green-theme_2-background_1: #fff;
|
||||
@color-green-theme_2-background_2: fadeout(@color-green-theme_2-background_1, 2%);
|
||||
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
|
||||
@color-green-theme_2-active: fadeout(darken(@color-green-theme, 5%), 70%);
|
||||
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 80%);
|
||||
@color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%);
|
||||
@color-green-theme_2-font: darken(@color-green-theme_2, 70%);
|
||||
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 40%);
|
||||
@color-green-theme_2-line: lighten(@color-green-theme, 45%);
|
||||
@@ -128,8 +128,8 @@
|
||||
@color-yellow-theme_2: #fff;
|
||||
@color-yellow-theme_2-background_1: #fff;
|
||||
@color-yellow-theme_2-background_2: fadeout(@color-yellow-theme_2-background_1, 2%);
|
||||
@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 60%);
|
||||
@color-yellow-theme_2-active: fadeout(darken(@color-yellow-theme, 5%), 60%);
|
||||
@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
|
||||
@color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%);
|
||||
@color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%);
|
||||
@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 40%);
|
||||
@color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
|
||||
@@ -177,8 +177,8 @@
|
||||
@color-orange-theme_2: #fff;
|
||||
@color-orange-theme_2-background_1: #fff;
|
||||
@color-orange-theme_2-background_2: fadeout(@color-orange-theme_2-background_1, 2%);
|
||||
@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
|
||||
@color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
|
||||
@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 80%);
|
||||
@color-orange-theme_2-active: fadeout(lighten(@color-orange-theme, 10%), 70%);
|
||||
@color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
|
||||
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 40%);
|
||||
@color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
|
||||
@@ -226,8 +226,8 @@
|
||||
@color-blue-theme_2: #fff;
|
||||
@color-blue-theme_2-background_1: #fff;
|
||||
@color-blue-theme_2-background_2: fadeout(@color-blue-theme_2-background_1, 2%);
|
||||
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 70%);
|
||||
@color-blue-theme_2-active: fadeout(darken(@color-blue-theme, 5%), 70%);
|
||||
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 80%);
|
||||
@color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%);
|
||||
@color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
|
||||
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 40%);
|
||||
@color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
|
||||
@@ -273,8 +273,8 @@
|
||||
@color-red-theme-font: #fff;
|
||||
@color-red-theme-font-label: lighten(@color-red-theme, 35%);
|
||||
@color-red-theme_2: #fff;
|
||||
@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 70%);
|
||||
@color-red-theme_2-active: fadeout(darken(@color-red-theme, 5%), 70%);
|
||||
@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 80%);
|
||||
@color-red-theme_2-active: fadeout(lighten(@color-red-theme, 10%), 70%);
|
||||
@color-red-theme_2-background_1: #fff;
|
||||
@color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
|
||||
@color-red-theme_2-font: darken(@color-red-theme_2, 70%);
|
||||
@@ -326,8 +326,8 @@
|
||||
@color-pink-theme_2: #fff;
|
||||
@color-pink-theme_2-background_1: #fff;
|
||||
@color-pink-theme_2-background_2: fadeout(@color-pink-theme_2-background_1, 2%);
|
||||
@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 60%);
|
||||
@color-pink-theme_2-active: fadeout(darken(@color-pink-theme, 5%), 60%);
|
||||
@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 75%);
|
||||
@color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%);
|
||||
@color-pink-theme_2-font: darken(@color-pink-theme_2, 70%);
|
||||
@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 40%);
|
||||
@color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
|
||||
@@ -375,8 +375,8 @@
|
||||
@color-purple-theme_2: #fff;
|
||||
@color-purple-theme_2-background_1: #fff;
|
||||
@color-purple-theme_2-background_2: fadeout(@color-purple-theme_2-background_1, 2%);
|
||||
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 70%);
|
||||
@color-purple-theme_2-active: fadeout(darken(@color-purple-theme, 5%), 70%);
|
||||
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 80%);
|
||||
@color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%);
|
||||
@color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
|
||||
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 40%);
|
||||
@color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
|
||||
@@ -424,8 +424,8 @@
|
||||
@color-grey-theme_2: #fff;
|
||||
@color-grey-theme_2-background_1: #fff;
|
||||
@color-grey-theme_2-background_2: fadeout(@color-grey-theme_2-background_1, 2%);
|
||||
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
|
||||
@color-grey-theme_2-active: fadeout(darken(@color-grey-theme, 5%), 70%);
|
||||
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 80%);
|
||||
@color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%);
|
||||
@color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
|
||||
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 40%);
|
||||
@color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
|
||||
@@ -472,8 +472,8 @@
|
||||
@color-ming-theme-font: #fff;
|
||||
@color-ming-theme-font-label: lighten(@color-ming-theme, 35%);
|
||||
@color-ming-theme_2: #fff;
|
||||
@color-ming-theme_2-hover: fadeout(lighten(@color-ming-theme, 10%), 75%);
|
||||
@color-ming-theme_2-active: fadeout(darken(@color-ming-theme, 5%), 70%);
|
||||
@color-ming-theme_2-hover: fadeout(lighten(@color-ming-theme, 10%), 85%);
|
||||
@color-ming-theme_2-active: fadeout(lighten(@color-ming-theme, 10%), 75%);
|
||||
@color-ming-theme_2-background_1: #fff;
|
||||
@color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%);
|
||||
@color-ming-theme_2-font: darken(@color-ming-theme_2, 70%);
|
||||
@@ -525,8 +525,8 @@
|
||||
@color-mid_autumn-theme_2: rgba(255, 255, 255, .93);
|
||||
@color-mid_autumn-theme_2-background_1: #eeedef;
|
||||
@color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%);
|
||||
@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 65%);
|
||||
@color-mid_autumn-theme_2-active: fadeout(darken(@color-mid_autumn-theme, 5%), 70%);
|
||||
@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
|
||||
@color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
|
||||
@color-mid_autumn-theme_2-font: darken(@color-mid_autumn-theme_2, 70%);
|
||||
@color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
|
||||
@color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 63%);
|
||||
@@ -574,8 +574,8 @@
|
||||
@color-naruto-theme_2: rgba(255, 255, 255, 0.8);
|
||||
@color-naruto-theme_2-background_1: #e9faff;
|
||||
@color-naruto-theme_2-background_2: fadeout(@color-naruto-theme_2-background_1, 2%);
|
||||
@color-naruto-theme_2-hover: fadeout(lighten(@color-naruto-theme, 10%), 65%);
|
||||
@color-naruto-theme_2-active: fadeout(darken(@color-naruto-theme, 5%), 70%);
|
||||
@color-naruto-theme_2-hover: fadeout(lighten(@color-naruto-theme, 10%), 75%);
|
||||
@color-naruto-theme_2-active: fadeout(lighten(@color-naruto-theme, 10%), 65%);
|
||||
@color-naruto-theme_2-font: darken(@color-naruto-theme_2, 80%);
|
||||
@color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
|
||||
@color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
|
||||
@@ -623,8 +623,8 @@
|
||||
@color-happy_new_year-theme_2: rgba(255, 199, 199, 0.8);
|
||||
@color-happy_new_year-theme_2-background_1: #f2a4a4;
|
||||
@color-happy_new_year-theme_2-background_2: fadeout(@color-happy_new_year-theme_2-background_1, 2%);
|
||||
@color-happy_new_year-theme_2-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%);
|
||||
@color-happy_new_year-theme_2-active: fadeout(darken(@color-happy_new_year-theme, 5%), 70%);
|
||||
@color-happy_new_year-theme_2-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 65%);
|
||||
@color-happy_new_year-theme_2-active: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%);
|
||||
@color-happy_new_year-theme_2-font: darken(@color-happy_new_year-theme_2, 90%);
|
||||
@color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
|
||||
@color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
|
||||
|
||||
@@ -6,9 +6,7 @@ div(:class="$style.songList")
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.nobreak.center(style="width: 37px;")
|
||||
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData"
|
||||
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('material.song_list.unselect_all') : $t('material.song_list.select_all')")
|
||||
th.nobreak.center(style="width: 10px;") #
|
||||
th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}}
|
||||
@@ -16,14 +14,13 @@ div(:class="$style.songList")
|
||||
th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}}
|
||||
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody(@contextmenu="handleContextMenu")
|
||||
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick($event, index)")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdList" @change="handleChangeSelect" :value="item")
|
||||
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
td.break(style="width: 25%;")
|
||||
span.select {{item.name}}
|
||||
span.badge.badge-theme-success(:class="$style.labelQuality" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
|
||||
span.badge.badge-theme-info(:class="$style.labelQuality" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
|
||||
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')}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.singer}}
|
||||
td.break(style="width: 20%;")
|
||||
@@ -38,7 +35,7 @@ div(:class="$style.songList")
|
||||
//- 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)') ＋
|
||||
td(style="width: 10%;")
|
||||
span(:class="$style.time") {{item.interval || '--/--'}}
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
@@ -97,29 +94,23 @@ export default {
|
||||
selectdList(n) {
|
||||
const len = n.length
|
||||
if (len) {
|
||||
this.isSelectAll = true
|
||||
this.isIndeterminate = len !== this.list.length
|
||||
this.isShowEditBtn = true
|
||||
} else {
|
||||
this.isSelectAll = false
|
||||
this.isShowEditBtn = false
|
||||
}
|
||||
},
|
||||
selectdData(n) {
|
||||
const len = n.length
|
||||
if (len) {
|
||||
this.isSelectAll = true
|
||||
this.isIndeterminate = len !== this.list.length
|
||||
this.isShowEditBtn = true
|
||||
this.selectdList = [...n]
|
||||
} else {
|
||||
this.isSelectAll = false
|
||||
this.isShowEditBtn = false
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
}
|
||||
},
|
||||
list(n) {
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
if (!this.list.length) return
|
||||
this.$nextTick(() => scrollTo(this.$refs.dom_scrollContent, 0))
|
||||
},
|
||||
@@ -128,16 +119,64 @@ export default {
|
||||
return {
|
||||
clickTime: 0,
|
||||
clickIndex: -1,
|
||||
isSelectAll: false,
|
||||
isIndeterminate: false,
|
||||
isShowEditBtn: false,
|
||||
selectdList: [],
|
||||
keyEvent: {
|
||||
isShiftDown: false,
|
||||
isAltDown: false,
|
||||
isADown: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.listenEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unlistenEvent()
|
||||
},
|
||||
methods: {
|
||||
listenEvent() {
|
||||
window.eventHub.$on('shift_down', this.handle_shift_down)
|
||||
window.eventHub.$on('shift_up', this.handle_shift_up)
|
||||
window.eventHub.$on('alt_down', this.handle_alt_down)
|
||||
window.eventHub.$on('alt_up', this.handle_alt_up)
|
||||
window.eventHub.$on('mod+a_down', this.handle_mod_a_down)
|
||||
window.eventHub.$on('mod+a_up', this.handle_mod_a_up)
|
||||
},
|
||||
unlistenEvent() {
|
||||
window.eventHub.$off('shift_down', this.handle_shift_down)
|
||||
window.eventHub.$off('shift_up', this.handle_shift_up)
|
||||
window.eventHub.$off('alt_down', this.handle_alt_down)
|
||||
window.eventHub.$off('alt_up', this.handle_alt_up)
|
||||
window.eventHub.$off('mod+a_down', this.handle_mod_a_down)
|
||||
window.eventHub.$off('mod+a_up', this.handle_mod_a_up)
|
||||
},
|
||||
handle_shift_down() {
|
||||
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
|
||||
},
|
||||
handle_shift_up() {
|
||||
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
|
||||
},
|
||||
handle_alt_down() {
|
||||
if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true
|
||||
},
|
||||
handle_alt_up() {
|
||||
if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false
|
||||
},
|
||||
handle_mod_a_down() {
|
||||
if (!this.keyEvent.isADown) {
|
||||
this.keyEvent.isADown = true
|
||||
this.handleSelectAllData()
|
||||
}
|
||||
},
|
||||
handle_mod_a_up() {
|
||||
if (this.keyEvent.isADown) this.keyEvent.isADown = false
|
||||
},
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
|
||||
this.handleSelectData(event, index)
|
||||
|
||||
if (
|
||||
window.performance.now() - this.clickTime > 400 ||
|
||||
this.clickIndex !== index
|
||||
@@ -150,17 +189,65 @@ export default {
|
||||
this.clickTime = 0
|
||||
this.clickIndex = -1
|
||||
},
|
||||
handleSelectData(event, clickIndex) {
|
||||
if (this.keyEvent.isShiftDown) {
|
||||
if (this.selectdList.length) {
|
||||
let lastSelectIndex = this.list.indexOf(this.selectdList[this.selectdList.length - 1])
|
||||
this.removeAllSelect()
|
||||
if (lastSelectIndex != clickIndex) {
|
||||
let isNeedReverse = false
|
||||
if (clickIndex < lastSelectIndex) {
|
||||
let temp = lastSelectIndex
|
||||
lastSelectIndex = clickIndex
|
||||
clickIndex = temp
|
||||
isNeedReverse = true
|
||||
}
|
||||
this.selectdList = this.list.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectdList.reverse()
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
do {
|
||||
nodes[lastSelectIndex].classList.add('active')
|
||||
lastSelectIndex++
|
||||
} while (lastSelectIndex <= clickIndex)
|
||||
}
|
||||
} else {
|
||||
event.currentTarget.classList.add('active')
|
||||
this.selectdList.push(this.list[clickIndex])
|
||||
}
|
||||
} else if (this.keyEvent.isAltDown) {
|
||||
let item = this.list[clickIndex]
|
||||
let index = this.selectdList.indexOf(item)
|
||||
if (index < 0) {
|
||||
this.selectdList.push(item)
|
||||
event.currentTarget.classList.add('active')
|
||||
} else {
|
||||
this.selectdList.splice(index, 1)
|
||||
event.currentTarget.classList.remove('active')
|
||||
}
|
||||
} else if (this.selectdList.length) this.removeAllSelect()
|
||||
this.$emit('input', [...this.selectdList])
|
||||
},
|
||||
removeAllSelect() {
|
||||
this.selectdList = []
|
||||
let dom_tbody = this.$refs.dom_tbody
|
||||
if (!dom_tbody) return
|
||||
let nodes = dom_tbody.querySelectorAll('.active')
|
||||
for (const node of nodes) {
|
||||
if (node.parentNode == dom_tbody) node.classList.remove('active')
|
||||
}
|
||||
},
|
||||
handleListBtnClick(info) {
|
||||
this.emitEvent('listBtnClick', info)
|
||||
},
|
||||
handleSelectAllData(isSelect) {
|
||||
this.selectdList = isSelect ? [...this.list] : []
|
||||
handleSelectAllData() {
|
||||
this.removeAllSelect()
|
||||
this.selectdList = [...this.list]
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
for (const node of nodes) {
|
||||
node.classList.add('active')
|
||||
}
|
||||
this.$emit('input', [...this.selectdList])
|
||||
},
|
||||
resetSelect() {
|
||||
this.selectdList = false
|
||||
this.selectdList = []
|
||||
},
|
||||
handleTogglePage(page) {
|
||||
this.emitEvent('togglePage', page)
|
||||
},
|
||||
@@ -209,6 +296,10 @@ export default {
|
||||
}
|
||||
.thead {
|
||||
flex: none;
|
||||
tr > th:first-child {
|
||||
color: @color-theme_2-font-label;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
flex: auto;
|
||||
@@ -218,13 +309,18 @@ export default {
|
||||
:global(.badge) {
|
||||
margin-left: 3px;
|
||||
}
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
:global(.badge) {
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
&.copying {
|
||||
.labelQuality, .time {
|
||||
.no-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -254,6 +350,13 @@ export default {
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.tbody {
|
||||
td {
|
||||
&:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
.noitem {
|
||||
p {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import mousetrap from 'mousetrap'
|
||||
let eventHub
|
||||
|
||||
const bindKey = () => {
|
||||
mousetrap.reset()
|
||||
mousetrap.bind('shift', (event, combo) => {
|
||||
eventHub.$emit('shift_down', { event, combo })
|
||||
return false
|
||||
}, 'keydown')
|
||||
mousetrap.bind('shift', (event, combo) => {
|
||||
eventHub.$emit('shift_up', { event, combo })
|
||||
return false
|
||||
}, 'keyup')
|
||||
mousetrap.bind('alt', (event, combo) => {
|
||||
eventHub.$emit('alt_down', { event, combo })
|
||||
return false
|
||||
}, 'keydown')
|
||||
mousetrap.bind('alt', (event, combo) => {
|
||||
eventHub.$emit('alt_up', { event, combo })
|
||||
return false
|
||||
}, 'keyup')
|
||||
mousetrap.bind('mod+a', (event, combo) => {
|
||||
eventHub.$emit('mod+a_down', { event, combo })
|
||||
return false
|
||||
}, 'keydown')
|
||||
mousetrap.bind('mod+a', (event, combo) => {
|
||||
eventHub.$emit('mod+a_up', { event, combo })
|
||||
return false
|
||||
}, 'keyup')
|
||||
}
|
||||
|
||||
const unbindKey = () => {
|
||||
mousetrap.unbind('shift', 'keydown')
|
||||
mousetrap.unbind('shift', 'keyup')
|
||||
mousetrap.unbind('alt', 'keydown')
|
||||
mousetrap.unbind('alt', 'keyup')
|
||||
mousetrap.unbind('mod+a', 'keydown')
|
||||
mousetrap.unbind('mod+a', 'keyup')
|
||||
}
|
||||
|
||||
export default () => {
|
||||
eventHub = window.eventHub
|
||||
|
||||
eventHub.$on('bindKey', bindKey)
|
||||
eventHub.$on('unbindKey', unbindKey)
|
||||
}
|
||||
@@ -14,11 +14,13 @@ import store from './store'
|
||||
|
||||
import '../common/error'
|
||||
|
||||
import bindkey from './config/bindkey'
|
||||
|
||||
sync(store, router)
|
||||
|
||||
// if (!process.env.IS_WEB) {
|
||||
window.eventHub = new Vue()
|
||||
|
||||
// }
|
||||
bindkey()
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
+123
-19
@@ -8,9 +8,7 @@ div(:class="$style.download")
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.nobreak.center(style="width: 37px;")
|
||||
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData"
|
||||
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('view.download.unselect_all') : $t('view.download.select_all')")
|
||||
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')}}
|
||||
@@ -18,10 +16,9 @@ div(:class="$style.download")
|
||||
th.nobreak(style="width: 20%;") {{$t('view.download.action')}}
|
||||
div.scroll(v-if="list.length" :class="$style.tbody")
|
||||
table
|
||||
tbody
|
||||
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)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop) {{index + 1}}
|
||||
td.break(style="width: 28%;")
|
||||
span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
|
||||
td.break(style="width: 22%;") {{item.progress.progress}}%
|
||||
@@ -48,8 +45,6 @@ export default {
|
||||
clickTime: window.performance.now(),
|
||||
clickIndex: -1,
|
||||
selectdData: [],
|
||||
isSelectAll: false,
|
||||
isIndeterminate: false,
|
||||
isShowEditBtn: false,
|
||||
isShowDownloadMultiple: false,
|
||||
tabs: [
|
||||
@@ -75,6 +70,11 @@ export default {
|
||||
},
|
||||
],
|
||||
tabId: 'all',
|
||||
keyEvent: {
|
||||
isShiftDown: false,
|
||||
isAltDown: false,
|
||||
isADown: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -110,22 +110,62 @@ export default {
|
||||
selectdData(n) {
|
||||
const len = n.length
|
||||
if (len) {
|
||||
this.isSelectAll = true
|
||||
this.isIndeterminate = len !== this.showList.length
|
||||
this.isShowEditBtn = true
|
||||
} else {
|
||||
this.isSelectAll = false
|
||||
this.isShowEditBtn = false
|
||||
}
|
||||
},
|
||||
list() {
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.listenEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unlistenEvent()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('download', ['removeTask', 'removeTaskMultiple', 'startTask']),
|
||||
...mapMutations('player', ['setList']),
|
||||
...mapMutations('download', ['pauseTask', 'updateFilePath']),
|
||||
listenEvent() {
|
||||
window.eventHub.$on('shift_down', this.handle_shift_down)
|
||||
window.eventHub.$on('shift_up', this.handle_shift_up)
|
||||
window.eventHub.$on('alt_down', this.handle_alt_down)
|
||||
window.eventHub.$on('alt_up', this.handle_alt_up)
|
||||
window.eventHub.$on('mod+a_down', this.handle_mod_a_down)
|
||||
window.eventHub.$on('mod+a_up', this.handle_mod_a_up)
|
||||
},
|
||||
unlistenEvent() {
|
||||
window.eventHub.$off('shift_down', this.handle_shift_down)
|
||||
window.eventHub.$off('shift_up', this.handle_shift_up)
|
||||
window.eventHub.$off('alt_down', this.handle_alt_down)
|
||||
window.eventHub.$off('alt_up', this.handle_alt_up)
|
||||
window.eventHub.$off('mod+a_down', this.handle_mod_a_down)
|
||||
window.eventHub.$off('mod+a_up', this.handle_mod_a_up)
|
||||
},
|
||||
handle_shift_down() {
|
||||
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
|
||||
},
|
||||
handle_shift_up() {
|
||||
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
|
||||
},
|
||||
handle_alt_down() {
|
||||
if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true
|
||||
},
|
||||
handle_alt_up() {
|
||||
if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false
|
||||
},
|
||||
handle_mod_a_down() {
|
||||
if (!this.keyEvent.isADown) {
|
||||
this.keyEvent.isADown = true
|
||||
this.handleSelectAllData()
|
||||
}
|
||||
},
|
||||
handle_mod_a_up() {
|
||||
if (this.keyEvent.isADown) this.keyEvent.isADown = false
|
||||
},
|
||||
handlePauseTask(index) {
|
||||
let info = this.list[index]
|
||||
let dl = this.dls[info.key]
|
||||
@@ -150,6 +190,8 @@ export default {
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
|
||||
this.handleSelectData(event, index)
|
||||
|
||||
if (
|
||||
window.performance.now() - this.clickTime > 400 ||
|
||||
this.clickIndex !== index
|
||||
@@ -162,6 +204,52 @@ export default {
|
||||
this.clickTime = 0
|
||||
this.clickIndex = -1
|
||||
},
|
||||
handleSelectData(event, clickIndex) {
|
||||
if (this.keyEvent.isShiftDown) {
|
||||
if (this.selectdData.length) {
|
||||
let lastSelectIndex = this.showList.indexOf(this.selectdData[this.selectdData.length - 1])
|
||||
this.removeAllSelect()
|
||||
if (lastSelectIndex != clickIndex) {
|
||||
let isNeedReverse = false
|
||||
if (clickIndex < lastSelectIndex) {
|
||||
let temp = lastSelectIndex
|
||||
lastSelectIndex = clickIndex
|
||||
clickIndex = temp
|
||||
isNeedReverse = true
|
||||
}
|
||||
this.selectdData = this.showList.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectdData.reverse()
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
do {
|
||||
nodes[lastSelectIndex].classList.add('active')
|
||||
lastSelectIndex++
|
||||
} while (lastSelectIndex <= clickIndex)
|
||||
}
|
||||
} else {
|
||||
event.currentTarget.classList.add('active')
|
||||
this.selectdData.push(this.showList[clickIndex])
|
||||
}
|
||||
} else if (this.keyEvent.isAltDown) {
|
||||
let item = this.showList[clickIndex]
|
||||
let index = this.selectdData.indexOf(item)
|
||||
if (index < 0) {
|
||||
this.selectdData.push(item)
|
||||
event.currentTarget.classList.add('active')
|
||||
} else {
|
||||
this.selectdData.splice(index, 1)
|
||||
event.currentTarget.classList.remove('active')
|
||||
}
|
||||
} else if (this.selectdData.length) this.removeAllSelect()
|
||||
},
|
||||
removeAllSelect() {
|
||||
this.selectdData = []
|
||||
let dom_tbody = this.$refs.dom_tbody
|
||||
if (!dom_tbody) return
|
||||
let nodes = dom_tbody.querySelectorAll('.active')
|
||||
for (const node of nodes) {
|
||||
if (node.parentNode == dom_tbody) node.classList.remove('active')
|
||||
}
|
||||
},
|
||||
handleClick(index) {
|
||||
const key = this.showList[index].key
|
||||
index = this.list.findIndex(i => i.key === key)
|
||||
@@ -203,12 +291,14 @@ export default {
|
||||
break
|
||||
}
|
||||
},
|
||||
handleSelectAllData(isSelect) {
|
||||
this.selectdData = isSelect ? [...this.showList] : []
|
||||
},
|
||||
resetSelect() {
|
||||
this.isSelectAll = false
|
||||
this.selectdData = []
|
||||
handleSelectAllData() {
|
||||
this.removeAllSelect()
|
||||
this.selectdData = [...this.showList]
|
||||
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
for (const node of nodes) {
|
||||
node.classList.add('active')
|
||||
}
|
||||
},
|
||||
handleFlowBtnClick(action) {
|
||||
switch (action) {
|
||||
@@ -241,7 +331,7 @@ export default {
|
||||
this.removeTaskMultiple(this.selectdData)
|
||||
break
|
||||
}
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
},
|
||||
handleOpenFolder(index) {
|
||||
let path = this.list[index].filePath
|
||||
@@ -300,12 +390,21 @@ export default {
|
||||
}
|
||||
.thead {
|
||||
flex: none;
|
||||
tr > th:first-child {
|
||||
color: @color-theme_2-font-label;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
td {
|
||||
font-size: 12px;
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
&.active {
|
||||
@@ -322,6 +421,11 @@ each(@themes, {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
td {
|
||||
&:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
+131
-28
@@ -6,9 +6,7 @@
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.nobreak.center(style="width: 37px;")
|
||||
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData"
|
||||
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('view.list.unselect_all') : $t('view.list.select_all')")
|
||||
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')}}
|
||||
@@ -16,14 +14,13 @@
|
||||
th.nobreak(style="width: 10%;") {{$t('view.list.time')}}
|
||||
div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
|
||||
table
|
||||
tbody(@contextmenu="handleContextMenu")
|
||||
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
|
||||
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
|
||||
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
td.break(style="width: 25%;")
|
||||
span.select {{item.name}}
|
||||
span(:class="$style.labelSource" v-if="isShowSource") {{item.source}}
|
||||
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
|
||||
//- span.badge.badge-light(v-if="item._types['128k']") 128K
|
||||
//- span.badge.badge-light(v-if="item._types['192k']") 192K
|
||||
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K
|
||||
@@ -40,7 +37,7 @@
|
||||
//- button.btn-secondary(type='button' @click.stop='handleRemove(index)') 删除
|
||||
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
|
||||
td(style="width: 10%;")
|
||||
span(:class="$style.time") {{item.interval || '--/--'}}
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
div(:class="$style.noItem" v-else)
|
||||
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")
|
||||
@@ -63,8 +60,6 @@ export default {
|
||||
isShowDownload: false,
|
||||
musicInfo: null,
|
||||
selectdData: [],
|
||||
isSelectAll: false,
|
||||
isIndeterminate: false,
|
||||
isShowEditBtn: false,
|
||||
isShowDownloadMultiple: false,
|
||||
delayShow: false,
|
||||
@@ -73,6 +68,11 @@ export default {
|
||||
isShowListAddMultiple: false,
|
||||
delayTimeout: null,
|
||||
isToggleList: true,
|
||||
keyEvent: {
|
||||
isShiftDown: false,
|
||||
isAltDown: false,
|
||||
isADown: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -118,16 +118,13 @@ export default {
|
||||
selectdData(n) {
|
||||
const len = n.length
|
||||
if (len) {
|
||||
this.isSelectAll = true
|
||||
this.isIndeterminate = len !== this.list.length
|
||||
this.isShowEditBtn = true
|
||||
} else {
|
||||
this.isSelectAll = false
|
||||
this.isShowEditBtn = false
|
||||
}
|
||||
},
|
||||
list() {
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
},
|
||||
'$route.query.scrollIndex'(n) {
|
||||
if (n == null || this.isToggleList) return
|
||||
@@ -178,10 +175,14 @@ export default {
|
||||
this.setListScroll({ id: this.listId, location: e.target.scrollTop })
|
||||
}
|
||||
}, 1000)
|
||||
this.listenEvent()
|
||||
},
|
||||
mounted() {
|
||||
this.handleDelayShow()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unlistenEvent()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setListScroll']),
|
||||
...mapMutations('list', ['listRemove', 'listRemoveMultiple']),
|
||||
@@ -189,6 +190,43 @@ export default {
|
||||
...mapMutations('player', {
|
||||
setPlayList: 'setList',
|
||||
}),
|
||||
listenEvent() {
|
||||
window.eventHub.$on('shift_down', this.handle_shift_down)
|
||||
window.eventHub.$on('shift_up', this.handle_shift_up)
|
||||
window.eventHub.$on('alt_down', this.handle_alt_down)
|
||||
window.eventHub.$on('alt_up', this.handle_alt_up)
|
||||
window.eventHub.$on('mod+a_down', this.handle_mod_a_down)
|
||||
window.eventHub.$on('mod+a_up', this.handle_mod_a_up)
|
||||
},
|
||||
unlistenEvent() {
|
||||
window.eventHub.$off('shift_down', this.handle_shift_down)
|
||||
window.eventHub.$off('shift_up', this.handle_shift_up)
|
||||
window.eventHub.$off('alt_down', this.handle_alt_down)
|
||||
window.eventHub.$off('alt_up', this.handle_alt_up)
|
||||
window.eventHub.$off('mod+a_down', this.handle_mod_a_down)
|
||||
window.eventHub.$off('mod+a_up', this.handle_mod_a_up)
|
||||
},
|
||||
handle_shift_down() {
|
||||
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
|
||||
},
|
||||
handle_shift_up() {
|
||||
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
|
||||
},
|
||||
handle_alt_down() {
|
||||
if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true
|
||||
},
|
||||
handle_alt_up() {
|
||||
if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false
|
||||
},
|
||||
handle_mod_a_down() {
|
||||
if (!this.keyEvent.isADown) {
|
||||
this.keyEvent.isADown = true
|
||||
this.handleSelectAllData()
|
||||
}
|
||||
},
|
||||
handle_mod_a_up() {
|
||||
if (this.keyEvent.isADown) this.keyEvent.isADown = false
|
||||
},
|
||||
handleDelayShow() {
|
||||
this.clearDelayTimeout()
|
||||
if (this.list.length > 150) {
|
||||
@@ -234,6 +272,9 @@ export default {
|
||||
},
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
|
||||
this.handleSelectData(event, index)
|
||||
|
||||
if (
|
||||
window.performance.now() - this.clickTime > 400 ||
|
||||
this.clickIndex !== index
|
||||
@@ -246,6 +287,51 @@ export default {
|
||||
this.clickTime = 0
|
||||
this.clickIndex = -1
|
||||
},
|
||||
handleSelectData(event, clickIndex) {
|
||||
if (this.keyEvent.isShiftDown) {
|
||||
if (this.selectdData.length) {
|
||||
let lastSelectIndex = this.list.indexOf(this.selectdData[this.selectdData.length - 1])
|
||||
if (lastSelectIndex == clickIndex) return this.removeAllSelect()
|
||||
this.removeAllSelect()
|
||||
let isNeedReverse = false
|
||||
if (clickIndex < lastSelectIndex) {
|
||||
let temp = lastSelectIndex
|
||||
lastSelectIndex = clickIndex
|
||||
clickIndex = temp
|
||||
isNeedReverse = true
|
||||
}
|
||||
this.selectdData = this.list.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectdData.reverse()
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
do {
|
||||
nodes[lastSelectIndex].classList.add('active')
|
||||
lastSelectIndex++
|
||||
} while (lastSelectIndex <= clickIndex)
|
||||
} else {
|
||||
event.currentTarget.classList.add('active')
|
||||
this.selectdData.push(this.list[clickIndex])
|
||||
}
|
||||
} else if (this.keyEvent.isAltDown) {
|
||||
let item = this.list[clickIndex]
|
||||
let index = this.selectdData.indexOf(item)
|
||||
if (index < 0) {
|
||||
this.selectdData.push(item)
|
||||
event.currentTarget.classList.add('active')
|
||||
} else {
|
||||
this.selectdData.splice(index, 1)
|
||||
event.currentTarget.classList.remove('active')
|
||||
}
|
||||
} else if (this.selectdData.length) this.removeAllSelect()
|
||||
},
|
||||
removeAllSelect() {
|
||||
this.selectdData = []
|
||||
let dom_tbody = this.$refs.dom_tbody
|
||||
if (!dom_tbody) return
|
||||
let nodes = dom_tbody.querySelectorAll('.active')
|
||||
for (const node of nodes) {
|
||||
if (node.parentNode == dom_tbody) node.classList.remove('active')
|
||||
}
|
||||
},
|
||||
testPlay(index) {
|
||||
if (this.isAPITemp && this.list[index].source != 'kw') return
|
||||
this.setPlayList({ list: this.list, listId: this.listId, index })
|
||||
@@ -282,18 +368,19 @@ export default {
|
||||
this.createDownload({ musicInfo: this.musicInfo, type })
|
||||
this.isShowDownload = false
|
||||
},
|
||||
handleSelectAllData(isSelect) {
|
||||
this.selectdData = isSelect ? [...this.list] : []
|
||||
handleSelectAllData() {
|
||||
this.removeAllSelect()
|
||||
this.selectdData = [...this.list]
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
for (const node of nodes) {
|
||||
node.classList.add('active')
|
||||
}
|
||||
// asyncSetArray(this.selectdData, isSelect ? [...this.list] : [])
|
||||
},
|
||||
resetSelect() {
|
||||
this.isSelectAll = false
|
||||
this.selectdData = []
|
||||
},
|
||||
handleAddDownloadMultiple(type) {
|
||||
const list = this.setting.apiSource == 'temp' ? this.selectdData.filter(s => s.source == 'kw') : [...this.selectdData]
|
||||
this.createDownloadMultiple({ list, type })
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
this.isShowDownloadMultiple = false
|
||||
},
|
||||
handleFlowBtnClick(action) {
|
||||
@@ -303,15 +390,15 @@ export default {
|
||||
break
|
||||
case 'remove':
|
||||
this.listRemoveMultiple({ id: this.listId, list: this.selectdData })
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
break
|
||||
case 'add':
|
||||
this.isShowListAddMultiple = true
|
||||
break
|
||||
}
|
||||
},
|
||||
handleListAddModalClose(isSelect) {
|
||||
if (isSelect) this.resetSelect()
|
||||
handleListAddModalClose(isClearSelect) {
|
||||
if (isClearSelect) this.removeAllSelect()
|
||||
this.isShowListAddMultiple = false
|
||||
},
|
||||
getMusicLocation(index) {
|
||||
@@ -365,21 +452,32 @@ export default {
|
||||
}
|
||||
.thead {
|
||||
flex: none;
|
||||
tr > th:first-child {
|
||||
color: @color-theme_2-font-label;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
td {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
tr {
|
||||
&.active {
|
||||
color: @color-theme;
|
||||
}
|
||||
}
|
||||
td {
|
||||
font-size: 12px;
|
||||
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
|
||||
&.copying {
|
||||
.labelSource, .time {
|
||||
.no-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -419,6 +517,11 @@ each(@themes, {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
td {
|
||||
&:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
.labelSource {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
|
||||
+133
-27
@@ -8,9 +8,7 @@
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.nobreak.center(style="width: 37px;")
|
||||
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData"
|
||||
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('view.search.unselect_all') : $t('view.search.select_all')")
|
||||
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')}}
|
||||
@@ -18,15 +16,14 @@
|
||||
th.nobreak(style="width: 10%;") {{$t('view.search.time')}}
|
||||
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody(@contextmenu="handleContextMenu")
|
||||
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;" @click.stop)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
|
||||
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
td.break(style="width: 25%;")
|
||||
span.select {{item.name}}
|
||||
span.badge.badge-theme-success(:class="$style.labelQuality" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
|
||||
span.badge.badge-theme-info(:class="$style.labelQuality" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
|
||||
span(:class="$style.labelSource" v-if="searchSourceId == 'all'") {{item.source}}
|
||||
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%;")
|
||||
span.select {{item.singer}}
|
||||
td.break(style="width: 25%;")
|
||||
@@ -37,7 +34,7 @@
|
||||
:download-btn="item.source == 'kw' || !isAPITemp"
|
||||
@btn-click="handleListBtnClick")
|
||||
td(style="width: 10%;")
|
||||
span(:class="$style.time") {{item.interval || '--/--'}}
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="listInfo.total" :limit="listInfo.limit" :page="page" @btn-click="handleTogglePage")
|
||||
div(v-else :class="$style.noitem")
|
||||
@@ -76,13 +73,16 @@ export default {
|
||||
isShowDownload: false,
|
||||
musicInfo: null,
|
||||
selectdData: [],
|
||||
isSelectAll: false,
|
||||
isIndeterminate: false,
|
||||
isShowEditBtn: false,
|
||||
isShowDownloadMultiple: false,
|
||||
searchSourceId: null,
|
||||
isShowListAdd: false,
|
||||
isShowListAddMultiple: false,
|
||||
keyEvent: {
|
||||
isShiftDown: false,
|
||||
isAltDown: false,
|
||||
isADown: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
@@ -92,6 +92,12 @@ export default {
|
||||
this.handleSearch(this.text, this.page)
|
||||
next()
|
||||
},
|
||||
created() {
|
||||
this.listenEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unlistenEvent()
|
||||
},
|
||||
mounted() {
|
||||
// console.log('mounted')
|
||||
|
||||
@@ -118,16 +124,13 @@ export default {
|
||||
selectdData(n) {
|
||||
const len = n.length
|
||||
if (len) {
|
||||
this.isSelectAll = true
|
||||
this.isIndeterminate = len !== this.listInfo.list.length
|
||||
this.isShowEditBtn = true
|
||||
} else {
|
||||
this.isSelectAll = false
|
||||
this.isShowEditBtn = false
|
||||
}
|
||||
},
|
||||
'listInfo.list'() {
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
},
|
||||
searchSourceId(n) {
|
||||
if (n === this.setting.search.searchSource) return
|
||||
@@ -165,6 +168,43 @@ export default {
|
||||
...mapActions('hotSearch', {
|
||||
getHotSearch: 'getList',
|
||||
}),
|
||||
listenEvent() {
|
||||
window.eventHub.$on('shift_down', this.handle_shift_down)
|
||||
window.eventHub.$on('shift_up', this.handle_shift_up)
|
||||
window.eventHub.$on('alt_down', this.handle_alt_down)
|
||||
window.eventHub.$on('alt_up', this.handle_alt_up)
|
||||
window.eventHub.$on('mod+a_down', this.handle_mod_a_down)
|
||||
window.eventHub.$on('mod+a_up', this.handle_mod_a_up)
|
||||
},
|
||||
unlistenEvent() {
|
||||
window.eventHub.$off('shift_down', this.handle_shift_down)
|
||||
window.eventHub.$off('shift_up', this.handle_shift_up)
|
||||
window.eventHub.$off('alt_down', this.handle_alt_down)
|
||||
window.eventHub.$off('alt_up', this.handle_alt_up)
|
||||
window.eventHub.$off('mod+a_down', this.handle_mod_a_down)
|
||||
window.eventHub.$off('mod+a_up', this.handle_mod_a_up)
|
||||
},
|
||||
handle_shift_down() {
|
||||
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
|
||||
},
|
||||
handle_shift_up() {
|
||||
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
|
||||
},
|
||||
handle_alt_down() {
|
||||
if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true
|
||||
},
|
||||
handle_alt_up() {
|
||||
if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false
|
||||
},
|
||||
handle_mod_a_down() {
|
||||
if (!this.keyEvent.isADown) {
|
||||
this.keyEvent.isADown = true
|
||||
this.handleSelectAllData()
|
||||
}
|
||||
},
|
||||
handle_mod_a_up() {
|
||||
if (this.keyEvent.isADown) this.keyEvent.isADown = false
|
||||
},
|
||||
handleSearch(text, page) {
|
||||
if (text === '') return this.clearList()
|
||||
|
||||
@@ -177,6 +217,9 @@ export default {
|
||||
},
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
|
||||
this.handleSelectData(event, index)
|
||||
|
||||
if (
|
||||
window.performance.now() - this.clickTime > 400 ||
|
||||
this.clickIndex !== index
|
||||
@@ -208,6 +251,52 @@ export default {
|
||||
break
|
||||
}
|
||||
},
|
||||
handleSelectData(event, clickIndex) {
|
||||
if (this.keyEvent.isShiftDown) {
|
||||
if (this.selectdData.length) {
|
||||
let lastSelectIndex = this.listInfo.list.indexOf(this.selectdData[this.selectdData.length - 1])
|
||||
this.removeAllSelect()
|
||||
if (lastSelectIndex != clickIndex) {
|
||||
let isNeedReverse = false
|
||||
if (clickIndex < lastSelectIndex) {
|
||||
let temp = lastSelectIndex
|
||||
lastSelectIndex = clickIndex
|
||||
clickIndex = temp
|
||||
isNeedReverse = true
|
||||
}
|
||||
this.selectdData = this.listInfo.list.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectdData.reverse()
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
do {
|
||||
nodes[lastSelectIndex].classList.add('active')
|
||||
lastSelectIndex++
|
||||
} while (lastSelectIndex <= clickIndex)
|
||||
}
|
||||
} else {
|
||||
event.currentTarget.classList.add('active')
|
||||
this.selectdData.push(this.listInfo.list[clickIndex])
|
||||
}
|
||||
} else if (this.keyEvent.isAltDown) {
|
||||
let item = this.listInfo.list[clickIndex]
|
||||
let index = this.selectdData.indexOf(item)
|
||||
if (index < 0) {
|
||||
this.selectdData.push(item)
|
||||
event.currentTarget.classList.add('active')
|
||||
} else {
|
||||
this.selectdData.splice(index, 1)
|
||||
event.currentTarget.classList.remove('active')
|
||||
}
|
||||
} else if (this.selectdData.length) this.removeAllSelect()
|
||||
},
|
||||
removeAllSelect() {
|
||||
this.selectdData = []
|
||||
let dom_tbody = this.$refs.dom_tbody
|
||||
if (!dom_tbody) return
|
||||
let nodes = dom_tbody.querySelectorAll('.active')
|
||||
for (const node of nodes) {
|
||||
if (node.parentNode == dom_tbody) node.classList.remove('active')
|
||||
}
|
||||
},
|
||||
testPlay(index) {
|
||||
let targetSong
|
||||
if (index == null) {
|
||||
@@ -238,15 +327,16 @@ export default {
|
||||
},
|
||||
handleAddDownloadMultiple(type) {
|
||||
this.createDownloadMultiple({ list: this.filterList(this.selectdData), type })
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
this.isShowDownloadMultiple = false
|
||||
},
|
||||
handleSelectAllData(isSelect) {
|
||||
this.selectdData = isSelect ? [...this.listInfo.list] : []
|
||||
},
|
||||
resetSelect() {
|
||||
this.isSelectAll = false
|
||||
this.selectdData = []
|
||||
handleSelectAllData() {
|
||||
this.removeAllSelect()
|
||||
this.selectdData = [...this.listInfo.list]
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
for (const node of nodes) {
|
||||
node.classList.add('active')
|
||||
}
|
||||
},
|
||||
handleFlowBtnClick(action) {
|
||||
switch (action) {
|
||||
@@ -255,7 +345,7 @@ export default {
|
||||
break
|
||||
case 'play':
|
||||
this.testPlay()
|
||||
this.resetSelect()
|
||||
this.removeAllSelect()
|
||||
break
|
||||
case 'add':
|
||||
this.isShowListAddMultiple = true
|
||||
@@ -265,8 +355,8 @@ export default {
|
||||
filterList(list) {
|
||||
return this.setting.apiSource == 'temp' ? list.filter(s => s.source == 'kw') : [...list]
|
||||
},
|
||||
handleListAddModalClose(isSelect) {
|
||||
if (isSelect) this.resetSelect()
|
||||
handleListAddModalClose(isClearSelect) {
|
||||
if (isClearSelect) this.removeAllSelect()
|
||||
this.isShowListAddMultiple = false
|
||||
},
|
||||
handleContextMenu(event) {
|
||||
@@ -320,6 +410,10 @@ export default {
|
||||
}
|
||||
.thead {
|
||||
flex: none;
|
||||
tr > th:first-child {
|
||||
color: @color-theme_2-font-label;
|
||||
// padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
flex: auto;
|
||||
@@ -329,13 +423,18 @@ export default {
|
||||
:global(.badge) {
|
||||
margin-left: 3px;
|
||||
}
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
:global(.badge) {
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
&.copying {
|
||||
.labelQuality, .labelSource, .time {
|
||||
.no-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -446,6 +545,13 @@ each(@themes, {
|
||||
background-color: ~'@{color-@{value}-theme_2-active}';
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
td {
|
||||
&:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
.history-clear-btn {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
&:hover {
|
||||
|
||||
Reference in New Issue
Block a user