优化我的列表、下载、歌单、排行榜列表性能
lyswhut
parent
0d20869337
commit
35ca6db1ee
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
- 优化列表同步代码逻辑
|
||||
- 优化开关评论时的动画性能
|
||||
- 优化进入、离开播放详情页的性能
|
||||
- 大幅优化我的列表、下载、歌单、排行榜列表性能，现在即使同一列表内的歌曲很多时也不会卡顿了
|
||||
|
||||
### 修复
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ const defaultSetting = {
|
|||
list: {
|
||||
isShowAlbumName: true,
|
||||
isShowSource: true,
|
||||
prevSelectListId: 'default',
|
||||
isSaveScrollLocation: true,
|
||||
addMusicLocationType: 'top',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -153,8 +153,8 @@ exports.initSetting = isShowErrorAlert => {
|
|||
// 迁移列表滚动位置设置 ~0.18.3
|
||||
if (setting.list.scroll) {
|
||||
let scroll = setting.list.scroll
|
||||
electronStore_list.set('defaultList.location', scroll.locations.default || 0)
|
||||
electronStore_list.set('loveList.location', scroll.locations.love || 0)
|
||||
// electronStore_list.set('defaultList.location', scroll.locations.default || 0)
|
||||
// electronStore_list.set('loveList.location', scroll.locations.love || 0)
|
||||
electronStore_config.delete('setting.list.scroll')
|
||||
electronStore_config.set('setting.list.isSaveScrollLocation', scroll.enable)
|
||||
delete setting.list.scroll
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import music from './utils/music'
|
|||
import { throttle, openUrl, compareVer, getPlayList, parseUrlParams, saveSetting } from './utils'
|
||||
import { base as eventBaseName, sync as eventSyncName } from './event/names'
|
||||
import apiSourceInfo from './utils/music/api-source-info'
|
||||
import { initListPosition, initListPrevSelectId } from '@renderer/utils/data'
|
||||
|
||||
window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
|
||||
|
||||
|
|
@ -338,6 +339,8 @@ export default {
|
|||
return Promise.all([
|
||||
this.initMyList(), // 初始化播放列表
|
||||
this.initSearchHistoryList(), // 初始化搜索历史列表
|
||||
initListPosition(), // 列表位置记录
|
||||
initListPrevSelectId(), // 上次选中的列表记录
|
||||
])
|
||||
// this.initDownloadList() // 初始化下载列表
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@import './reset.less';
|
||||
@import './animate.less';
|
||||
@import './layout.less';
|
||||
|
||||
*, *::after, *::before {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
|
@ -72,6 +74,45 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
color: @color-theme_2-font;
|
||||
.list-item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
// border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
transition: background-color 0.2s ease;
|
||||
border-bottom: 1px solid @color-theme_2-line;
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
background-color: @color-theme_2-hover;
|
||||
}
|
||||
&.active {
|
||||
background-color: @color-theme_2-active;
|
||||
}
|
||||
&.selected {
|
||||
background-color: @color-theme_2-hover;
|
||||
}
|
||||
.list-item-cell {
|
||||
flex: none;
|
||||
padding: 0 6px;
|
||||
position: relative;
|
||||
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
.mixin-ellipsis-1;
|
||||
|
||||
&.auto {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
|
|
@ -240,6 +281,22 @@ each(@themes, {
|
|||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
color: ~'@{color-@{value}-theme_2-font}';
|
||||
.list-item {
|
||||
border-bottom-color: ~'@{color-@{value}-theme_2-line}';
|
||||
&:hover {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
}
|
||||
&.active {
|
||||
background-color: ~'@{color-@{value}-theme_2-active}';
|
||||
}
|
||||
&.selected {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
&::placeholder {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ div(:class="$style.aside")
|
|||
dl
|
||||
//- dt {{$t('core.aside.my_music')}}
|
||||
dd
|
||||
router-link(:active-class="$style.active" :tips="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
|
||||
router-link(:active-class="$style.active" to="list" :tips="$t('core.aside.my_list')")
|
||||
div(:class="$style.icon")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 444.87 391.18' space='preserve')
|
||||
use(xlink:href='#icon-love')
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
div.icon(:class="$style.icon")
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
|
||||
use(xlink:href='#icon-down')
|
||||
ul.list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
|
||||
ul.selection-list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
|
||||
li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :tips="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,31 @@ div(:class="$style.songList")
|
|||
th.nobreak(:style="{ width: rowWidth.r5 }") {{$t('material.song_list.time')}}
|
||||
th.nobreak(:style="{ width: rowWidth.r6 }") {{$t('material.song_list.action')}}
|
||||
div(:class="$style.content")
|
||||
div.scroll(v-show="list.length" :class="$style.tbody" ref="dom_scrollContent")
|
||||
div(v-if="list.length" :class="$style.content" ref="dom_listContent")
|
||||
material-virtualized-list(:list="list" key-name="songmid" ref="list" :item-height="37"
|
||||
containerClass="scroll" contentClass="list" @contextmenu.native.capture="handleContextMenu")
|
||||
template(#default="{ item, index }")
|
||||
div.list-item(@click="handleDoubleClick($event, index)" @contextmenu="handleListItemRigthClick($event, index)"
|
||||
:class="[{ selected: selectedIndex == index }, { active: selectdList.includes(item) }]")
|
||||
div.list-item-cell.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
div.list-item-cell.auto(:style="{ width: rowWidth.r2 }" :tips="item.name + ((item._types.ape || item._types.flac || item._types.wav) ? ` - ${$t('material.song_list.lossless')}` : item._types['320k'] ? ` - ${$t('material.song_list.high_quality')}` : '')")
|
||||
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')}}
|
||||
div.list-item-cell(:style="{ width: rowWidth.r3 }")
|
||||
span.select {{item.singer}}
|
||||
div.list-item-cell(:style="{ width: rowWidth.r4 }")
|
||||
span.select {{item.albumName}}
|
||||
div.list-item-cell(:style="{ width: rowWidth.r5 }")
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
div.list-item-cell(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :class="$style.btns"
|
||||
:remove-btn="false" @btn-click="handleListBtnClick"
|
||||
:download-btn="assertApiSupport(item.source)")
|
||||
template(#footer)
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
|
||||
//- div.scroll(v-show="list.length" :class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
|
||||
|
|
@ -175,7 +199,9 @@ export default {
|
|||
isModDown: false,
|
||||
},
|
||||
lastSelectIndex: 0,
|
||||
selectedIndex: -1,
|
||||
listMenu: {
|
||||
rightClickItemIndex: -1,
|
||||
isShowItemMenu: false,
|
||||
itemMenuControl: {
|
||||
play: true,
|
||||
|
|
@ -233,7 +259,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)
|
||||
|
||||
|
|
@ -264,14 +290,8 @@ export default {
|
|||
}
|
||||
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])
|
||||
this.lastSelectIndex = clickIndex
|
||||
}
|
||||
|
|
@ -281,10 +301,8 @@ export default {
|
|||
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()
|
||||
|
|
@ -293,12 +311,6 @@ export default {
|
|||
},
|
||||
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)
|
||||
|
|
@ -306,10 +318,6 @@ export default {
|
|||
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])
|
||||
},
|
||||
handleTogglePage(page) {
|
||||
|
|
@ -327,12 +335,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)
|
||||
})
|
||||
|
|
@ -344,23 +352,27 @@ 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.songList)
|
||||
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.offsetParent.offsetTop + 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
|
||||
})
|
||||
},
|
||||
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
|
||||
},
|
||||
|
|
@ -406,24 +418,7 @@ export default {
|
|||
flex: auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.tbody {
|
||||
height: 100%;
|
||||
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 {
|
||||
|
|
@ -431,6 +426,24 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
:global(.list) {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
:global(.list-item-cell) {
|
||||
font-size: 12px !important;
|
||||
:global(.badge) {
|
||||
margin-left: 3px;
|
||||
}
|
||||
&:first-child {
|
||||
// padding-left: 10px;
|
||||
font-size: 11px !important;
|
||||
color: @color-theme_2-font-label !important;
|
||||
}
|
||||
}
|
||||
:global(.badge) {
|
||||
opacity: .85;
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
|
|
@ -456,10 +469,10 @@ export default {
|
|||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.tbody {
|
||||
td {
|
||||
:global(.list) {
|
||||
:global(.list-item-cell) {
|
||||
&:first-child {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
color: ~'@{color-@{value}-theme_2-font-label}' !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<component :is="containerEl" :class="containerClass" ref="dom_scrollContainer" style="height: 100%; overflow: auto; position: relative; display: block;">
|
||||
<component :is="contentEl" :class="contentClass" :style="contentStyle">
|
||||
<div v-for="item in views" :key="item.key" :style="item.style">
|
||||
<slot name="default" v-bind="{ item: item.item, index: item.index }" />
|
||||
</div>
|
||||
</component>
|
||||
<slot name="footer" />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const easeInOutQuad = (t, b, c, d) => {
|
||||
t /= d / 2
|
||||
if (t < 1) return (c / 2) * t * t + b
|
||||
t--
|
||||
return (-c / 2) * (t * (t - 2) - 1) + b
|
||||
}
|
||||
const handleScroll = (element, to, duration = 300, callback = () => {}, onCancel = () => {}) => {
|
||||
if (!element) return callback()
|
||||
const start = element.scrollTop || element.scrollY || 0
|
||||
let cancel = false
|
||||
if (to > start) {
|
||||
let maxScrollTop = element.scrollHeight - element.clientHeight
|
||||
if (to > maxScrollTop) to = maxScrollTop
|
||||
} else if (to < start) {
|
||||
if (to < 0) to = 0
|
||||
} else return callback()
|
||||
const change = to - start
|
||||
const increment = 10
|
||||
if (!change) return callback()
|
||||
|
||||
let currentTime = 0
|
||||
let val
|
||||
let cancelCallback
|
||||
|
||||
const animateScroll = () => {
|
||||
currentTime += increment
|
||||
val = parseInt(easeInOutQuad(currentTime, start, change, duration))
|
||||
if (element.scrollTo) {
|
||||
element.scrollTo(0, val)
|
||||
} else {
|
||||
element.scrollTop = val
|
||||
}
|
||||
if (currentTime < duration) {
|
||||
if (cancel) {
|
||||
cancelCallback()
|
||||
onCancel()
|
||||
return
|
||||
}
|
||||
setTimeout(animateScroll, increment)
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
animateScroll()
|
||||
return (callback) => {
|
||||
cancelCallback = callback
|
||||
cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'VirtualizedList',
|
||||
props: {
|
||||
containerEl: {
|
||||
type: String,
|
||||
default: 'div',
|
||||
},
|
||||
containerClass: {
|
||||
type: String,
|
||||
default: 'virtualized-list',
|
||||
},
|
||||
contentEl: {
|
||||
type: String,
|
||||
default: 'div',
|
||||
},
|
||||
contentClass: {
|
||||
type: String,
|
||||
default: 'virtualized-list-content',
|
||||
},
|
||||
outsideNum: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
keyName: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
require: true,
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
views: [],
|
||||
isWaitingUpdate: false,
|
||||
startIndex: -1,
|
||||
endIndex: -1,
|
||||
scrollTop: 0,
|
||||
cachedList: [],
|
||||
cancelScroll: null,
|
||||
isScrolling: false,
|
||||
scrollToValue: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
contentStyle() {
|
||||
return {
|
||||
display: 'block',
|
||||
height: this.list.length * this.itemHeight + 'px',
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
itemHeight() {
|
||||
this.updateView()
|
||||
},
|
||||
list() {
|
||||
this.cachedList = Array(this.list.length)
|
||||
this.startIndex = -1
|
||||
this.endIndex = -1
|
||||
this.updateView()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.dom_scrollContainer.addEventListener('scroll', this.onScroll, false)
|
||||
this.cachedList = Array(this.list.length)
|
||||
this.startIndex = -1
|
||||
this.endIndex = -1
|
||||
this.updateView()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.cancelScroll) this.cancelScroll()
|
||||
},
|
||||
methods: {
|
||||
onScroll(event) {
|
||||
if (this.isWaitingUpdate) return
|
||||
this.isWaitingUpdate = true
|
||||
window.requestAnimationFrame(() => {
|
||||
this.updateView()
|
||||
this.isWaitingUpdate = false
|
||||
})
|
||||
this.$emit('scroll', event)
|
||||
},
|
||||
|
||||
createList(startIndex, endIndex) {
|
||||
const cache = this.cachedList.slice(startIndex, endIndex)
|
||||
const list = this.list.slice(startIndex, endIndex).map((item, i) => {
|
||||
if (cache[i]) return cache[i]
|
||||
const top = (startIndex + i) * this.itemHeight
|
||||
const index = startIndex + i
|
||||
return this.cachedList[index] = {
|
||||
item,
|
||||
top,
|
||||
style: { position: 'absolute', left: 0, right: 0, top: top + 'px', height: this.itemHeight + 'px' },
|
||||
index,
|
||||
key: item[this.keyName],
|
||||
}
|
||||
})
|
||||
return list
|
||||
},
|
||||
|
||||
updateView() {
|
||||
const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
|
||||
const currentStartIndex = Math.floor(currentScrollTop / this.itemHeight)
|
||||
const currentEndIndex = currentStartIndex + Math.ceil(this.$refs.dom_scrollContainer.clientHeight / this.itemHeight)
|
||||
const continuous = currentStartIndex <= this.endIndex && currentEndIndex >= this.startIndex
|
||||
const currentStartRenderIndex = Math.max(Math.floor(currentScrollTop / this.itemHeight) - this.outsideNum, 0)
|
||||
const currentEndRenderIndex = currentStartIndex + Math.ceil(this.$refs.dom_scrollContainer.clientHeight / this.itemHeight) + this.outsideNum
|
||||
// console.log(continuous)
|
||||
// debugger
|
||||
if (continuous) {
|
||||
if (Math.abs(currentScrollTop - this.scrollTop) < this.itemHeight * 5) return
|
||||
// console.log('update')
|
||||
if (currentScrollTop > this.scrollTop) { // scroll down
|
||||
// console.log('scroll down')
|
||||
const list = this.createList(currentStartRenderIndex, currentEndRenderIndex)
|
||||
this.views.push(...list.slice(list.indexOf(this.views[this.views.length - 1]) + 1))
|
||||
// if (this.views.length > 100) {
|
||||
this.$nextTick(() => {
|
||||
this.views.splice(0, this.views.indexOf(list[0]))
|
||||
})
|
||||
// }
|
||||
} else if (currentScrollTop < this.scrollTop) { // scroll up
|
||||
// console.log('scroll up')
|
||||
this.views = this.createList(currentStartRenderIndex, currentEndRenderIndex)
|
||||
} else return
|
||||
} else {
|
||||
this.views = this.createList(currentStartRenderIndex, currentEndRenderIndex)
|
||||
}
|
||||
this.startIndex = currentStartIndex
|
||||
this.endIndex = currentEndIndex
|
||||
this.scrollTop = currentScrollTop
|
||||
},
|
||||
|
||||
scrollTo(scrollTop, animate = false) {
|
||||
return new Promise(resolve => {
|
||||
if (this.cancelScroll) {
|
||||
this.cancelScroll(resolve)
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
}).then(() => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (animate) {
|
||||
this.isScrolling = true
|
||||
this.scrollToValue = scrollTop
|
||||
this.cancelScroll = handleScroll(this.$refs.dom_scrollContainer, scrollTop, 300, () => {
|
||||
this.cancelScroll = null
|
||||
this.isScrolling = false
|
||||
resolve()
|
||||
}, () => {
|
||||
this.cancelScroll = null
|
||||
this.isScrolling = false
|
||||
reject('canceled')
|
||||
})
|
||||
} else {
|
||||
this.$refs.dom_scrollContainer.scrollTop = scrollTop
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
scrollToIndex(index, offset = 0, animate = false, callback = () => {}) {
|
||||
return this.scrollTo(Math.max(index * this.itemHeight + offset, 0), animate, callback)
|
||||
},
|
||||
|
||||
getScrollTop() {
|
||||
return this.isScrolling ? this.scrollToValue : this.$refs.dom_scrollContainer.scrollTop
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue'
|
||||
import { sync } from 'vuex-router-sync'
|
||||
// import { sync } from 'vuex-router-sync'
|
||||
|
||||
import './event'
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ import { getSetting } from './utils'
|
|||
import languageList from '@renderer/lang/languages.json'
|
||||
import { rendererSend, NAMES } from '../common/ipc'
|
||||
|
||||
sync(store, router)
|
||||
// sync(store, router)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.config.devtools = process.env.NODE_ENV === 'development'
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ for (const source of music.sources) {
|
|||
sources.push(source)
|
||||
}
|
||||
|
||||
// state
|
||||
const state = {
|
||||
boards: sourceList,
|
||||
const listInfo = {
|
||||
list: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
|
|
@ -19,6 +17,11 @@ const state = {
|
|||
key: null,
|
||||
}
|
||||
|
||||
// state
|
||||
const state = {
|
||||
boards: sourceList,
|
||||
}
|
||||
|
||||
// getters
|
||||
const getters = {
|
||||
sources(state, getters, rootState, { sourceNames }) {
|
||||
|
|
@ -27,16 +30,6 @@ const getters = {
|
|||
boards(state) {
|
||||
return state.boards
|
||||
},
|
||||
list(state) {
|
||||
return state.list
|
||||
},
|
||||
info(state) {
|
||||
return {
|
||||
total: state.total,
|
||||
limit: state.limit,
|
||||
page: state.page,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
// actions
|
||||
|
|
@ -47,7 +40,6 @@ const actions = {
|
|||
// let tabId = rootState.setting.leaderboard.tabId
|
||||
// let key = `${source}${tabId}${page}`
|
||||
// if (state.list.length && state.key == key) return true
|
||||
// commit('clearList')
|
||||
if (state.boards[source].length) return
|
||||
return music[source].leaderboard.getBoards().then(result => commit('setBoardsList', { boards: result, source }))
|
||||
},
|
||||
|
|
@ -56,14 +48,22 @@ const actions = {
|
|||
let tabId = rootState.setting.leaderboard.tabId
|
||||
let [source, bangId] = tabId.split('__')
|
||||
let key = `${source}${tabId}${page}`
|
||||
if (state.list.length && state.key == key) return Promise.resolve()
|
||||
commit('clearList')
|
||||
if (listInfo.list.length && listInfo.key == key) return Promise.resolve(listInfo)
|
||||
// commit('clearList')
|
||||
// return (
|
||||
// cache.has(key)
|
||||
// ? Promise.resolve(cache.get(key))
|
||||
// : music[source].leaderboard.getList(bangId, page)
|
||||
// ).then(result => commit('setList', { result, key }))
|
||||
return music[source].leaderboard.getList(bangId, page).then(result => commit('setList', { result, key }))
|
||||
return music[source].leaderboard.getList(bangId, page).then(result => {
|
||||
cache.set(key, result)
|
||||
listInfo.list = result.list
|
||||
listInfo.total = result.total
|
||||
listInfo.limit = result.limit
|
||||
listInfo.page = result.page
|
||||
listInfo.key = key
|
||||
return listInfo
|
||||
})
|
||||
},
|
||||
getListAll({ state, rootState }, id) {
|
||||
// console.log(source, id)
|
||||
|
|
@ -96,18 +96,6 @@ const mutations = {
|
|||
setBoardsList(state, { boards, source }) {
|
||||
state.boards[source] = boards.list
|
||||
},
|
||||
setList(state, { result, key }) {
|
||||
state.list = result.list
|
||||
state.total = result.total
|
||||
state.limit = result.limit
|
||||
state.page = result.page
|
||||
state.key = key
|
||||
cache.set(key, result)
|
||||
},
|
||||
clearList(state) {
|
||||
state.list = []
|
||||
state.total = 0
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import musicSdk from '../../utils/music'
|
||||
import { clearLyric, clearMusicUrl } from '../../utils'
|
||||
import { sync as eventSyncName } from '@renderer/event/names'
|
||||
import { removeListPosition, setListPrevSelectId } from '@renderer/utils/data'
|
||||
|
||||
let allList = {}
|
||||
window.allList = allList
|
||||
|
|
@ -340,6 +341,7 @@ const mutations = {
|
|||
if (index < 0) return
|
||||
let list = state.userList.splice(index, 1)[0]
|
||||
allListRemove(list)
|
||||
removeListPosition(id)
|
||||
},
|
||||
setUserListName(state, { id, name, isSync }) {
|
||||
if (!isSync) {
|
||||
|
|
@ -380,9 +382,6 @@ const mutations = {
|
|||
state.userList.splice(index, 1)
|
||||
state.userList.splice(index + 1, 0, targetList)
|
||||
},
|
||||
setListScroll(state, { id, location }) {
|
||||
if (allList[id]) allList[id].location = location
|
||||
},
|
||||
setMusicPosition(state, { id, position, list, isSync }) {
|
||||
if (!isSync) {
|
||||
window.eventHub.$emit(eventSyncName.send_action_list, {
|
||||
|
|
@ -418,6 +417,9 @@ const mutations = {
|
|||
setOtherSource(state, { musicInfo, otherSource }) {
|
||||
musicInfo.otherSource = otherSource
|
||||
},
|
||||
setPrevSelectListId(state, val) {
|
||||
setListPrevSelectId(val)
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -61,9 +61,6 @@ export default {
|
|||
setMediaDeviceId(state, val) {
|
||||
state.setting.player.mediaDeviceId = val
|
||||
},
|
||||
setPrevSelectListId(state, val) {
|
||||
state.setting.list.prevSelectListId = val
|
||||
},
|
||||
setDesktopLyricConfig(state, config) {
|
||||
state.setting.desktopLyric = Object.assign(state.setting.desktopLyric, config)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
import { rendererSend, rendererInvoke, NAMES } from '../../common/ipc'
|
||||
import { throttle } from './index'
|
||||
|
||||
let listPosition = {}
|
||||
let listPrevSelectId
|
||||
|
||||
const saveListPosition = throttle(() => {
|
||||
rendererSend(NAMES.mainWindow.save_data, {
|
||||
path: 'listPosition',
|
||||
data: listPosition,
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
export const initListPosition = () => {
|
||||
return rendererInvoke(NAMES.mainWindow.get_data, 'listPosition').then(data => {
|
||||
if (!data) data = {}
|
||||
listPosition = data
|
||||
})
|
||||
}
|
||||
export const getListPosition = id => listPosition[id] || 0
|
||||
export const setListPosition = (id, position) => {
|
||||
listPosition[id] = position || 0
|
||||
saveListPosition()
|
||||
}
|
||||
export const removeListPosition = id => {
|
||||
delete listPosition[id]
|
||||
saveListPosition()
|
||||
}
|
||||
|
||||
const saveListPrevSelectId = throttle(() => {
|
||||
rendererSend(NAMES.mainWindow.save_data, {
|
||||
path: 'listPrevSelectId',
|
||||
data: listPrevSelectId,
|
||||
})
|
||||
}, 200)
|
||||
export const initListPrevSelectId = () => {
|
||||
return rendererInvoke(NAMES.mainWindow.get_data, 'listPrevSelectId').then(id => {
|
||||
listPrevSelectId = id
|
||||
})
|
||||
}
|
||||
export const getListPrevSelectId = () => listPrevSelectId
|
||||
export const setListPrevSelectId = id => {
|
||||
listPrevSelectId = id
|
||||
saveListPrevSelectId()
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue