优化我的列表、下载、歌单、排行榜列表性能
This commit is contained in:
lyswhut
@@ -14,21 +14,22 @@ div(:class="$style.download")
|
||||
th.nobreak(style="width: 22%;") {{$t('view.download.status')}}
|
||||
th.nobreak(style="width: 10%;") {{$t('view.download.quality')}}
|
||||
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' @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: 20%;") {{item.progress.progress}}%
|
||||
td.break(style="width: 22%;") {{item.statusText}}
|
||||
td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
|
||||
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")
|
||||
div(v-if="list.length" :class="$style.content" ref="dom_listContent")
|
||||
material-virtualized-list(:list="showList" key-name="key" ref="list" :item-height="37" #default="{ item, index }"
|
||||
containerClass="scroll" contentClass="list")
|
||||
div.list-item(@click="handleDoubleClick($event, index)" @contextmenu="handleListItemRigthClick($event, index)"
|
||||
:class="[{[$style.active]: playListIndex == index }, { selected: selectedIndex == index }, { active: selectedData.includes(item) }]")
|
||||
div.list-item-cell.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
|
||||
div.list-item-cell.auto
|
||||
span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
|
||||
div.list-item-cell(style="width: 20%;") {{item.progress.progress}}%
|
||||
div.list-item-cell(style="width: 22%;") {{item.statusText}}
|
||||
div.list-item-cell(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
|
||||
div.list-item-cell(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-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
|
||||
div(:class="$style.noItem" v-else)
|
||||
</template>
|
||||
@@ -52,8 +53,10 @@ export default {
|
||||
isShiftDown: false,
|
||||
isModDown: false,
|
||||
},
|
||||
selectedIndex: -1,
|
||||
lastSelectIndex: 0,
|
||||
listMenu: {
|
||||
rightClickItemIndex: -1,
|
||||
isShowItemMenu: false,
|
||||
itemMenuControl: {
|
||||
play: true,
|
||||
@@ -217,7 +220,7 @@ export default {
|
||||
this.handleSelectAllData()
|
||||
},
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
if (this.listMenu.rightClickItemIndex > -1) return
|
||||
|
||||
this.handleSelectData(event, index)
|
||||
|
||||
@@ -248,14 +251,8 @@ export default {
|
||||
}
|
||||
this.selectedData = this.showList.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectedData.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.selectedData.push(this.showList[clickIndex])
|
||||
this.lastSelectIndex = clickIndex
|
||||
}
|
||||
@@ -265,21 +262,13 @@ export default {
|
||||
let index = this.selectedData.indexOf(item)
|
||||
if (index < 0) {
|
||||
this.selectedData.push(item)
|
||||
event.currentTarget.classList.add('active')
|
||||
} else {
|
||||
this.selectedData.splice(index, 1)
|
||||
event.currentTarget.classList.remove('active')
|
||||
}
|
||||
} else if (this.selectedData.length) this.removeAllSelect()
|
||||
},
|
||||
removeAllSelect() {
|
||||
this.selectedData = []
|
||||
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
|
||||
@@ -323,11 +312,6 @@ export default {
|
||||
handleSelectAllData() {
|
||||
this.removeAllSelect()
|
||||
this.selectedData = [...this.showList]
|
||||
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
for (const node of nodes) {
|
||||
node.classList.add('active')
|
||||
}
|
||||
},
|
||||
// async handleFlowBtnClick(action) {
|
||||
// let selectedData = [...this.selectedData]
|
||||
@@ -363,13 +347,19 @@ export default {
|
||||
},
|
||||
handleListItemRigthClick(event, index) {
|
||||
this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.showList[index].musicInfo.source].getMusicDetailPageUrl
|
||||
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 = event.target.closest('td')
|
||||
let dom_container = event.target.closest('.' + this.$style.download)
|
||||
const getOffsetValue = (target, x = 0, y = 0) => {
|
||||
if (target === dom_container) return { x, y }
|
||||
if (!target) return { x: 0, y: 0 }
|
||||
x += target.offsetLeft
|
||||
y += target.offsetTop
|
||||
return getOffsetValue(target.offsetParent, x, y)
|
||||
}
|
||||
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.selectedIndex = index
|
||||
let { x, y } = getOffsetValue(event.target)
|
||||
this.listMenu.menuLocation.x = x + event.offsetX
|
||||
this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.list.getScrollTop()
|
||||
|
||||
let item = this.showList[index]
|
||||
if (item.isComplate) {
|
||||
@@ -397,8 +387,7 @@ export default {
|
||||
})
|
||||
},
|
||||
hideListMenu() {
|
||||
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
|
||||
if (dom_selected) dom_selected.classList.remove('selected')
|
||||
this.selectedIndex = -1
|
||||
this.listMenu.isShowItemMenu = false
|
||||
this.listMenu.rightClickItemIndex = -1
|
||||
},
|
||||
@@ -524,18 +513,18 @@ export default {
|
||||
// padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
:global(.list) {
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
td {
|
||||
font-size: 12px;
|
||||
:global(.list-item-cell) {
|
||||
font-size: 12px !important;
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px;
|
||||
color: @color-theme_2-font-label;
|
||||
font-size: 11px !important;
|
||||
color: @color-theme_2-font-label !important;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
:global(.list-item) {
|
||||
&.active {
|
||||
color: @color-btn;
|
||||
}
|
||||
@@ -544,17 +533,17 @@ export default {
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.tbody {
|
||||
tr {
|
||||
&.active {
|
||||
color: ~'@{color-@{value}-btn}';
|
||||
}
|
||||
}
|
||||
td {
|
||||
:global(.list) {
|
||||
:global(.list-item-cell) {
|
||||
&:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
:global(.list-item) {
|
||||
&.active {
|
||||
color: ~'@{color-@{value}-btn}' !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
@contextmenu="handleListsItemRigthClick($event, index)")
|
||||
span(:class="$style.listsLabel") {{item.name}}
|
||||
div(:class="$style.list")
|
||||
material-song-list(v-model="selectedData" ref="songList" :hideListsMenu="hideListsMenu" :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-song-list(v-model="selectedData" ref="songList" :hideListsMenu="hideListsMenu" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="listInfo.limit" :total="listInfo.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="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
|
||||
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
|
||||
@@ -56,11 +56,18 @@ export default {
|
||||
y: 0,
|
||||
},
|
||||
},
|
||||
listInfo: {
|
||||
list: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
limit: 30,
|
||||
key: null,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['setting']),
|
||||
...mapGetters('leaderboard', ['sources', 'boards', 'list', 'info']),
|
||||
...mapGetters('leaderboard', ['sources', 'boards', 'info']),
|
||||
...mapGetters('list', ['defaultList']),
|
||||
boardList() {
|
||||
return this.source && this.boards[this.source] ? this.boards[this.source] : []
|
||||
@@ -79,13 +86,22 @@ export default {
|
||||
},
|
||||
]
|
||||
},
|
||||
list() {
|
||||
return this.listInfo.list
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
tabId(n, o) {
|
||||
this.setLeaderboard({ tabId: n })
|
||||
if (!n || (!o && this.page !== 1)) return
|
||||
this.getList(1).then(() => {
|
||||
this.page = this.info.page
|
||||
this.listInfo.list = []
|
||||
this.getList(1).then(listInfo => {
|
||||
this.listInfo.list = listInfo.list
|
||||
this.listInfo.total = listInfo.total
|
||||
this.listInfo.limit = listInfo.limit
|
||||
this.listInfo.page = listInfo.page
|
||||
this.listInfo.key = listInfo.key
|
||||
this.page = listInfo.page
|
||||
})
|
||||
},
|
||||
source(n, o) {
|
||||
@@ -102,7 +118,7 @@ export default {
|
||||
mounted() {
|
||||
this.source = this.setting.leaderboard.source
|
||||
this.tabId = this.setting.leaderboard.tabId
|
||||
this.page = this.info.page
|
||||
this.page = this.listInfo.page
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setLeaderboard']),
|
||||
@@ -206,8 +222,14 @@ export default {
|
||||
})
|
||||
},
|
||||
handleTogglePage(page) {
|
||||
this.getList(page).then(() => {
|
||||
this.page = this.info.page
|
||||
this.listInfo.list = []
|
||||
this.getList(page).then(listInfo => {
|
||||
this.listInfo.list = listInfo.list
|
||||
this.listInfo.total = listInfo.total
|
||||
this.listInfo.limit = listInfo.limit
|
||||
this.listInfo.page = listInfo.page
|
||||
this.listInfo.key = listInfo.key
|
||||
this.page = listInfo.page
|
||||
})
|
||||
},
|
||||
handleAddDownload(type) {
|
||||
@@ -381,7 +403,7 @@ export default {
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
:global(.list) {
|
||||
:global(.selection-list) {
|
||||
max-height: 500px;
|
||||
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
|
||||
li {
|
||||
@@ -465,7 +487,7 @@ each(@themes, {
|
||||
:global(.label) {
|
||||
color: ~'@{color-@{value}-theme_2-font}' !important;
|
||||
}
|
||||
:global(.list) {
|
||||
:global(.selection-list) {
|
||||
li {
|
||||
background-color: ~'@{color-@{value}-theme_2-background_2}';
|
||||
&:hover {
|
||||
|
||||
+127
-172
@@ -36,35 +36,26 @@
|
||||
th.nobreak(style="width: 22%;") {{$t('view.list.album')}}
|
||||
th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
|
||||
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.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 && playInfo.playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
|
||||
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
|
||||
//- span.badge.badge-light(v-if="item._types['192k']") 192K
|
||||
//- 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: 22%;")
|
||||
span.select {{item.singer}}
|
||||
td.break(style="width: 22%;")
|
||||
span.select {{item.albumName}}
|
||||
td(style="width: 9%;")
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
td(style="width: 15%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" @btn-click="handleListBtnClick" :download-btn="assertApiSupport(item.source)")
|
||||
//- 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)') 试听
|
||||
//- 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)') ＋
|
||||
div(v-if="list.length" :class="$style.content" ref="dom_listContent")
|
||||
material-virtualized-list(:list="list" key-name="songmid" ref="list" #default="{ item, index }" :item-height="37"
|
||||
@scroll="handleScroll" containerClass="scroll" contentClass="list" @contextmenu.native.capture="handleContextMenu")
|
||||
div.list-item(@click="handleDoubleClick($event, index)"
|
||||
:class="[{ [$style.active]: isPlayList && playInfo.playIndex === index }, { selected: selectedIndex == index }, { active: selectdListDetailData.includes(item) }, { [$style.disabled]: !assertApiSupport(item.source) }]"
|
||||
@contextmenu="handleListItemRigthClick($event, index)")
|
||||
div.list-item-cell.nobreak.center(style="flex: 0 0 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
div.list-item-cell.auto.break(:tips="item.name")
|
||||
span.select {{item.name}}
|
||||
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
|
||||
div.list-item-cell.break(style="flex: 0 0 22%;")
|
||||
span.select {{item.singer}}
|
||||
div.list-item-cell.break(style="flex: 0 0 22%;")
|
||||
span.select {{item.albumName}}
|
||||
div.list-item-cell(style="flex: 0 0 9%;")
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
div.list-item-cell(style="flex: 0 0 15%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" @btn-click="handleListBtnClick" :download-btn="assertApiSupport(item.source)")
|
||||
div(:class="$style.noItem" v-else)
|
||||
p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
|
||||
p(v-text="$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")
|
||||
@@ -79,8 +70,11 @@
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapGetters, mapActions } from 'vuex'
|
||||
import { throttle, scrollTo, clipboardWriteText, assertApiSupport, openUrl, openSaveDir, saveLxConfigFile, selectDir, readLxConfigFile, filterFileName } from '../utils'
|
||||
import { clipboardWriteText, assertApiSupport, openUrl, openSaveDir, saveLxConfigFile, selectDir, readLxConfigFile, filterFileName } from '../utils'
|
||||
import musicSdk from '../utils/music'
|
||||
import { setListPosition, getListPosition, getListPrevSelectId } from '@renderer/utils/data'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
data() {
|
||||
@@ -151,6 +145,7 @@ export default {
|
||||
isVisibleMusicSearch: false,
|
||||
fetchingListStatus: {},
|
||||
selectedListInfo: {},
|
||||
selectedIndex: -1,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -322,7 +317,7 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.listId = to.query.id
|
||||
this.$nextTick(() => {
|
||||
this.handleDelayShow()
|
||||
this.restoreScroll(this.$route.query.scrollIndex, false)
|
||||
})
|
||||
})
|
||||
this.isShowDownload = false
|
||||
@@ -348,28 +343,22 @@ export default {
|
||||
// }
|
||||
// },
|
||||
beforeRouteLeave(to, from, next) {
|
||||
this.clearDelayTimeout()
|
||||
this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
|
||||
setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
|
||||
next()
|
||||
},
|
||||
created() {
|
||||
this.listId = this.$route.query.id || this.defaultList.id
|
||||
this.listId = this.$route.query.id || getListPrevSelectId() || this.defaultList.id
|
||||
this.setPrevSelectListId(this.listId)
|
||||
this.handleSaveScroll = throttle((listId, location) => {
|
||||
this.setListScroll({ id: listId, location })
|
||||
}, 1000)
|
||||
this.listenEvent()
|
||||
},
|
||||
mounted() {
|
||||
this.handleDelayShow()
|
||||
this.setListsScroll()
|
||||
this.restoreScroll(this.$route.query.scrollIndex, false)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unlistenEvent()
|
||||
this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
|
||||
setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setPrevSelectListId']),
|
||||
...mapMutations('list', [
|
||||
'listRemove',
|
||||
'listRemoveMultiple',
|
||||
@@ -378,9 +367,9 @@ export default {
|
||||
'moveupUserList',
|
||||
'movedownUserList',
|
||||
'removeUserList',
|
||||
'setListScroll',
|
||||
'setList',
|
||||
'setMusicPosition',
|
||||
'setPrevSelectListId',
|
||||
]),
|
||||
...mapActions('songList', ['getListDetailAll']),
|
||||
...mapActions('leaderboard', {
|
||||
@@ -429,21 +418,8 @@ export default {
|
||||
this.keyEvent.isModDown = false
|
||||
this.handleSelectAllData()
|
||||
},
|
||||
handleDelayShow() {
|
||||
this.clearDelayTimeout()
|
||||
if (this.list.length > 150) {
|
||||
this.delayTimeout = setTimeout(() => {
|
||||
this.delayTimeout = null
|
||||
this.delayShow = true
|
||||
this.restoreScroll(this.$route.query.scrollIndex, false)
|
||||
}, 200)
|
||||
} else {
|
||||
this.delayShow = true
|
||||
this.restoreScroll(this.$route.query.scrollIndex, false)
|
||||
}
|
||||
},
|
||||
handleScroll(e) {
|
||||
this.handleSaveScroll(this.listId, e.target.scrollTop)
|
||||
handleScroll() {
|
||||
setListPosition(this.listId, this.$refs.list.getScrollTop())
|
||||
},
|
||||
clearDelayTimeout() {
|
||||
if (this.delayTimeout) {
|
||||
@@ -452,22 +428,15 @@ export default {
|
||||
}
|
||||
},
|
||||
handleScrollList(index, isAnimation, callback = () => {}) {
|
||||
let location = this.getMusicLocation(index) - 150
|
||||
if (location < 0) location = 0
|
||||
if (isAnimation) {
|
||||
scrollTo(this.$refs.dom_scrollContent, location, 300, callback)
|
||||
} else {
|
||||
this.$refs.dom_scrollContent.scrollTo(0, location)
|
||||
callback()
|
||||
}
|
||||
this.$refs.list.scrollToIndex(index, -150, isAnimation).then(callback)
|
||||
},
|
||||
restoreScroll(index, isAnimation) {
|
||||
if (!this.list.length) return
|
||||
if (index == null) {
|
||||
let location = this.listData.location || 0
|
||||
let location = getListPosition(this.listData.id) || 0
|
||||
if (this.setting.list.isSaveScrollLocation && location) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dom_scrollContent.scrollTo(0, location)
|
||||
this.$refs.list.scrollTo(location)
|
||||
})
|
||||
}
|
||||
return
|
||||
@@ -484,7 +453,7 @@ export default {
|
||||
})
|
||||
},
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
if (this.listMenu.rightClickItemIndex > -1) return
|
||||
|
||||
this.handleSelectListDetailData(event, index)
|
||||
|
||||
@@ -517,13 +486,7 @@ export default {
|
||||
}
|
||||
this.selectdListDetailData = this.list.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectdListDetailData.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.selectdListDetailData.push(this.list[clickIndex])
|
||||
this.lastSelectIndex = clickIndex
|
||||
}
|
||||
@@ -533,69 +496,67 @@ export default {
|
||||
let index = this.selectdListDetailData.indexOf(item)
|
||||
if (index < 0) {
|
||||
this.selectdListDetailData.push(item)
|
||||
event.currentTarget.classList.add('active')
|
||||
} else {
|
||||
this.selectdListDetailData.splice(index, 1)
|
||||
event.currentTarget.classList.remove('active')
|
||||
}
|
||||
} else if (this.selectdListDetailData.length) this.removeAllSelectListDetail()
|
||||
},
|
||||
handleSelectListData(event, clickIndex) {
|
||||
if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
|
||||
// handleSelectListData(event, clickIndex) {
|
||||
// if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
|
||||
|
||||
if (this.keyEvent.isShiftDown) {
|
||||
if (this.selectdListData.length) {
|
||||
let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
|
||||
if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
|
||||
this.removeAllSelectList()
|
||||
let isNeedReverse = false
|
||||
if (clickIndex < lastSelectIndex) {
|
||||
let temp = lastSelectIndex
|
||||
lastSelectIndex = clickIndex
|
||||
clickIndex = temp
|
||||
isNeedReverse = true
|
||||
}
|
||||
this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
|
||||
if (isNeedReverse) this.selectdListData.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.selectdListData.push(this.list[clickIndex])
|
||||
}
|
||||
} else if (this.keyEvent.isModDown) {
|
||||
let item = this.list[clickIndex]
|
||||
let index = this.selectdListData.indexOf(item)
|
||||
if (index < 0) {
|
||||
this.selectdListData.push(item)
|
||||
event.currentTarget.classList.add('active')
|
||||
} else {
|
||||
this.selectdListData.splice(index, 1)
|
||||
event.currentTarget.classList.remove('active')
|
||||
}
|
||||
} else if (this.selectdListData.length) this.removeAllSelectList()
|
||||
},
|
||||
// if (this.keyEvent.isShiftDown) {
|
||||
// if (this.selectdListData.length) {
|
||||
// let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
|
||||
// if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
|
||||
// this.removeAllSelectList()
|
||||
// let isNeedReverse = false
|
||||
// if (clickIndex < lastSelectIndex) {
|
||||
// let temp = lastSelectIndex
|
||||
// lastSelectIndex = clickIndex
|
||||
// clickIndex = temp
|
||||
// isNeedReverse = true
|
||||
// }
|
||||
// this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
|
||||
// if (isNeedReverse) this.selectdListData.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.selectdListData.push(this.list[clickIndex])
|
||||
// }
|
||||
// } else if (this.keyEvent.isModDown) {
|
||||
// let item = this.list[clickIndex]
|
||||
// let index = this.selectdListData.indexOf(item)
|
||||
// if (index < 0) {
|
||||
// this.selectdListData.push(item)
|
||||
// // event.currentTarget.classList.add('active')
|
||||
// } else {
|
||||
// this.selectdListData.splice(index, 1)
|
||||
// // event.currentTarget.classList.remove('active')
|
||||
// }
|
||||
// } else if (this.selectdListData.length) this.removeAllSelectList()
|
||||
// },
|
||||
removeAllSelectListDetail() {
|
||||
this.selectdListDetailData = []
|
||||
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')
|
||||
}
|
||||
},
|
||||
removeAllSelectList() {
|
||||
this.selectdListData = []
|
||||
let dom_list = this.$refs.dom_lists_list
|
||||
if (!dom_list) return
|
||||
let nodes = dom_list.querySelectorAll('.selected')
|
||||
for (const node of nodes) {
|
||||
if (node.parentNode == dom_list) node.classList.remove('selected')
|
||||
}
|
||||
// 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')
|
||||
// }
|
||||
},
|
||||
// removeAllSelectList() {
|
||||
// this.selectdListData = []
|
||||
// let dom_list = this.$refs.dom_lists_list
|
||||
// if (!dom_list) return
|
||||
// let nodes = dom_list.querySelectorAll('.selected')
|
||||
// for (const node of nodes) {
|
||||
// if (node.parentNode == dom_list) node.classList.remove('selected')
|
||||
// }
|
||||
// },
|
||||
testPlay(index) {
|
||||
// if (!this.assertApiSupport(this.list[index].source)) return
|
||||
this.setPlayList({ list: this.listData, index })
|
||||
@@ -635,10 +596,10 @@ export default {
|
||||
handleSelectAllData() {
|
||||
this.removeAllSelectListDetail()
|
||||
this.selectdListDetailData = [...this.list]
|
||||
let nodes = this.$refs.dom_tbody.childNodes
|
||||
for (const node of nodes) {
|
||||
node.classList.add('active')
|
||||
}
|
||||
// let nodes = this.$refs.dom_tbody.childNodes
|
||||
// for (const node of nodes) {
|
||||
// node.classList.add('active')
|
||||
// }
|
||||
// asyncSetArray(this.selectdListDetailData, isSelect ? [...this.list] : [])
|
||||
},
|
||||
handleAddDownloadMultiple(type) {
|
||||
@@ -680,12 +641,12 @@ export default {
|
||||
handleContextMenu(event) {
|
||||
if (!event.target.classList.contains('select')) return
|
||||
event.stopImmediatePropagation()
|
||||
let classList = this.$refs.dom_scrollContent.classList
|
||||
let classList = this.$refs.dom_listContent.classList
|
||||
classList.add(this.$style.copying)
|
||||
window.requestAnimationFrame(() => {
|
||||
let str = window.getSelection().toString()
|
||||
classList.remove(this.$style.copying)
|
||||
str = str.trim()
|
||||
str = str.split(/\n\n/).map(s => s.replace(/\n/g, ' ')).join('\n').trim()
|
||||
if (!str.length) return
|
||||
clipboardWriteText(str)
|
||||
})
|
||||
@@ -732,13 +693,6 @@ export default {
|
||||
handleListsNewAfterLeave() {
|
||||
this.listsData.isNewLeave = false
|
||||
},
|
||||
setListsScroll() {
|
||||
let target = this.$refs.dom_lists_list.querySelector('.' + this.$style.active)
|
||||
if (!target) return
|
||||
let offsetTop = target.offsetTop
|
||||
let location = offsetTop - 150
|
||||
if (location > 0) this.$refs.dom_lists_list.scrollTop = location
|
||||
},
|
||||
handleListToggle(id) {
|
||||
if (id == this.listId) return
|
||||
this.$router.push({
|
||||
@@ -778,16 +732,21 @@ export default {
|
||||
this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.list[index].source].getMusicDetailPageUrl
|
||||
// this.listMenu.itemMenuControl.play =
|
||||
// this.listMenu.itemMenuControl.playLater =
|
||||
this.listMenu.itemMenuControl.download =
|
||||
this.assertApiSupport(this.list[index].source)
|
||||
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 = event.target.closest('td')
|
||||
|
||||
this.listMenu.itemMenuControl.download = this.assertApiSupport(this.list[index].source)
|
||||
let dom_container = event.target.closest('.' + this.$style.container)
|
||||
// let dom_listItemCell = event.target.closest('.list-item-cell')
|
||||
const getOffsetValue = (target, x = 0, y = 0) => {
|
||||
if (target === dom_container) return { x, y }
|
||||
if (!target) return { x: 0, y: 0 }
|
||||
x += target.offsetLeft
|
||||
y += target.offsetTop
|
||||
return getOffsetValue(target.offsetParent, x, y)
|
||||
}
|
||||
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.selectedIndex = index
|
||||
let { x, y } = getOffsetValue(event.target)
|
||||
this.listMenu.menuLocation.x = x + event.offsetX
|
||||
this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.list.getScrollTop()
|
||||
this.hideListsMenu()
|
||||
this.$nextTick(() => {
|
||||
this.listMenu.isShowItemMenu = true
|
||||
@@ -842,8 +801,7 @@ export default {
|
||||
}
|
||||
},
|
||||
hideListMenu() {
|
||||
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
|
||||
if (dom_selected) dom_selected.classList.remove('selected')
|
||||
this.selectedIndex = -1
|
||||
this.listMenu.isShowItemMenu = false
|
||||
this.listMenu.rightClickItemIndex = -1
|
||||
},
|
||||
@@ -946,10 +904,9 @@ export default {
|
||||
case 'listClick':
|
||||
if (index < 0) return
|
||||
this.handleScrollList(index, true, () => {
|
||||
let dom = document.getElementById('mid_' + this.list[index].songmid)
|
||||
dom.classList.add('selected')
|
||||
this.selectedIndex = index
|
||||
setTimeout(() => {
|
||||
dom.classList.remove('selected')
|
||||
this.selectedIndex = -1
|
||||
if (isPlay) this.testPlay(index)
|
||||
}, 600)
|
||||
})
|
||||
@@ -1240,6 +1197,11 @@ export default {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
&.copying {
|
||||
.no-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.thead {
|
||||
flex: none;
|
||||
@@ -1248,28 +1210,20 @@ export default {
|
||||
// padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
:global(.list) {
|
||||
flex: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
tr {
|
||||
:global(.list-item) {
|
||||
&.active {
|
||||
color: @color-btn;
|
||||
}
|
||||
}
|
||||
td {
|
||||
font-size: 12px;
|
||||
:global(.list-item-cell) {
|
||||
font-size: 12px !important;
|
||||
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
|
||||
&.copying {
|
||||
.no-select {
|
||||
display: none;
|
||||
font-size: 11px !important;
|
||||
color: @color-theme_2-font-label !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1280,6 +1234,7 @@ export default {
|
||||
font-size: .8em;
|
||||
line-height: 1;
|
||||
opacity: .75;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
@@ -1325,15 +1280,15 @@ each(@themes, {
|
||||
.listsNew {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
}
|
||||
.tbody {
|
||||
tr {
|
||||
:global(.list) {
|
||||
:global(.list-item) {
|
||||
&.active {
|
||||
color: ~'@{color-@{value}-btn}';
|
||||
}
|
||||
}
|
||||
td {
|
||||
:global(.list-item-cell) {
|
||||
&:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
color: ~'@{color-@{value}-theme_2-font-label}' !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -842,12 +842,11 @@ export default {
|
||||
console.log(listData.type)
|
||||
|
||||
// 兼容0.6.2及以前版本的列表数据
|
||||
if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list, name: '试听列表', location: 0 })
|
||||
if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list, name: '试听列表' })
|
||||
|
||||
if (listData.type !== 'playList') return
|
||||
|
||||
for (const list of listData.data) {
|
||||
if (list.location == null) list.location = 0
|
||||
this.setList(list)
|
||||
}
|
||||
|
||||
@@ -879,10 +878,9 @@ export default {
|
||||
if (allData.type !== 'allData') return
|
||||
|
||||
// 兼容0.6.2及以前版本的列表数据
|
||||
if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list, name: '试听列表', location: 0 })
|
||||
if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list, name: '试听列表' })
|
||||
|
||||
for (const list of allData.playList) {
|
||||
if (list.location == null) list.location = 0
|
||||
this.setList(list)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user