583 lines
18 KiB
Vue
583 lines
18 KiB
Vue
<template lang="pug">
|
|
div(:class="$style.search")
|
|
//- transition
|
|
div(:class="$style.header")
|
|
material-tab(:class="$style.tab" :list="sources" align="left" item-key="id" item-name="name" v-model="searchSourceId")
|
|
div(v-if="listInfo.list.length" :class="$style.list")
|
|
div(:class="$style.thead")
|
|
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: 15%;") {{$t('view.search.action')}}
|
|
th.nobreak(style="width: 10%;") {{$t('view.search.time')}}
|
|
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%;")
|
|
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%;")
|
|
span.select {{item.singer}}
|
|
td.break(style="width: 25%;")
|
|
span.select {{item.albumName}}
|
|
td(style="width: 15%; 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)"
|
|
@btn-click="handleListBtnClick")
|
|
td(style="width: 10%;")
|
|
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")
|
|
div.scroll(:class="$style.noitemListContainer" v-if="setting.search.isShowHotSearch || setting.search.isShowHistorySearch")
|
|
dl(:class="[$style.noitemList, $style.noitemHotSearchList]" v-if="setting.search.isShowHotSearch")
|
|
dt(:class="$style.noitemListTitle") {{$t('view.search.hot_search')}}
|
|
dd(:class="$style.noitemListItem" @click="handleNoitemSearch(item)" v-for="item in hotSearchList") {{item}}
|
|
dl(:class="$style.noitemList" v-if="setting.search.isShowHistorySearch && historyList.length")
|
|
dt(:class="$style.noitemListTitle")
|
|
span {{$t('view.search.history_search')}}
|
|
span(:class="$style.historyClearBtn" @click="clearHistory" :title="$t('view.search.history_clear')")
|
|
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
|
|
use(xlink:href='#icon-eraser')
|
|
dd(:class="$style.noitemListItem" v-for="(item, index) in historyList" @contextmenu="removeHistory(index)" :key="index + item" @click="handleNoitemSearch(item)" :title="$t('view.search.history_remove')") {{item}}
|
|
div(v-else :class="$style.noitem_list")
|
|
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")
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions, mapMutations } from 'vuex'
|
|
import { scrollTo, clipboardWriteText, assertApiSupport } from '../utils'
|
|
// import music from '../utils/music'
|
|
export default {
|
|
name: 'Search',
|
|
data() {
|
|
return {
|
|
page: 0,
|
|
text: '',
|
|
clickTime: 0,
|
|
clickIndex: -1,
|
|
isShowDownload: false,
|
|
musicInfo: null,
|
|
selectdData: [],
|
|
isShowEditBtn: false,
|
|
isShowDownloadMultiple: false,
|
|
searchSourceId: null,
|
|
isShowListAdd: false,
|
|
isShowListAddMultiple: false,
|
|
keyEvent: {
|
|
isShiftDown: false,
|
|
isModDown: false,
|
|
isADown: false,
|
|
aDownTimeout: null,
|
|
},
|
|
}
|
|
},
|
|
beforeRouteUpdate(to, from, next) {
|
|
if (to.query.text === undefined) return
|
|
this.text = to.query.text
|
|
this.page = 1
|
|
this.handleSearch(this.text, this.page)
|
|
next()
|
|
},
|
|
created() {
|
|
this.listenEvent()
|
|
},
|
|
beforeDestroy() {
|
|
this.unlistenEvent()
|
|
},
|
|
mounted() {
|
|
// console.log('mounted')
|
|
|
|
// 处理搜索源不存在时页面报错的问题
|
|
if (!this.sourceList[this.setting.search.searchSource]) {
|
|
this.setSearchSource({
|
|
searchSource: 'kw',
|
|
})
|
|
}
|
|
this.searchSourceId = this.setting.search.searchSource
|
|
if (this.$route.query.text === undefined) {
|
|
this.text = this.$store.getters['search/searchText']
|
|
this.page = this.listInfo.page
|
|
} else if (this.$route.query.text === '') {
|
|
this.clearList()
|
|
} else {
|
|
this.text = this.$route.query.text
|
|
this.page = 1
|
|
this.handleSearch(this.text, this.page)
|
|
}
|
|
this.handleGetHotSearch()
|
|
},
|
|
watch: {
|
|
selectdData(n) {
|
|
const len = n.length
|
|
if (len) {
|
|
this.isShowEditBtn = true
|
|
} else {
|
|
this.isShowEditBtn = false
|
|
}
|
|
},
|
|
'listInfo.list'() {
|
|
this.removeAllSelect()
|
|
},
|
|
searchSourceId(n) {
|
|
if (n === this.setting.search.searchSource) return
|
|
this.$nextTick(() => {
|
|
this.page = 1
|
|
this.handleSearch(this.text, this.page)
|
|
this.handleGetHotSearch()
|
|
})
|
|
this.setSearchSource({
|
|
searchSource: n,
|
|
})
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo', 'setting']),
|
|
...mapGetters('search', ['sourceList', 'allList', 'sources', 'historyList']),
|
|
...mapGetters('list', ['defaultList']),
|
|
listInfo() {
|
|
return this.setting.search.searchSource == 'all' ? this.allList : this.sourceList[this.setting.search.searchSource]
|
|
},
|
|
hotSearchList() {
|
|
return this.$store.getters['hotSearch/list'][this.setting.search.searchSource] || []
|
|
},
|
|
},
|
|
methods: {
|
|
...mapMutations(['setSearchSource']),
|
|
...mapActions('search', ['search']),
|
|
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
|
|
...mapMutations('search', ['clearList', 'setPage', 'removeHistory', 'clearHistory']),
|
|
...mapMutations('list', ['listAdd', 'listAddMultiple']),
|
|
...mapMutations('player', ['setList']),
|
|
...mapActions('hotSearch', {
|
|
getHotSearch: 'getList',
|
|
}),
|
|
listenEvent() {
|
|
window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
|
|
window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
|
|
window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
|
|
window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
|
|
window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
|
|
window.eventHub.$on('key_mod+a_up', this.handle_key_mod_a_up)
|
|
},
|
|
unlistenEvent() {
|
|
window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
|
|
window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
|
|
window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
|
|
window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
|
|
window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
|
|
window.eventHub.$off('key_mod+a_up', this.handle_key_mod_a_up)
|
|
},
|
|
handle_key_shift_down() {
|
|
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
|
|
},
|
|
handle_key_shift_up() {
|
|
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
|
|
},
|
|
handle_key_mod_down() {
|
|
if (!this.keyEvent.isModDown) this.keyEvent.isModDown = true
|
|
},
|
|
handle_key_mod_up() {
|
|
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
|
|
},
|
|
handle_key_mod_a_down() {
|
|
if (!this.keyEvent.isADown) {
|
|
this.keyEvent.isModDown = false
|
|
this.keyEvent.isADown = true
|
|
this.handleSelectAllData()
|
|
if (this.keyEvent.aDownTimeout) clearTimeout(this.keyEvent.aDownTimeout)
|
|
this.keyEvent.aDownTimeout = setTimeout(() => {
|
|
this.keyEvent.aDownTimeout = null
|
|
this.keyEvent.isADown = false
|
|
}, 500)
|
|
}
|
|
},
|
|
handle_key_mod_a_up() {
|
|
if (this.keyEvent.isADown) {
|
|
if (this.keyEvent.aDownTimeout) {
|
|
clearTimeout(this.keyEvent.aDownTimeout)
|
|
this.keyEvent.aDownTimeout = null
|
|
}
|
|
this.keyEvent.isADown = false
|
|
}
|
|
},
|
|
handleSearch(text, page) {
|
|
if (text === '') return this.clearList()
|
|
|
|
this.search({ text, page, limit: this.listInfo.limit }).then(data => {
|
|
this.page = page
|
|
this.$nextTick(() => {
|
|
scrollTo(this.$refs.dom_scrollContent, 0)
|
|
})
|
|
})
|
|
},
|
|
handleDoubleClick(event, index) {
|
|
if (event.target.classList.contains('select')) return
|
|
|
|
this.handleSelectData(event, index)
|
|
|
|
if (
|
|
window.performance.now() - this.clickTime > 400 ||
|
|
this.clickIndex !== index
|
|
) {
|
|
this.clickTime = window.performance.now()
|
|
this.clickIndex = index
|
|
return
|
|
}
|
|
this.testPlay(index)
|
|
this.clickTime = 0
|
|
this.clickIndex = -1
|
|
},
|
|
handleListBtnClick(info) {
|
|
switch (info.action) {
|
|
case 'download':
|
|
this.musicInfo = this.listInfo.list[info.index]
|
|
this.$nextTick(() => {
|
|
this.isShowDownload = true
|
|
})
|
|
break
|
|
case 'play':
|
|
this.testPlay(info.index)
|
|
break
|
|
case 'listAdd':
|
|
this.musicInfo = this.listInfo.list[info.index]
|
|
this.$nextTick(() => {
|
|
this.isShowListAdd = true
|
|
})
|
|
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.isModDown) {
|
|
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) {
|
|
targetSong = this.selectdData[0]
|
|
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
|
|
} else {
|
|
if (!this.assertApiSupport(this.listInfo.list[index].source)) return
|
|
targetSong = this.listInfo.list[index]
|
|
this.listAdd({ id: 'default', musicInfo: targetSong })
|
|
}
|
|
let targetIndex = this.defaultList.list.findIndex(
|
|
s => s.songmid === targetSong.songmid,
|
|
)
|
|
if (targetIndex > -1) {
|
|
this.setList({
|
|
list: this.defaultList.list,
|
|
listId: this.defaultList.id,
|
|
index: targetIndex,
|
|
})
|
|
}
|
|
},
|
|
handleTogglePage(page) {
|
|
this.handleSearch(this.text, page)
|
|
},
|
|
handleAddDownload(type) {
|
|
this.createDownload({ musicInfo: this.musicInfo, type })
|
|
this.isShowDownload = false
|
|
},
|
|
handleAddDownloadMultiple(type) {
|
|
this.createDownloadMultiple({ list: this.filterList(this.selectdData), type })
|
|
this.removeAllSelect()
|
|
this.isShowDownloadMultiple = false
|
|
},
|
|
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) {
|
|
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()
|
|
this.isShowListAddMultiple = false
|
|
},
|
|
handleContextMenu(event) {
|
|
if (!event.target.classList.contains('select')) return
|
|
let classList = this.$refs.dom_scrollContent.classList
|
|
classList.add(this.$style.copying)
|
|
window.requestAnimationFrame(() => {
|
|
let str = window.getSelection().toString()
|
|
classList.remove(this.$style.copying)
|
|
str = str.trim()
|
|
if (!str.length) return
|
|
clipboardWriteText(str)
|
|
})
|
|
},
|
|
handleGetHotSearch() {
|
|
if (this.hotSearchList.length || !this.setting.search.isShowHotSearch) return
|
|
this.getHotSearch(this.setting.search.searchSource)
|
|
},
|
|
handleNoitemSearch(text) {
|
|
this.$router.push({
|
|
path: 'search',
|
|
query: {
|
|
text,
|
|
},
|
|
})
|
|
},
|
|
assertApiSupport(source) {
|
|
return assertApiSupport(source)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" module>
|
|
@import '../assets/styles/layout.less';
|
|
|
|
.search {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
.header {
|
|
flex: none;
|
|
}
|
|
.list {
|
|
position: relative;
|
|
height: 100%;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
flex: auto;
|
|
overflow: hidden;
|
|
}
|
|
.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;
|
|
:global(.badge) {
|
|
margin-left: 3px;
|
|
}
|
|
&:first-child {
|
|
// padding-left: 10px;
|
|
font-size: 11px;
|
|
color: @color-theme_2-font-label;
|
|
}
|
|
}
|
|
:global(.badge) {
|
|
opacity: .85;
|
|
}
|
|
|
|
&.copying {
|
|
.no-select {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.listBtn {
|
|
min-height: 24px;
|
|
}
|
|
.labelSource {
|
|
color: @color-theme;
|
|
padding: 5px;
|
|
font-size: .8em;
|
|
line-height: 1;
|
|
opacity: .75;
|
|
}
|
|
.pagination {
|
|
text-align: center;
|
|
padding: 15px 0;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
}
|
|
.noitem {
|
|
flex: auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
|
|
p {
|
|
font-size: 24px;
|
|
color: @color-theme_2-font-label;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.noitem-list-container {
|
|
padding: 0 15px;
|
|
margin-top: -20px;
|
|
min-height: 300px;
|
|
max-height: 94.7%;
|
|
}
|
|
.noitem-list {
|
|
+.noitem-list {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
.noitem-hot-search-list {
|
|
min-height: 106px;
|
|
}
|
|
.noitem-list-title {
|
|
color: @color-theme_2-font-label;
|
|
padding: 5px;
|
|
font-size: 14px;
|
|
}
|
|
.noitem-list-item {
|
|
display: inline-block;
|
|
margin: 3px 5px;
|
|
background-color: @color-btn-background;
|
|
padding: 7px 10px;
|
|
border-radius: @radius-progress-border;
|
|
transition: background-color @transition-theme;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: @color-btn;
|
|
.mixin-ellipsis-1;
|
|
max-width: 150px;
|
|
&:hover {
|
|
background-color: @color-theme_2-hover;
|
|
}
|
|
&:active {
|
|
background-color: @color-theme_2-active;
|
|
}
|
|
}
|
|
.history-clear-btn {
|
|
padding: 0 5px;
|
|
margin-left: 5px;
|
|
color: @color-theme_2-font-label;
|
|
cursor: pointer;
|
|
transition: color @transition-theme;
|
|
&:hover {
|
|
color: @color-theme-hover;
|
|
}
|
|
&:active {
|
|
color: @color-theme-active;
|
|
}
|
|
svg {
|
|
vertical-align: middle;
|
|
width: 15px;
|
|
}
|
|
}
|
|
|
|
each(@themes, {
|
|
:global(#container.@{value}) {
|
|
.noitem {
|
|
p {
|
|
color: ~'@{color-@{value}-theme_2-font-label}';
|
|
}
|
|
}
|
|
.noitem-list-title {
|
|
color: ~'@{color-@{value}-theme_2-font-label}';
|
|
}
|
|
.noitem-list-item {
|
|
color: ~'@{color-@{value}-btn}';
|
|
background-color: ~'@{color-@{value}-btn-background}';
|
|
&:hover {
|
|
background-color: ~'@{color-@{value}-theme_2-hover}';
|
|
}
|
|
&:active {
|
|
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 {
|
|
color: ~'@{color-@{value}-theme-hover}';
|
|
}
|
|
&:active {
|
|
color: ~'@{color-@{value}-theme-active}';
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</style>
|