优化我的列表、下载、歌单、排行榜列表性能

publish/changeLog.md

@@ -6,6 +6,8 @@
 
 - 优化列表同步代码逻辑
 - 优化开关评论时的动画性能
+- 优化进入、离开播放详情页的性能
+- 大幅优化我的列表、下载、歌单、排行榜列表性能，现在即使同一列表内的歌曲很多时也不会卡顿了
 
 ### 修复
 

src/common/defaultSetting.js

@@ -35,7 +35,6 @@ const defaultSetting = {
   list: {
     isShowAlbumName: true,
     isShowSource: true,
-    prevSelectListId: 'default',
     isSaveScrollLocation: true,
     addMusicLocationType: 'top',
   },

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('defaultList.location', scroll.locations.default || 0)
-      electronStore_list.set('loveList.location', scroll.locations.love || 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

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() // 初始化下载列表
     },

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}';

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')

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}}
 </template>
 

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.listMenu.itemMenuControl.download = this.assertApiSupport(this.list[index].source)
-        this.assertApiSupport(this.list[index].source)
+      let dom_container = event.target.closest('.' + this.$style.songList)
-      let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
+      const getOffsetValue = (target, x = 0, y = 0) => {
-      if (dom_selected) dom_selected.classList.remove('selected')
+        if (target === dom_container) return { x, y }
-      this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
+        if (!target) return { x: 0, y: 0 }
-      let dom_td = event.target.closest('td')
+        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.selectedIndex = index
-      this.listMenu.menuLocation.y = dom_td.offsetParent.offsetTop + dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      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')
+      this.selectedIndex = -1
-      if (dom_selected) dom_selected.classList.remove('selected')
       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 {
+    :global(.list) {
-      td {
+      :global(.list-item-cell) {
         &:first-child {
-          color: ~'@{color-@{value}-theme_2-font-label}';
+          color: ~'@{color-@{value}-theme_2-font-label}' !important;
         }
       }
     }

src/renderer/components/material/VirtualizedList.vue

@@ -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>

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'

src/renderer/store/modules/leaderboard.js

@@ -9,9 +9,7 @@ for (const source of music.sources) {
   sources.push(source)
 }
 
-// state
+const listInfo = {
-const state = {
-  boards: sourceList,
   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()
+    if (listInfo.list.length && listInfo.key == key) return Promise.resolve(listInfo)
-    commit('clearList')
+    // 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 {

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 {

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)
   },

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()
+}

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")
+    div(v-if="list.length" :class="$style.content" ref="dom_listContent")
-      table
+      material-virtualized-list(:list="showList" key-name="key" ref="list" :item-height="37" #default="{ item, index }"
-        tbody(ref="dom_tbody")
+        containerClass="scroll" contentClass="list")
-          tr(v-for='(item, index) in showList' :key='item.key' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
+        div.list-item(@click="handleDoubleClick($event, index)" @contextmenu="handleListItemRigthClick($event, index)"
-            td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
+          :class="[{[$style.active]: playListIndex == index }, { selected: selectedIndex == index }, { active: selectedData.includes(item) }]")
-            td.break
+          div.list-item-cell.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
-              span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
+          div.list-item-cell.auto
-            td.break(style="width: 20%;") {{item.progress.progress}}%
+            span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
-            td.break(style="width: 22%;") {{item.statusText}}
+          div.list-item-cell(style="width: 20%;") {{item.progress.progress}}%
-            td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
+          div.list-item-cell(style="width: 22%;") {{item.statusText}}
-            td(style="width: 13%; padding-left: 0; padding-right: 0;")
+          div.list-item-cell(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
-              material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" remove-btn
+          div.list-item-cell(style="width: 13%; padding-left: 0; padding-right: 0;")
-                :start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
+            material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" remove-btn
-                :pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
+              :start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
-                :play-btn="item.status == downloadStatus.COMPLETED" :search-btn="item.status == downloadStatus.ERROR" @btn-click="handleListBtnClick")
+              :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')
+      let dom_container = event.target.closest('.' + this.$style.download)
-      if (dom_selected) dom_selected.classList.remove('selected')
+      const getOffsetValue = (target, x = 0, y = 0) => {
-      this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
+        if (target === dom_container) return { x, y }
-      let dom_td = event.target.closest('td')
+        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.selectedIndex = index
-      this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      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')
+      this.selectedIndex = -1
-      if (dom_selected) dom_selected.classList.remove('selected')
       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 {
+  :global(.list-item-cell) {
-    font-size: 12px;
+    font-size: 12px !important;
     &:first-child {
       // padding-left: 10px;
-      font-size: 11px;
+      font-size: 11px !important;
-      color: @color-theme_2-font-label;
+      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 {
+    :global(.list) {
-      tr {
+      :global(.list-item-cell) {
-        &.active {
-          color: ~'@{color-@{value}-btn}';
-        }
-      }
-      td {
         &:first-child {
           color: ~'@{color-@{value}-theme_2-font-label}';
         }
       }
+      :global(.list-item) {
+        &.active {
+          color: ~'@{color-@{value}-btn}' !important;
+        }
+      }
     }
   }
 })

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.listInfo.list = []
-        this.page = this.info.page
+      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.listInfo.list = []
-        this.page = this.info.page
+      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 {

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(v-if="list.length" :class="$style.content" ref="dom_listContent")
-        div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
+        material-virtualized-list(:list="list" key-name="songmid" ref="list" #default="{ item, index }" :item-height="37"
-          table
+          @scroll="handleScroll" containerClass="scroll" contentClass="list" @contextmenu.native.capture="handleContextMenu")
-            tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
+          div.list-item(@click="handleDoubleClick($event, index)"
-              tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"  @contextmenu="handleListItemRigthClick($event, index)"
+            :class="[{ [$style.active]: isPlayList && playInfo.playIndex === index }, { selected: selectedIndex == index }, { active: selectdListDetailData.includes(item) }, { [$style.disabled]: !assertApiSupport(item.source) }]"
-                @click="handleDoubleClick($event, index)" :class="[isPlayList && playInfo.playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
+            @contextmenu="handleListItemRigthClick($event, index)")
-                td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
+            div.list-item-cell.nobreak.center(style="flex: 0 0 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
-                td.break
+            div.list-item-cell.auto.break(:tips="item.name")
-                  span.select {{item.name}}
+              span.select {{item.name}}
-                  span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
+              span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
-                  //- span.badge.badge-light(v-if="item._types['128k']") 128K
+            div.list-item-cell.break(style="flex: 0 0 22%;")
-                  //- span.badge.badge-light(v-if="item._types['192k']") 192K
+              span.select {{item.singer}}
-                  //- span.badge.badge-secondary(v-if="item._types['320k']") 320K
+            div.list-item-cell.break(style="flex: 0 0 22%;")
-                  //- span.badge.badge-theme-info(v-if="item._types.ape") APE
+              span.select {{item.albumName}}
-                  //- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
+            div.list-item-cell(style="flex: 0 0 9%;")
-                td.break(style="width: 22%;")
+              span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
-                  span.select {{item.singer}}
+            div.list-item-cell(style="flex: 0 0 15%; padding-left: 0; padding-right: 0;")
-                td.break(style="width: 22%;")
+              material-list-buttons(:index="index" @btn-click="handleListBtnClick" :download-btn="assertApiSupport(item.source)")
-                  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(: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()
+    setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
-    this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 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.restoreScroll(this.$route.query.scrollIndex, false)
-    this.setListsScroll()
   },
   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() {
+    handleScroll() {
-      this.clearDelayTimeout()
+      setListPosition(this.listId, this.$refs.list.getScrollTop())
-      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)
     },
     clearDelayTimeout() {
       if (this.delayTimeout) {
@@ -452,22 +428,15 @@ export default {
       }
     },
     handleScrollList(index, isAnimation, callback = () => {}) {
-      let location = this.getMusicLocation(index) - 150
+      this.$refs.list.scrollToIndex(index, -150, isAnimation).then(callback)
-      if (location < 0) location = 0
-      if (isAnimation) {
-        scrollTo(this.$refs.dom_scrollContent, location, 300, callback)
-      } else {
-        this.$refs.dom_scrollContent.scrollTo(0, location)
-        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) {
+    // handleSelectListData(event, clickIndex) {
-      if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
+    //   if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
 
-      if (this.keyEvent.isShiftDown) {
+    //   if (this.keyEvent.isShiftDown) {
-        if (this.selectdListData.length) {
+    //     if (this.selectdListData.length) {
-          let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
+    //       let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
-          if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
+    //       if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
-          this.removeAllSelectList()
+    //       this.removeAllSelectList()
-          let isNeedReverse = false
+    //       let isNeedReverse = false
-          if (clickIndex < lastSelectIndex) {
+    //       if (clickIndex < lastSelectIndex) {
-            let temp = lastSelectIndex
+    //         let temp = lastSelectIndex
-            lastSelectIndex = clickIndex
+    //         lastSelectIndex = clickIndex
-            clickIndex = temp
+    //         clickIndex = temp
-            isNeedReverse = true
+    //         isNeedReverse = true
-          }
+    //       }
-          this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
+    //       this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
-          if (isNeedReverse) this.selectdListData.reverse()
+    //       if (isNeedReverse) this.selectdListData.reverse()
-          let nodes = this.$refs.dom_tbody.childNodes
+    //       // let nodes = this.$refs.dom_tbody.childNodes
-          do {
+    //       // do {
-            nodes[lastSelectIndex].classList.add('active')
+    //       //   nodes[lastSelectIndex].classList.add('active')
-            lastSelectIndex++
+    //       //   lastSelectIndex++
-          } while (lastSelectIndex <= clickIndex)
+    //       // } while (lastSelectIndex <= clickIndex)
-        } else {
+    //     } else {
-          event.currentTarget.classList.add('active')
+    //       // event.currentTarget.classList.add('active')
-          this.selectdListData.push(this.list[clickIndex])
+    //       this.selectdListData.push(this.list[clickIndex])
-        }
+    //     }
-      } else if (this.keyEvent.isModDown) {
+    //   } else if (this.keyEvent.isModDown) {
-        let item = this.list[clickIndex]
+    //     let item = this.list[clickIndex]
-        let index = this.selectdListData.indexOf(item)
+    //     let index = this.selectdListData.indexOf(item)
-        if (index < 0) {
+    //     if (index < 0) {
-          this.selectdListData.push(item)
+    //       this.selectdListData.push(item)
-          event.currentTarget.classList.add('active')
+    //       // event.currentTarget.classList.add('active')
-        } else {
+    //     } else {
-          this.selectdListData.splice(index, 1)
+    //       this.selectdListData.splice(index, 1)
-          event.currentTarget.classList.remove('active')
+    //       // event.currentTarget.classList.remove('active')
-        }
+    //     }
-      } else if (this.selectdListData.length) this.removeAllSelectList()
+    //   } else if (this.selectdListData.length) this.removeAllSelectList()
-    },
+    // },
     removeAllSelectListDetail() {
       this.selectdListDetailData = []
-      let dom_tbody = this.$refs.dom_tbody
+      // let dom_tbody = this.$refs.dom_tbody
-      if (!dom_tbody) return
+      // if (!dom_tbody) return
-      let nodes = dom_tbody.querySelectorAll('.active')
+      // let nodes = dom_tbody.querySelectorAll('.active')
-      for (const node of nodes) {
+      // for (const node of nodes) {
-        if (node.parentNode == dom_tbody) node.classList.remove('active')
+      //   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')
-      }
     },
+    // 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
+      // let nodes = this.$refs.dom_tbody.childNodes
-      for (const node of nodes) {
+      // for (const node of nodes) {
-        node.classList.add('active')
+      //   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.listMenu.itemMenuControl.download = this.assertApiSupport(this.list[index].source)
-        this.assertApiSupport(this.list[index].source)
+      let dom_container = event.target.closest('.' + this.$style.container)
-      let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
+      // let dom_listItemCell = event.target.closest('.list-item-cell')
-      if (dom_selected) dom_selected.classList.remove('selected')
+      const getOffsetValue = (target, x = 0, y = 0) => {
-      this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
+        if (target === dom_container) return { x, y }
-      let dom_td = event.target.closest('td')
+        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.selectedIndex = index
-      this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      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')
+      this.selectedIndex = -1
-      if (dom_selected) dom_selected.classList.remove('selected')
       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)
+            this.selectedIndex = index
-            dom.classList.add('selected')
             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;
+  :global(.list-item) {
-
-  tr {
     &.active {
       color: @color-btn;
     }
   }
-  td {
+  :global(.list-item-cell) {
-    font-size: 12px;
+    font-size: 12px !important;
 
     &:first-child {
       // padding-left: 10px;
-      font-size: 11px;
+      font-size: 11px !important;
-      color: @color-theme_2-font-label;
+      color: @color-theme_2-font-label !important;
-    }
-  }
-
-  &.copying {
-    .no-select {
-      display: none;
     }
   }
 }
@@ -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 {
+    :global(.list) {
-      tr {
+      :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;
         }
       }
     }

src/renderer/views/Setting.vue

@@ -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)
       }