diff --git a/publish/changeLog.md b/publish/changeLog.md
index 7aa7a5b4..d671042d 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -6,6 +6,8 @@
- 优化列表同步代码逻辑
- 优化开关评论时的动画性能
+- 优化进入、离开播放详情页的性能
+- 大幅优化我的列表、下载、歌单、排行榜列表性能，现在即使同一列表内的歌曲很多时也不会卡顿了
### 修复
diff --git a/src/common/defaultSetting.js b/src/common/defaultSetting.js
index f261cbf7..4e31bd59 100644
--- a/src/common/defaultSetting.js
+++ b/src/common/defaultSetting.js
@@ -35,7 +35,6 @@ const defaultSetting = {
list: {
isShowAlbumName: true,
isShowSource: true,
- prevSelectListId: 'default',
isSaveScrollLocation: true,
addMusicLocationType: 'top',
},
diff --git a/src/common/utils.js b/src/common/utils.js
index be18ffed..08e8dc97 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -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
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index d1c05a27..64645594 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -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() // 初始化下载列表
},
diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less
index db861e80..b045c5a3 100644
--- a/src/renderer/assets/styles/index.less
+++ b/src/renderer/assets/styles/index.less
@@ -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}';
diff --git a/src/renderer/components/core/Aside.vue b/src/renderer/components/core/Aside.vue
index 4bef41a1..f3210d98 100644
--- a/src/renderer/components/core/Aside.vue
+++ b/src/renderer/components/core/Aside.vue
@@ -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')
diff --git a/src/renderer/components/material/Selection.vue b/src/renderer/components/material/Selection.vue
index 4a56513a..5a82c17b 100644
--- a/src/renderer/components/material/Selection.vue
+++ b/src/renderer/components/material/Selection.vue
@@ -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}}
diff --git a/src/renderer/components/material/SongList.vue b/src/renderer/components/material/SongList.vue
index 73189531..a65c866d 100644
--- a/src/renderer/components/material/SongList.vue
+++ b/src/renderer/components/material/SongList.vue
@@ -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;
}
}
}
diff --git a/src/renderer/components/material/VirtualizedList.vue b/src/renderer/components/material/VirtualizedList.vue
new file mode 100644
index 00000000..54148621
--- /dev/null
+++ b/src/renderer/components/material/VirtualizedList.vue
@@ -0,0 +1,241 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 2ad40edb..8ef83b07 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -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'
diff --git a/src/renderer/store/modules/leaderboard.js b/src/renderer/store/modules/leaderboard.js
index d5985c29..1d4bc698 100644
--- a/src/renderer/store/modules/leaderboard.js
+++ b/src/renderer/store/modules/leaderboard.js
@@ -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 {
diff --git a/src/renderer/store/modules/list.js b/src/renderer/store/modules/list.js
index 12c124f2..0e570b76 100644
--- a/src/renderer/store/modules/list.js
+++ b/src/renderer/store/modules/list.js
@@ -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 {
diff --git a/src/renderer/store/mutations.js b/src/renderer/store/mutations.js
index 5cd60e33..9b02b7f7 100644
--- a/src/renderer/store/mutations.js
+++ b/src/renderer/store/mutations.js
@@ -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)
},
diff --git a/src/renderer/utils/data.js b/src/renderer/utils/data.js
new file mode 100644
index 00000000..8637ca7a
--- /dev/null
+++ b/src/renderer/utils/data.js
@@ -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()
+}
diff --git a/src/renderer/views/Download.vue b/src/renderer/views/Download.vue
index d530c150..bbff13d4 100644
--- a/src/renderer/views/Download.vue
+++ b/src/renderer/views/Download.vue
@@ -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)
@@ -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;
+ }
+ }
}
}
})
diff --git a/src/renderer/views/Leaderboard.vue b/src/renderer/views/Leaderboard.vue
index 425a4345..6b5350dd 100644
--- a/src/renderer/views/Leaderboard.vue
+++ b/src/renderer/views/Leaderboard.vue
@@ -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 {
diff --git a/src/renderer/views/List.vue b/src/renderer/views/List.vue
index 25ab684e..dc07029f 100644
--- a/src/renderer/views/List.vue
+++ b/src/renderer/views/List.vue
@@ -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 @@