Merge branch 'dev'

2021-10-29 14:23:27 +08:00 · 2021-10-29 14:23:27 +08:00 · a386915b50
parent ff47a224c7 ab16bc849d
commit a386915b50
80 changed files with 2353 additions and 2061 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -22,5 +22,6 @@
  },
  "settings": {
    "html/html-extensions": [".html", ".vue"]
-  }
+  },
+  "ignorePatterns": ["vendors", "*.min.js"]
 }
--- a/.ncurc.js
+++ b/.ncurc.js
@ -3,6 +3,7 @@ module.exports = {
  reject: [
    'vue-loader',
    'webpack-dev-server',
+    'eslint',
    // 'eslint-config-standard'
  ]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -6,6 +6,31 @@ Project versioning adheres to [Semantic Versioning](http://semver.org/).
 Commit convention is based on [Conventional Commits](http://conventionalcommits.org).
 Change log format is based on [Keep a Changelog](http://keepachangelog.com/).

+## [1.15.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.14.1...v1.15.0) - 2021-10-29
+
+### 新增
+
+- 添加黑色托盘图标
+- 自定义源新增`version`字段，新增`utils.buffer.bufToString`方法
+
+### 优化
+
+- 大幅优化我的列表、下载、歌单、排行榜列表性能，现在即使同一列表内的歌曲很多时也不会卡顿了
+- 优化列表同步代码逻辑
+- 优化开关评论时的动画性能
+- 优化进入、离开播放详情页的性能
+- 兼容桌面歌词以触摸的方式移动、调整大小
+- 调整图标尺寸
+
+### 修复
+
+- 修复kg源的歌单链接无法打开的问题
+- 修复同一首歌的URL、歌词等同时需要换源时的处理问题
+
+### 其他
+
+- 更新 Electron 到 v15.3.0
+
 ## [1.14.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.14.0...v1.14.1) - 2021-10-04

 ### 修复
--- a/FAQ.md
+++ b/FAQ.md
@ -128,12 +128,12 @@
 由于软件默认使用了透明窗口，根据Electron官方文档的[说明](https://electronjs.org/docs/api/frameless-window#%E5%B1%80%E9%99%90%E6%80%A7)：
 > 在 windows 操作系统上, 当 DWM 被禁用时, 透明窗口将无法工作。

-因此，当 win7 没有使用**AERO**主题时界面将会显示异常，开启AERO的方法请自行百度：`win7开启aero效果`（开启后可看到任务栏变透明）。<br>
+因此，当 win7 没有使用**Aero**主题时界面将会显示异常，开启AERO的方法请自行百度：`win7开启Aero效果`（开启后可看到任务栏变透明）。<br>
 从`0.14.0`版本起不再强制要求开启透明效果，若你实在不想开启（若非电脑配置太低，墙裂建议开启！），可通过添加运行参数`-dt`来运行程序即可，例如：`.\lx-music-desktop.exe -dt`，添加方法可自行百度“给快捷方式加参数”，该参数的作用是用来控制程序是否使用非透明窗口运行。

-注：启用**AERO**主题后，若软件出现黑边框，则重启软件即可恢复正常。
+注：启用**Aero**主题后，若软件出现黑边框，则重启软件即可恢复正常。

-对于一些完全无法正常显示界面、开启了AERO后问题仍未解决的情况，请阅读下面的 **软件启动后，界面无法显示** 解决。
+对于一些完全无法正常显示界面、开启了AERO后问题仍未解决的情况，请阅读下面的 **Window 7 下软件启动后，界面无法显示** 解决。

 ### Linux 下界面异常

@ -142,19 +142,17 @@

 注：v1.6.0及之后的版本才支持`-dha`参数

-## 软件启动后，界面无法显示
+## Window 7 下软件启动后，界面无法显示

 对于软件启动后，可以在任务栏看到软件，但软件界面在桌面上无任何显示，或者整个界面偶尔闪烁的情况。<br>
 原始问题看：<https://github.com/electron/electron/issues/19569#issuecomment-522231083><br>
 解决办法：下载`.NET Framework 4.7.1`或**更高**版本安装即可(建议安装最新版，若安装过程中遇到问题可尝试自行百度解决)。<br>
 微软官方下载地址：<https://dotnet.microsoft.com/download/dotnet-framework><br>
-下载`Runtime(运行时)`版即可，安装完成后可能需要重启才生效。
+下载`Runtime(运行时)`版即可，安装完成后可能需要重启才生效，**若出现闪烁的情况**，可阅读下面的**Windows 7 下整个界面闪烁**解决。

-若还是不行可尝试以下操作：
+## Windows 7 下整个界面闪烁（消失又出现）

- 更新显卡驱动
- 添加启动参数`-dha`运行（添加的方法请自行百度“给快捷方式加参数”）
- 尝试将绿色版的软件放在**桌面**或**我的文档**运行
+可尝试在关掉软件后，在桌面空白处鼠标右击，在弹出的菜单中选择**个性化**，在弹出的窗口中**切换到系统内置的Aero主题**，然后再启动软件看是否解决。

 ## Windows 7 下桌面歌词字体列表为空

@ -344,8 +342,8 @@ send(EVENT_NAMES.inited, {

 ```

- `@name `：源的名字，建议不要过长，10个字符以内
- `@description `：源的描述，建议不要过长，20个字符以内，可不填，不填时必须保留 @description
+- `@name `：源的名字，建议不要过长，24个字符以内
+- `@description `：源的描述，建议不要过长，36个字符以内，可不填，不填时必须保留 @description
 - `@version`：源的版本号，可不填，不填时可以删除 @version
 - `@author `：脚本作者名字，可不填，不填时可以删除 @author
 - `@homepage `：脚本主页，可不填，不填时可以删除 @homepage
@ -354,6 +352,10 @@ send(EVENT_NAMES.inited, {

 应用为脚本暴露的API对象。

+#### `window.lx.version`
+
+自定义源API版本，API变更时此版本号将会更改（新增于v1.14.0之后）
+
 #### `window.lx.EVENT_NAMES`

 常量事件名称对象，发送、注册事件时传入事件名时使用，可用值：
@ -409,6 +411,7 @@ const cancelHttp = window.lx.request(url, options, callback)
 应用提供给脚本的工具方法：

 - `window.lx.utils.buffer.from`：对应Node.js的 `Buffer.from`
+- `window.lx.utils.buffer.bufToString`：Buffer转字符串 `bufToString(buffer, format)`，`format`对应Node.js `Buffer.toString`的参数（v1.14.0之后新增）
 - `window.lx.utils.crypto.aesEncrypt`：AES加密 `aesEncrypt(buffer, mode, key, iv)`
 - `window.lx.utils.crypto.md5`：MD5加密 `md5(str)`
 - `window.lx.utils.crypto.randomBytes`：生成随机字符串 `randomBytes(size)`
--- a/README.md
+++ b/README.md
@ -36,7 +36,7 @@

 所用技术栈：

- Electron 13
+- Electron 15
 - Vue 2

 已支持的平台：
--- a/build-config/main/webpack.config.base.js
+++ b/build-config/main/webpack.config.base.js
@ -1,4 +1,5 @@
 const path = require('path')
+const ESLintPlugin = require('eslint-webpack-plugin')

 module.exports = {
  target: 'electron-main',
@ -18,17 +19,6 @@ module.exports = {
  },
  module: {
    rules: [
-      {
-        test: /\.js$/,
-        use: {
-          loader: 'eslint-loader',
-          options: {
-            formatter: require('eslint-formatter-friendly'),
-          },
-        },
-        exclude: /node_modules/,
-        enforce: 'pre',
-      },
      {
        test: /\.node$/,
        use: 'node-loader',
@ -38,4 +28,7 @@ module.exports = {
  performance: {
    maxEntrypointSize: 300000,
  },
+  plugins: [
+    new ESLintPlugin(),
+  ],
 }
--- a/build-config/renderer-lyric/webpack.config.base.js
+++ b/build-config/renderer-lyric/webpack.config.base.js
@ -3,6 +3,7 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HTMLPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CleanCSSPlugin = require('less-plugin-clean-css')
+const ESLintPlugin = require('eslint-webpack-plugin')

 const vueLoaderConfig = require('../vue-loader.config')
 const { mergeCSSLoader } = require('../utils')
@ -32,18 +33,6 @@ module.exports = {
  },
  module: {
    rules: [
-      {
-        test: /\.(vue|js)$/,
-        use: {
-          loader: 'eslint-loader',
-          options: {
-            formatter: require('eslint-formatter-friendly'),
-            emitWarning: isDev,
-          },
-        },
-        exclude: /node_modules/,
-        enforce: 'pre',
-      },
      {
        test: /\.node$/,
        use: 'node-loader',
@ -147,5 +136,8 @@ module.exports = {
      filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
      chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css',
    }),
+    new ESLintPlugin({
+      extensions: ['js', 'vue'],
+    }),
  ],
 }
--- a/build-config/renderer/webpack.config.base.js
+++ b/build-config/renderer/webpack.config.base.js
@ -3,6 +3,7 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HTMLPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CleanCSSPlugin = require('less-plugin-clean-css')
+const ESLintPlugin = require('eslint-webpack-plugin')

 const vueLoaderConfig = require('../vue-loader.config')
 const { mergeCSSLoader } = require('../utils')
@ -32,18 +33,6 @@ module.exports = {
  },
  module: {
    rules: [
-      {
-        test: /\.(vue|js)$/,
-        use: {
-          loader: 'eslint-loader',
-          options: {
-            formatter: require('eslint-formatter-friendly'),
-            emitWarning: isDev,
-          },
-        },
-        exclude: /node_modules/,
-        enforce: 'pre',
-      },
      {
        test: /\.node$/,
        use: 'node-loader',
@ -147,5 +136,8 @@ module.exports = {
      filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
      chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css',
    }),
+    new ESLintPlugin({
+      extensions: ['js', 'vue'],
+    }),
  ],
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "lx-music-desktop",
-  "version": "1.14.1",
+  "version": "1.15.0",
  "description": "一个免费的音乐查找助手",
  "main": "./dist/electron/main.js",
  "productName": "lx-music-desktop",
@ -70,7 +70,7 @@
    "up": "cross-env ELECTRON_GET_USE_PROXY=true GLOBAL_AGENT_HTTPS_PROXY=http://localhost:1081 npm i"
  },
  "browserslist": [
-    "Electron 13.3.0"
+    "Electron 15.2.0"
  ],
  "engines": {
    "node": ">= 14"
@ -78,6 +78,7 @@
  "build": {
    "appId": "cn.toside.music.desktop",
    "directories": {
+      "buildResources": "./resources",
      "output": "./build"
    },
    "files": [
@ -90,12 +91,12 @@
      "./licenses"
    ],
    "win": {
-      "icon": "./resources/icons/256x256.ico",
+      "icon": "./resources/icons/icon.ico",
      "legalTrademarks": "lyswhut",
      "artifactName": "${productName} v${version} ${env.ARCH} ${env.TARGET}.${ext}"
    },
    "mac": {
-      "icon": "./resources/icons/512x512.icns",
+      "icon": "./resources/icons/icon.icns",
      "category": "public.app-category.music"
    },
    "linux": {
@ -166,51 +167,51 @@
  },
  "homepage": "https://github.com/lyswhut/lx-music-desktop#readme",
  "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.15.8",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-modules-umd": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-env": "^7.15.8",
    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
    "babel-preset-minify": "^0.5.1",
-    "browserslist": "^4.17.2",
+    "browserslist": "^4.17.5",
    "cfonts": "^2.10.0",
    "chalk": "^4.1.2",
    "changelog-parser": "^2.8.0",
    "copy-webpack-plugin": "^9.0.1",
-    "core-js": "^3.18.1",
+    "core-js": "^3.19.0",
    "cross-env": "^7.0.3",
-    "css-loader": "^6.3.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
+    "css-loader": "^6.5.0",
+    "css-minimizer-webpack-plugin": "^3.1.1",
    "del": "^6.0.0",
-    "electron": "^13.4.0",
-    "electron-builder": "^22.11.7",
+    "electron": "^15.3.0",
+    "electron-builder": "^22.13.1",
    "electron-debug": "^3.2.0",
    "electron-devtools-installer": "^3.2.0",
-    "electron-to-chromium": "^1.3.856",
+    "electron-to-chromium": "^1.3.884",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-formatter-friendly": "^7.0.0",
-    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-promise": "^5.1.1",
    "eslint-plugin-standard": "^4.1.0",
+    "eslint-webpack-plugin": "^3.1.0",
    "file-loader": "^6.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
-    "html-webpack-plugin": "^5.3.2",
-    "less": "^4.1.1",
-    "less-loader": "^10.0.1",
+    "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
    "less-plugin-clean-css": "^1.5.1",
    "markdown-it": "^12.2.0",
-    "mini-css-extract-plugin": "^2.3.0",
+    "mini-css-extract-plugin": "^2.4.3",
    "node-loader": "^2.0.0",
-    "postcss": "^8.3.8",
-    "postcss-loader": "^6.1.1",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
    "postcss-pxtorem": "^6.0.0",
    "pug": "^3.0.2",
    "pug-loader": "^2.4.0",
@ -222,34 +223,32 @@
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.56.0",
-    "webpack-cli": "^4.8.0",
+    "webpack": "^5.60.0",
+    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^3.11.2",
    "webpack-hot-middleware": "^2.25.1",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
-    "bufferutil": "^4.0.4",
+    "bufferutil": "^4.0.5",
    "crypto-js": "^4.1.1",
    "electron-log": "^4.4.1",
    "electron-store": "^8.0.1",
    "electron-updater": "^4.3.9",
-    "font-list": "git+https://github.com/lyswhut/node-font-list.git#c6caf4060e471afe143a4aca30d554644522966d",
+    "font-list": "git+https://github.com/lyswhut/node-font-list.git#2ed3b4ee42e8a43373e8a30d87760c840725843e",
    "http-terminator": "^3.0.3",
    "iconv-lite": "^0.6.3",
    "image-size": "^1.0.0",
-    "koa": "^2.13.3",
-    "long": "^4.0.0",
-    "lrc-file-parser": "^1.2.1",
+    "koa": "^2.13.4",
+    "long": "^5.0.1",
    "needle": "^3.0.0",
    "node-id3": "^0.2.3",
    "request": "^2.88.2",
-    "socket.io": "^4.2.0",
-    "utf-8-validate": "^5.0.6",
+    "socket.io": "^4.3.1",
+    "utf-8-validate": "^5.0.7",
    "vue": "^2.6.14",
    "vue-i18n": "^8.26.5",
-    "vue-router": "^3.5.2",
-    "vuex": "^3.6.2",
-    "vuex-router-sync": "^5.0.0"
+    "vue-router": "^3.5.3",
+    "vuex": "^3.6.2"
  }
 }
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@ -1,4 +1,22 @@
+### 新增
+
+- 添加黑色托盘图标
+- 自定义源新增`version`字段，新增`utils.buffer.bufToString`方法
+
+### 优化
+
+- 大幅优化我的列表、下载、歌单、排行榜列表性能，现在即使同一列表内的歌曲很多时也不会卡顿了
+- 优化列表同步代码逻辑
+- 优化开关评论时的动画性能
+- 优化进入、离开播放详情页的性能
+- 兼容桌面歌词以触摸的方式移动、调整大小
+- 调整图标尺寸
+
 ### 修复

- 修复我的列表搜索无法搜索小括号、中括号等字符的问题
- 修复v1.14.0出现的备份与恢复功能备份的数据无法恢复的问题，同时兼容使用v1.14.0导出的存在问题的数据
+- 修复kg源的歌单链接无法打开的问题
+- 修复同一首歌的URL、歌词等同时需要换源时的处理问题
+
+### 其他
+
+- 更新 Electron 到 v15.3.0
--- a/publish/version.json
+++ b/publish/version.json
--- a/resources/icons/128x128.png
+++ b/resources/icons/128x128.png
--- a/resources/icons/16x16.png
+++ b/resources/icons/16x16.png
--- a/resources/icons/256x256.ico
+++ b/resources/icons/256x256.ico
--- a/resources/icons/256x256.png
+++ b/resources/icons/256x256.png
--- a/resources/icons/32x32.png
+++ b/resources/icons/32x32.png
--- a/resources/icons/48x48.png
+++ b/resources/icons/48x48.png
--- a/resources/icons/512x512.icns
+++ b/resources/icons/512x512.icns
--- a/resources/icons/512x512.png
+++ b/resources/icons/512x512.png
--- a/resources/icons/64x64.png
+++ b/resources/icons/64x64.png
--- a/resources/icons/icon.icns
+++ b/resources/icons/icon.icns
--- a/resources/icons/icon.ico
+++ b/resources/icons/icon.ico
--- a/resources/icons/icon.png
+++ b/resources/icons/icon.png
--- 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',
  },
--- 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
--- a/src/main/modules/sync/server/server.js
+++ b/src/main/modules/sync/server/server.js
@ -5,6 +5,7 @@ const modules = require('../modules')
 const { authCode, authConnect } = require('./auth')
 const { getAddress, getServerId, generateCode, getClientKeyInfo } = require('./utils')
 const syncList = require('./syncList')
+const { log } = require('@common/utils')


 let status = {
@ -88,7 +89,8 @@ const handleStartServer = (port = 9527) => new Promise((resolve, reject) => {
    try {
      await syncList(io, socket)
    } catch (err) {
-      console.log(err)
+      // console.log(err)
+      log.warn(err)
      return
    }
    status.devices.push(keyInfo)
--- a/src/main/modules/sync/server/syncList.js
+++ b/src/main/modules/sync/server/syncList.js
@ -260,10 +260,7 @@ const mergeListDataFromSnapshot = (sourceList, targetList, snapshotList, addMusi
  for (const m of sourceList.list) sourceListItemIds.add(m.songmid)
  for (const m of targetList.list) targetListItemIds.add(m.songmid)
  for (const m of snapshotList.list) {
-    if (!sourceListItemIds.has(m.songmid)) removedListIds.add(m.songmid)
-  }
-  for (const m of snapshotList.list) {
-    if (!targetListItemIds.has(m.songmid)) removedListIds.add(m.songmid)
+    if (!sourceListItemIds.has(m.songmid) || !targetListItemIds.has(m.songmid)) removedListIds.add(m.songmid)
  }

  let newList
@ -311,10 +308,7 @@ const handleMergeListDataFromSnapshot = async(socket, snapshot) => {
  for (const l of remoteListData.userList) remoteUserListIds.add(l.id)

  for (const l of snapshot.userList) {
-    if (!localUserListIds.has(l.id)) removedListIds.add(l.id)
-  }
-  for (const l of snapshot.userList) {
-    if (!remoteUserListIds.has(l.id)) removedListIds.add(l.id)
+    if (!localUserListIds.has(l.id) || !remoteUserListIds.has(l.id)) removedListIds.add(l.id)
  }

  let newUserList = []
@ -353,7 +347,7 @@ const registerUpdateSnapshotTask = (socket, snapshot) => {
    if (loveList != null) snapshot.loveList = loveList
    if (userList != null) snapshot.userList = userList
    updateSnapshot(socket.data.snapshotFilePath, JSON.stringify(snapshot))
-  }, 10000)
+  }, 2000)
  global.lx_event.common.on(COMMON_EVENT_NAME.saveMyList, handleUpdateSnapshot)
  socket.on('disconnect', () => {
    global.lx_event.common.off(COMMON_EVENT_NAME.saveMyList, handleUpdateSnapshot)
--- a/src/main/modules/tray.js
+++ b/src/main/modules/tray.js
@ -1,5 +1,5 @@
-const { app, Tray, Menu } = require('electron')
-const { isWin } = require('../../common/utils')
+const { app, Tray, Menu, nativeImage } = require('electron')
+// const { isWin } = require('../../common/utils')
 const { tray: TRAY_EVENT_NAME, common: COMMON_EVENT_NAME, mainWindow: MAIN_WINDOW_NAME } = require('../events/_name')
 const path = require('path')
 let isEnableTray = null
@ -7,12 +7,17 @@ let themeId = null
 const themeList = [
  {
    id: 0,
-    fileName: 'tray0Template',
+    fileName: 'trayTemplate',
    isNative: true,
  },
  {
    id: 1,
-    fileName: 'tray1Template',
+    fileName: 'tray_origin',
+    isNative: false,
+  },
+  {
+    id: 2,
+    fileName: 'tray_black',
    isNative: false,
  },
 ]
@ -43,11 +48,11 @@ const createTray = () => {
  if ((global.modules.tray && !global.modules.tray.isDestroyed()) || !global.appSetting.tray || !global.appSetting.tray.isShow) return

  themeId = global.appSetting.tray.themeId
-  let themeName = (themeList.find(item => item.id === themeId) || themeList[0]).fileName
-  const iconPath = path.join(global.__static, 'images/tray', isWin ? themeName + '@2x.ico' : themeName + '.png')
+  let theme = themeList.find(item => item.id === themeId) || themeList[0]
+  const iconPath = path.join(global.__static, 'images/tray', theme.fileName + '.png')

  // 托盘
-  global.modules.tray = new Tray(iconPath)
+  global.modules.tray = new Tray(nativeImage.createFromPath(iconPath))

  global.modules.tray.setToolTip('洛雪音乐助手')
  createMenu(global.modules.tray)
@ -140,7 +145,7 @@ const createMenu = tray => {

 const setTrayImage = themeId => {
  if (!global.modules.tray) return
-  let themeName = (themeList.find(item => item.id === themeId) || themeList[0]).fileName
-  const iconPath = path.join(global.__static, 'images/tray', isWin ? themeName + '@2x.ico' : themeName + '.png')
-  global.modules.tray.setImage(iconPath)
+  let theme = themeList.find(item => item.id === themeId) || themeList[0]
+  const iconPath = path.join(global.__static, 'images/tray', theme.fileName + '.png')
+  global.modules.tray.setImage(nativeImage.createFromPath(iconPath))
 }
--- a/src/main/modules/userApi/renderer/preload.js
+++ b/src/main/modules/userApi/renderer/preload.js
@ -66,6 +66,7 @@ const handleRequest = (context, { requestKey, data }) => {
 *
 * @param {*} context
 * @param {*} info {
+ *                    openDevTools: false,
 *                    status: true,
 *                    message: 'xxx',
 *                    sources: {
@ -184,7 +185,7 @@ contextBridge.exposeInMainWorld('lx', {
  utils: {
    crypto: {
      aesEncrypt(buffer, mode, key, iv) {
-        const cipher = createCipheriv('aes-128-' + mode, key, iv)
+        const cipher = createCipheriv(mode, key, iv)
        return Buffer.concat([cipher.update(buffer), cipher.final()])
      },
      rsaEncrypt(buffer, key) {
@ -202,8 +203,12 @@ contextBridge.exposeInMainWorld('lx', {
      from(...args) {
        return Buffer.from(...args)
      },
+      bufToString(buf, format) {
+        return Buffer.from(buf, 'binary').toString(format)
+      },
    },
  },
+  version: '1.1.0',
  // removeEvent(eventName, handler) {
  //   if (!eventNames.includes(eventName)) return Promise.reject(new Error('The event is not supported: ' + eventName))
  //   let handlers
--- a/src/main/modules/userApi/utils/index.js
+++ b/src/main/modules/userApi/utils/index.js
@ -19,9 +19,9 @@ exports.importApi = script => {
  let name = scriptInfo[1] || ''
  let description = scriptInfo[2] || ''
  name = name.startsWith(' * @name ') ? name.replace(' * @name ', '').trim() : `user_api_${new Date().toLocaleString()}`
-  if (name.length > 10) name = name.substring(0, 10) + '...'
+  if (name.length > 24) name = name.substring(0, 24) + '...'
  description = description.startsWith(' * @description ') ? description.replace(' * @description ', '').trim() : ''
-  if (description.length > 20) description = description.substring(0, 20) + '...'
+  if (description.length > 36) description = description.substring(0, 36) + '...'
  const apiInfo = {
    id: `user_api_${Math.random().toString().substring(2, 5)}_${Date.now()}`,
    name,
--- a/src/renderer-lyric/App.vue
+++ b/src/renderer-lyric/App.vue
@ -5,14 +5,14 @@
      .control-bar(v-show="!lrcConfig.isLock")
        core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
    core-lyric(:lrcConfig="lrcConfig" :isPlayLxlrc="isPlayLxlrc" :isShowLyricTranslation="isShowLyricTranslation")
-  div.resize-left(@mousedown.self="handleMouseDown('left', $event)")
-  div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
-  div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
-  div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)")
-  div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $event)")
-  div.resize-top-right(@mousedown.self="handleMouseDown('top-right', $event)")
-  div.resize-bottom-left(@mousedown.self="handleMouseDown('bottom-left', $event)")
-  div.resize-bottom-right(@mousedown.self="handleMouseDown('bottom-right', $event)")
+  div.resize-left(@mousedown.self="handleMouseDown('left', $event)" @touchstart.self="handleTouchDown('left', $event)")
+  div.resize-top(@mousedown.self="handleMouseDown('top', $event)" @touchstart.self="handleTouchDown('top', $event)")
+  div.resize-right(@mousedown.self="handleMouseDown('right', $event)" @touchstart.self="handleTouchDown('right', $event)")
+  div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)" @touchstart.self="handleTouchDown('bottom', $event)")
+  div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $event)" @touchstart.self="handleTouchDown('top-left', $event)")
+  div.resize-top-right(@mousedown.self="handleMouseDown('top-right', $event)" @touchstart.self="handleTouchDown('top-right', $event)")
+  div.resize-bottom-left(@mousedown.self="handleMouseDown('bottom-left', $event)" @touchstart.self="handleTouchDown('bottom-left', $event)")
+  div.resize-bottom-right(@mousedown.self="handleMouseDown('bottom-right', $event)" @touchstart.self="handleTouchDown('bottom-right', $event)")
  core-icons
 </template>

@ -116,16 +116,34 @@ export default {
      this.isPlayLxlrc = isPlayLxlrc
      if (this.$i18n.locale !== languageId && languageId != null) this.$i18n.locale = languageId
    },
-    handleMouseDown(origin, event) {
+    handleDown(origin, clientX, clientY) {
      this.handleMouseUp()
      this.resize.origin = origin
-      this.resize.msDownX = event.clientX
-      this.resize.msDownY = event.clientY
+      this.resize.msDownX = clientX
+      this.resize.msDownY = clientY
    },
    handleMouseUp() {
      this.resize.origin = null
    },
+    handleMouseDown(origin, event) {
+      this.handleDown(origin, event.clientX, event.clientY)
+    },
+    handleTouchDown(origin, event) {
+      if (event.changedTouches.length) {
+        const touch = event.changedTouches[0]
+        this.handleDown(origin, touch.clientX, touch.clientY)
+      }
+    },
    handleMouseMove(event) {
+      this.handleMove(event.clientX, event.clientY)
+    },
+    handleTouchMove(event) {
+      if (event.changedTouches.length) {
+        const touch = event.changedTouches[0]
+        this.handleMove(touch.clientX, touch.clientY)
+      }
+    },
+    handleMove(clientX, clientY) {
      if (!this.resize.origin) return
      // if (!event.target.classList.contains('resize-' + this.resize.origin)) return
      // console.log(event.target)
@ -136,49 +154,49 @@ export default {
      let temp
      switch (this.resize.origin) {
        case 'left':
-          temp = event.clientX - this.resize.msDownX
+          temp = clientX - this.resize.msDownX
          bounds.w = -temp
          bounds.x = temp
          break
        case 'right':
-          bounds.w = event.clientX - this.resize.msDownX
+          bounds.w = clientX - this.resize.msDownX
          this.resize.msDownX += bounds.w
          break
        case 'top':
-          temp = event.clientY - this.resize.msDownY
+          temp = clientY - this.resize.msDownY
          bounds.y = temp
          bounds.h = -temp
          break
        case 'bottom':
-          bounds.h = event.clientY - this.resize.msDownY
+          bounds.h = clientY - this.resize.msDownY
          this.resize.msDownY += bounds.h
          break
        case 'top-left':
-          temp = event.clientX - this.resize.msDownX
+          temp = clientX - this.resize.msDownX
          bounds.w = -temp
          bounds.x = temp
-          temp = event.clientY - this.resize.msDownY
+          temp = clientY - this.resize.msDownY
          bounds.y = temp
          bounds.h = -temp
          break
        case 'top-right':
-          temp = event.clientY - this.resize.msDownY
+          temp = clientY - this.resize.msDownY
          bounds.y = temp
          bounds.h = -temp
-          bounds.w = event.clientX - this.resize.msDownX
+          bounds.w = clientX - this.resize.msDownX
          this.resize.msDownX += bounds.w
          break
        case 'bottom-left':
-          temp = event.clientX - this.resize.msDownX
+          temp = clientX - this.resize.msDownX
          bounds.w = -temp
          bounds.x = temp
-          bounds.h = event.clientY - this.resize.msDownY
+          bounds.h = clientY - this.resize.msDownY
          this.resize.msDownY += bounds.h
          break
        case 'bottom-right':
-          bounds.w = event.clientX - this.resize.msDownX
+          bounds.w = clientX - this.resize.msDownX
          this.resize.msDownX += bounds.w
-          bounds.h = event.clientY - this.resize.msDownY
+          bounds.h = clientY - this.resize.msDownY
          this.resize.msDownY += bounds.h
          break
      }
@ -187,9 +205,9 @@ export default {
      bounds.h = window.innerHeight + bounds.h
      rendererSend(NAMES.winLyric.set_win_bounds, bounds)
    },
-    handleMouseOver() {
-      // this.handleMouseUp()
-    },
+    // handleMouseOver() {
+    //   // this.handleMouseUp()
+    // },
  },
 }
 </script>
--- a/src/renderer-lyric/components/core/Lyric.vue
+++ b/src/renderer-lyric/components/core/Lyric.vue
@ -1,5 +1,6 @@
 <template lang="pug">
-div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }, { [$style.lrcActiveZoom]: lrcConfig.style.isZoomActiveLrc } ]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
+div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }, { [$style.lrcActiveZoom]: lrcConfig.style.isZoomActiveLrc } ]"
+  :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart" ref="dom_lyric")
  div(:class="$style.lyricSpace")
  div(:class="[$style.lyricText]" ref="dom_lyric_text")
  //- div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lineContent, lyric.line == index ? (lrcConfig.style.isZoomActiveLrc ? $style.lrcActiveZoom : $style.lrcActive) : null]")
@ -167,12 +168,16 @@ export default {
  mounted() {
    document.addEventListener('mousemove', this.handleMouseMsMove)
    document.addEventListener('mouseup', this.handleMouseMsUp)
+    document.addEventListener('touchmove', this.handleTouchMove)
+    document.addEventListener('touchend', this.handleMouseMsUp)
    rendererSend(NAMES.winLyric.get_lyric_info, 'info')
  },
  beforeDestroy() {
    this.clearLyricScrollTimeout()
    document.removeEventListener('mousemove', this.handleMouseMsMove)
    document.removeEventListener('mouseup', this.handleMouseMsUp)
+    document.removeEventListener('touchmove', this.handleTouchMove)
+    document.removeEventListener('touchend', this.handleMouseMsUp)
  },
  methods: {
    handleSetInfo({ type, data }) {
@ -234,49 +239,59 @@ export default {
      let dom_p = this.dom_lines[this.lyric.line]
      cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.5 + dom_p.clientHeight / 2) : 0)
    },
-    handleLyricMouseDown(e) {
-      if (e.target.classList.contains('font') ||
-        e.target.parentNode.classList.contains('font') ||
-        e.target.classList.contains('translation') ||
-        e.target.parentNode.classList.contains('translation')) {
+    handleLyricDown(target, x, y) {
+      if (target.classList.contains('font') ||
+        target.parentNode.classList.contains('font') ||
+        target.classList.contains('translation') ||
+        target.parentNode.classList.contains('translation')) {
        this.lyricEvent.isMsDown = true
-        this.lyricEvent.msDownY = e.clientY
+        this.lyricEvent.msDownY = y
        this.lyricEvent.msDownScrollY = this.$refs.dom_lyric.scrollTop
      } else {
        this.winEvent.isMsDown = true
-        this.winEvent.msDownX = e.clientX
-        this.winEvent.msDownY = e.clientY
+        this.winEvent.msDownX = x
+        this.winEvent.msDownY = y
+      }
+    },
+    handleLyricMouseDown(e) {
+      this.handleLyricDown(e.target, e.clientX, e.clientY)
+    },
+    handleLyricTouchStart(e) {
+      if (e.changedTouches.length) {
+        const touch = e.changedTouches[0]
+        this.handleLyricDown(e.target, touch.clientX, touch.clientY)
      }
    },
    handleMouseMsUp(e) {
      this.lyricEvent.isMsDown = false
      this.winEvent.isMsDown = false
    },
-    handleMouseMsMove(e) {
+    handleMove(x, y) {
      if (this.lyricEvent.isMsDown) {
        if (!this.lyricEvent.isStopScroll) this.lyricEvent.isStopScroll = true
        if (cancelScrollFn) {
          cancelScrollFn()
          cancelScrollFn = null
        }
-        this.$refs.dom_lyric.scrollTop = this.lyricEvent.msDownScrollY + this.lyricEvent.msDownY - e.clientY
+        this.$refs.dom_lyric.scrollTop = this.lyricEvent.msDownScrollY + this.lyricEvent.msDownY - y
        this.startLyricScrollTimeout()
      } else if (this.winEvent.isMsDown) {
        rendererSend(NAMES.winLyric.set_win_bounds, {
-          x: e.clientX - this.winEvent.msDownX,
-          y: e.clientY - this.winEvent.msDownY,
+          x: x - this.winEvent.msDownX,
+          y: y - this.winEvent.msDownY,
          w: window.innerWidth,
          h: window.innerHeight,
        })
      }
-
-      // if (this.volumeEvent.isMsDown) {
-      //   let val = this.volumeEvent.msDownValue + (e.clientX - this.volumeEvent.msDownX) / 70
-      //   this.volume = val < 0 ? 0 : val > 1 ? 1 : val
-      //   if (this.audio) this.audio.volume = this.volume
-      // }
-
-      // console.log(val)
+    },
+    handleTouchMove(e) {
+      if (e.changedTouches.length) {
+        const touch = e.changedTouches[0]
+        this.handleMove(touch.clientX, touch.clientY)
+      }
+    },
+    handleMouseMsMove(e) {
+      this.handleMove(e.clientX, e.clientY)
    },
    startLyricScrollTimeout() {
      this.clearLyricScrollTimeout()
--- 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() // 初始化下载列表
    },
--- 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}';
--- 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')
--- a/src/renderer/components/core/Player.vue
+++ b/src/renderer/components/core/Player.vue
@ -5,7 +5,7 @@ div(:class="$style.player")
    svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
      use(:xlink:href='`#${$style.iconPic}`')
  div(:class="$style.middle")
-    div(:class="$style.middleContainer" v-if="!isShowPlayerDetail")
+    div(:class="$style.middleContainer")
      div(:class="$style.column1")
        div(:class="$style.container")
          div(:class="$style.title" @click="handleCopy(title)" :tips="title + $t('core.player.copy_title')") {{title}}
@ -64,7 +64,7 @@ div(:class="$style.player")
  //- transition(enter-active-class="animated lightSpeedIn"
  transition(enter-active-class="animated lightSpeedIn"
      leave-active-class="animated slideOutDown")
-    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
+    core-player-detail(v-if="isShowPlayerDetail" :visible.sync="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
                      :lyric="lyric" :list="list" :listId="listId"
                      :playInfo="{ nowPlayTimeStr, maxPlayTimeStr, progress, nowPlayTime, status }"
                      :isPlay="isPlay" @action="handlePlayDetailAction"
@ -141,11 +141,12 @@ export default {
        playTime: 0,
      },
      isShowAddMusicTo: false,
+      isShowPlayerDetail: false,
    }
  },
  computed: {
    ...mapGetters(['setting']),
-    ...mapGetters('player', ['list', 'changePlay', 'playMusicInfo', 'isShowPlayerDetail', 'playInfo', 'playedList']),
+    ...mapGetters('player', ['list', 'changePlay', 'playMusicInfo', 'playInfo', 'playedList']),
    // pic() {
    //   return this.musicInfo.img ? this.musicInfo.img : ''
    // },
@ -340,7 +341,6 @@ export default {
      'setPlayMusicInfo',
      'setPlayIndex',
      'resetChangePlay',
-      'visiblePlayerDetail',
      'clearPlayedList',
      'setPlayedList',
    ]),
@ -769,7 +769,7 @@ export default {
    },
    showPlayerDetail() {
      if (!this.targetSong) return
-      this.visiblePlayerDetail(true)
+      this.isShowPlayerDetail = true
    },
    handleTransitionEnd(e) {
      // console.log(e)
--- a/src/renderer/components/core/PlayerDetail.vue
+++ b/src/renderer/components/core/PlayerDetail.vue
@ -4,7 +4,7 @@
    //- div(:class="$style.bg2")
    div(:class="$style.header")
      div(:class="$style.controBtn")
-        button(type="button" :class="$style.hide" :tips="$t('core.player.hide_detail')" @click="visiblePlayerDetail(false)")
+        button(type="button" :class="$style.hide" :tips="$t('core.player.hide_detail')" @click="hide")
          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
            use(xlink:href='#icon-window-hide')
        button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
@ -96,7 +96,7 @@


 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters } from 'vuex'
 import { base as eventBaseName } from '../../event/names'
 import { clipboardWriteText, scrollTo } from '../../utils'

@ -104,6 +104,10 @@ let cancelScrollFn = null

 export default {
  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
    musicInfo: {
      type: Object,
      default() {
@ -260,12 +264,11 @@ export default {
  },
  computed: {
    ...mapGetters(['setting']),
-    ...mapGetters('player', ['isShowPlayerDetail']),
  },
  methods: {
-    ...mapMutations('player', [
-      'visiblePlayerDetail',
-    ]),
+    hide() {
+      this.$emit('update:visible', false)
+    },
    listenEvent() {
      document.addEventListener('mousemove', this.handleMouseMsMove)
      document.addEventListener('mouseup', this.handleMouseMsUp)
@ -316,7 +319,7 @@ export default {
        return
      }
      this.clickTime = 0
-      this.visiblePlayerDetail(false)
+      this.hide()
    },
    handleLyricMouseDown(e) {
      // console.log(e)
@ -511,7 +514,8 @@ export default {
  min-height: 0;
  overflow: hidden;
  display: flex;
-  padding: 0 30px;
+  margin: 0 30px;
+  position: relative;

  &.showComment {
    .left {
@ -527,13 +531,13 @@ export default {
      }
    }
    .comment {
-      flex-basis: 50%;
      opacity: 1;
+      transform: scaleX(1);
    }
  }
 }
 .left {
-  flex: 40%;
+  flex: 0 0 40%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
@ -698,9 +702,14 @@ export default {
 }

 .comment {
-  flex: 0 0 0;
-  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  opacity: 1;
  margin-left: 10px;
+  transform: scaleX(0);
 }

 .footer {
--- a/src/renderer/components/material/MusicComment.vue
+++ b/src/renderer/components/material/MusicComment.vue
@ -185,7 +185,8 @@ export default {
  display: flex;
  flex-flow: column nowrap;
  transition: @transition-theme;
-  transition-property: flex-basis opacity;
+  transition-property: transform,opacity;
+  transform-origin: 100%;
  overflow: hidden;
 }
 .commentHeader {
--- a/src/renderer/components/material/PactModal.vue
+++ b/src/renderer/components/material/PactModal.vue
@ -96,6 +96,12 @@ export default {
    ...mapMutations(['setAgreePact']),
    handleClick() {
      this.setAgreePact()
+      setTimeout(() => {
+        this.$dialog({
+          message: Buffer.from('e69cace8bdafe4bbb6e5ae8ce585a8e5858de8b4b9e4b894e5bc80e6ba90efbc8ce5a682e69e9ce4bda0e698afe88ab1e992b1e8b4ade4b9b0e79a84efbc8ce8afb7e79bb4e68ea5e7bb99e5b7aee8af84efbc810a0a5468697320736f667477617265206973206672656520616e64206f70656e20736f757263652e', 'hex').toString(),
+          confirmButtonText: Buffer.from('e5a5bde79a8420284f4b29', 'hex').toString(),
+        })
+      }, 2000)
    },
    handleClose(isExit) {
      if (isExit) return rendererSend(NAMES.mainWindow.close, true)
--- 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}}
 </template>

--- 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="listItemHeight"
+            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)")
@ -48,6 +72,7 @@ div(:class="$style.songList")
 import { mapGetters } from 'vuex'
 import { scrollTo, clipboardWriteText, assertApiSupport } from '../../utils'
 import musicSdk from '../../utils/music'
+import { windowSizeList } from '@common/config'
 export default {
  name: 'MaterialSongList',
  model: {
@ -138,6 +163,9 @@ export default {
        },
      ]
    },
+    listItemHeight() {
+      return parseInt(windowSizeList.find(item => item.id == this.setting.windowSizeId).fontSize) / 16 * 37
+    },
  },
  watch: {
    // selectdList(n) {
@ -175,7 +203,9 @@ export default {
        isModDown: false,
      },
      lastSelectIndex: 0,
+      selectedIndex: -1,
      listMenu: {
+        rightClickItemIndex: -1,
        isShowItemMenu: false,
        itemMenuControl: {
          play: true,
@ -233,7 +263,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 +294,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 +305,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 +315,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 +322,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 +339,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 +356,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 +422,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 +430,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 +473,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;
        }
      }
    }
--- a/src/renderer/components/material/VirtualizedList.vue
+++ b/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 * this.outsideNum * 0.6) 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>
--- a/src/renderer/lang/en-us/view/setting.json
+++ b/src/renderer/lang/en-us/view/setting.json
@ -120,6 +120,7 @@
  "other_resource_cache_clear_btn": "Clear resource cache",
  "other_resource_cache_label": "The software has used cache size: ",
  "other_tray_theme": "Tray Icon Style",
+  "other_tray_theme_black": "Black Color",
  "other_tray_theme_native": "Solid Color",
  "other_tray_theme_origin": "Primary Color",
  "play": "Play",
--- a/src/renderer/lang/zh-cn/view/setting.json
+++ b/src/renderer/lang/zh-cn/view/setting.json
@ -120,6 +120,7 @@
  "other_resource_cache_clear_btn": "清理资源缓存",
  "other_resource_cache_label": "软件已使用缓存大小：",
  "other_tray_theme": "托盘图标样式",
+  "other_tray_theme_black": "黑色",
  "other_tray_theme_native": "纯色",
  "other_tray_theme_origin": "原色",
  "play": "播放设置",
--- a/src/renderer/lang/zh-tw/view/setting.json
+++ b/src/renderer/lang/zh-tw/view/setting.json
@ -120,6 +120,7 @@
  "other_resource_cache_clear_btn": "清理資源緩存",
  "other_resource_cache_label": "軟件已使用緩存大小：",
  "other_tray_theme": "托盤圖標樣式",
+  "other_tray_theme_black": "黑色",
  "other_tray_theme_native": "純色",
  "other_tray_theme_origin": "原色",
  "play": "播放設置",
--- 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'
--- a/src/renderer/plugins/Dialog/Dialog.vue
+++ b/src/renderer/plugins/Dialog/Dialog.vue
@ -61,6 +61,7 @@ export default {
  max-width: 320px;
  min-width: 220px;
  line-height: 1.5;
+  white-space: pre-line;
 }

 .footer {
--- 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 {
--- 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
@ -53,13 +54,21 @@ const getters = {
  allList: () => allList,
 }

+const getOtherSourcePromises = new Map()
+
 // actions
 const actions = {
  getOtherSource({ state, commit }, musicInfo) {
-    return (musicInfo.otherSource && musicInfo.otherSource.length ? Promise.resolve(musicInfo.otherSource) : musicSdk.findMusic(musicInfo)).then(otherSource => {
+    if (musicInfo.otherSource?.length) return Promise.resolve(musicInfo.otherSource)
+    let key = `${musicInfo.source}_${musicInfo.songmid}`
+    if (getOtherSourcePromises.has(key)) return getOtherSourcePromises.get(key)
+    const promise = musicSdk.findMusic(musicInfo).then(otherSource => {
      commit('setOtherSource', { musicInfo, otherSource })
+      if (getOtherSourcePromises.has(key)) getOtherSourcePromises.delete(key)
      return otherSource
    })
+    getOtherSourcePromises.set(key, promise)
+    return promise
  },
 }

@ -332,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) {
@ -372,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, {
@ -410,6 +417,9 @@ const mutations = {
  setOtherSource(state, { musicInfo, otherSource }) {
    musicInfo.otherSource = otherSource
  },
+  setPrevSelectListId(state, val) {
+    setListPrevSelectId(val)
+  },
 }

 export default {
--- a/src/renderer/store/modules/player.js
+++ b/src/renderer/store/modules/player.js
@ -18,7 +18,6 @@ const state = {
  },
  playIndex: -1,
  changePlay: false,
-  isShowPlayerDetail: false,
  playedList: [],

  playMusicInfo: null,
@ -197,7 +196,6 @@ const getters = {
      musicInfo: state.playMusicInfo.musicInfo,
    }
  },
-  isShowPlayerDetail: state => state.isShowPlayerDetail,
  playMusicInfo: state => state.playMusicInfo,
  playedList: state => state.playedList,
  tempPlayList: state => state.tempPlayList,
@ -457,9 +455,6 @@ const mutations = {
  clearPlayedList(state) {
    state.playedList.splice(0, state.playedList.length)
  },
-  visiblePlayerDetail(state, visible) {
-    state.isShowPlayerDetail = visible
-  },
  setTempPlayList(state, list) {
    state.tempPlayList.push(...list.map(({ musicInfo, listId }) => ({ musicInfo, listId, isTempPlay: true })))
    if (!state.playMusicInfo) this.commit('player/playNext')
--- 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)
  },
--- a/src/renderer/utils/data.js
+++ 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()
+}
--- a/src/renderer/utils/music/kg/comment.js
+++ b/src/renderer/utils/music/kg/comment.js
@ -29,7 +29,8 @@ export default {
    const { body, statusCode } = await _requestObj2.promise
    // console.log(body)
    if (statusCode != 200 || body.err_code !== 0) throw new Error('获取热门评论失败')
-    return { source: 'kg', comments: this.filterComment(body.weightList || []) }
+    const total = body.weightList?.length ?? 0
+    return { source: 'kg', comments: this.filterComment(body.weightList || []), total, page, limit, maxPage: 1 }
  },
  async getReplyComment({ songmid, audioId }, replyId, page = 1, limit = 100) {
    if (this._requestObj2) this._requestObj2.cancelHttp()
--- a/src/renderer/utils/music/kg/songList.js
+++ b/src/renderer/utils/music/kg/songList.js
@ -1,6 +1,17 @@
 import { httpFetch } from '../../request'
 import { decodeName, formatPlayTime, sizeFormate } from '../../index'
 import { toMD5 } from '../utils'
+import infSign from './vendors/infSign.min'
+
+const handleSignature = (id, page, limit) => new Promise((resolve, reject) => {
+  infSign({ appid: 1058, type: 0, module: 'playlist', page, pagesize: limit, specialid: id }, null, {
+    useH5: !0,
+    isCDN: !0,
+    callback(i) {
+      resolve(i.signature)
+    },
+  })
+})

 export default {
  _requestObj_tags: null,
@ -35,6 +46,7 @@ export default {
      id: '8',
    },
  ],
+  cache: new Map(),
  regExps: {
    listData: /global\.data = (\[.+\]);/,
    listInfo: /global = {[\s\S]+?name: "(.+)"[\s\S]+?pic: "(.+)"[\s\S]+?};/,
@ -249,7 +261,7 @@ export default {
    })
    if (!songInfo.list) {
      if (songInfo.global_collection_id) return this.getUserListDetail2(songInfo.global_collection_id)
-      else throw new Error('fail')
+      else return this.getUserListDetail4(songInfo, chain, page).catch(() => this.getUserListDetail5(chain))
    }
    let result = await Promise.all(this.createTask(songInfo.list.map(item => ({ hash: item.hash })))).then(([...datas]) => datas.flat())
    // console.log(info, songInfo)
@ -362,6 +374,94 @@ export default {
    }
  },

+  async getListInfoByChain(chain) {
+    if (this.cache.has(chain)) return this.cache.get(chain)
+    const { body } = await httpFetch(`https://m.kugou.com/share/?chain=${chain}&id=${chain}`, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1',
+      },
+    }).promise
+    let result = body.match(/var\sphpParam\s=\s({.+?});/)
+    if (result) result = JSON.parse(result[1])
+    this.cache.set(chain, result)
+    return result
+  },
+
+  async getUserListDetailByPcChain(chain) {
+    let key = `${chain}_pc_list`
+    if (this.cache.has(key)) return this.cache.get(key)
+    const { body } = await httpFetch(`http://www.kugou.com/share/${chain}.html`, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36',
+      },
+    }).promise
+    let result = body.match(/var\sdataFromSmarty\s=\s(\[.+?\])/)
+    if (result) result = JSON.parse(result[1])
+    this.cache.set(chain, result)
+    result = await Promise.all(this.createTask(result.map(item => ({ hash: item.hash })))).then(([...datas]) => datas.flat())
+    // console.log(info, songInfo)
+    return this.filterData2(result)
+  },
+
+  async getUserListDetail4(songInfo, chain, page) {
+    const limit = 100
+    const [listInfo, list] = await Promise.all([
+      this.getListInfoByChain(chain),
+      this.getUserListDetailById(songInfo.id, page, limit),
+    ])
+    return {
+      list: list || [],
+      page,
+      limit,
+      total: listInfo.songcount,
+      source: 'kg',
+      info: {
+        name: listInfo.specialname,
+        img: listInfo.imgurl && listInfo.imgurl.replace('{size}', 240),
+        // desc: body.result.info.list_desc,
+        author: listInfo.nickname,
+        // play_count: this.formatPlayCount(info.count),
+      },
+    }
+  },
+
+  async getUserListDetail5(chain) {
+    const [listInfo, list] = await Promise.all([
+      this.getListInfoByChain(chain),
+      this.getUserListDetailByPcChain(chain),
+    ])
+    return {
+      list: list || [],
+      page: 1,
+      limit: this.listDetailLimit,
+      total: listInfo.songcount,
+      source: 'kg',
+      info: {
+        name: listInfo.specialname,
+        img: listInfo.imgurl && listInfo.imgurl.replace('{size}', 240),
+        // desc: body.result.info.list_desc,
+        author: listInfo.nickname,
+        // play_count: this.formatPlayCount(info.count),
+      },
+    }
+  },
+
+  async getUserListDetailById(id, page, limit) {
+    const signature = await handleSignature(id, page, limit)
+    let info = await this.createHttp(`https://pubsongscdn.kugou.com/v2/get_other_list_file?srcappid=2919&clientver=20000&appid=1058&type=0&module=playlist&page=${page}&pagesize=${limit}&specialid=${id}&signature=${signature}`, {
+      headers: {
+        Referer: 'https://m3ws.kugou.com/share/index.php',
+        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
+        dfid: '-',
+      },
+    })
+
+    // console.log(info)
+    let result = await Promise.all(this.createTask(info.info.map(item => ({ hash: item.hash })))).then(([...datas]) => datas.flat())
+    // console.log(info, songInfo)
+    return this.filterData2(result)
+  },
+
  async getUserListDetail(link, page, retryNum = 0) {
    if (retryNum > 3) return Promise.reject(new Error('link try max num'))
    if (link.includes('#')) link = link.replace(/#.*$/, '')
--- a/src/renderer/utils/music/kg/vendors/infSign.min.js
+++ b/src/renderer/utils/music/kg/vendors/infSign.min.js
--- a/src/renderer/utils/music/kw/comment.js
+++ b/src/renderer/utils/music/kw/comment.js
@ -28,7 +28,7 @@ export default {
    const { body, statusCode } = await _requestObj2.promise
    if (statusCode != 200 || body.result !== 'ok') throw new Error('获取热门评论失败')
    // console.log(body)
-    return { source: 'kw', comments: this.filterComment(body.rows) }
+    return { source: 'kw', comments: this.filterComment(body.rows), total: body.total, page, limit, maxPage: Math.ceil(body.total / limit) || 1 }
  },
  filterComment(rawList) {
    if (!rawList) return []
--- a/src/renderer/utils/music/mg/comment.js
+++ b/src/renderer/utils/music/mg/comment.js
@ -53,7 +53,7 @@ export default {
    const { body, statusCode } = await _requestObj2.promise
    // console.log(body)
    if (statusCode != 200 || body.returnCode !== '000000') throw new Error('获取热门评论失败')
-    return { source: 'mg', comments: this.filterComment(body.data.items) }
+    return { source: 'mg', comments: this.filterComment(body.data.items), total: body.data.itemTotal, page, limit, maxPage: Math.ceil(body.data.itemTotal / limit) || 1 }
  },
  async getReplyComment(musicInfo, replyId, page = 1, limit = 10) {
    if (this._requestObj2) this._requestObj2.cancelHttp()
--- a/src/renderer/utils/music/tx/comment.js
+++ b/src/renderer/utils/music/tx/comment.js
@ -77,6 +77,7 @@ export default {
    if (this._requestObj) this._requestObj.cancelHttp()

    const _requestObj = httpFetch('http://c.y.qq.com/base/fcgi-bin/fcg_global_comment_h5.fcg', {
+      method: 'POST',
      headers: {
        'User-Agent': 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)',
      },
@ -110,6 +111,7 @@ export default {
    if (this._requestObj2) this._requestObj2.cancelHttp()

    const _requestObj2 = httpFetch('http://c.y.qq.com/base/fcgi-bin/fcg_global_comment_h5.fcg', {
+      method: 'POST',
      headers: {
        'User-Agent': 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)',
      },
@ -134,6 +136,9 @@ export default {
      source: 'tx',
      comments: this.filterComment(comment.commentlist),
      total: comment.commenttotal,
+      page,
+      limit,
+      maxPage: Math.ceil(comment.commenttotal / limit) || 1,
    }
  },
  replaceEmoji(msg) {
@ -149,7 +154,8 @@ export default {
  },
  filterComment(rawList) {
    return rawList.map(item => {
-      let time = item.rootcommentid ? parseInt(item.rootcommentid.substring(item.rootcommentid.lastIndexOf('_') + 1) + '000') : null
+      let time = parseInt(item.time + '000')
+      let timeStr = dateFormat2(time)
      if (item.middlecommentcontent) {
        let firstItem = item.middlecommentcontent[0]
        firstItem.avatarurl = item.avatarurl
@ -159,23 +165,23 @@ export default {
        item.middlecommentcontent.reverse()
      }
      return {
-        id: item.subcommentid,
+        id: `${item.rootcommentid}_${item.commentid}`,
        rootId: item.rootcommentid,
        text: item.rootcommentcontent ? this.replaceEmoji(item.rootcommentcontent).replace(/\\n/g, '\n').split('\n') : [],
-        time,
-        timeStr: time ? dateFormat2(time) : null,
+        time: item.rootcommentid == item.commentid ? time : null,
+        timeStr: item.rootcommentid == item.commentid ? timeStr : null,
        userName: item.rootcommentnick ? item.rootcommentnick.substring(1) : '',
        avatar: item.avatarurl,
        userId: item.encrypt_rootcommentuin,
        likedCount: item.praisenum,
        reply: item.middlecommentcontent
          ? item.middlecommentcontent.map(c => {
-            let index = c.subcommentid.lastIndexOf('_')
+            // let index = c.subcommentid.lastIndexOf('_')
            return {
-              id: c.subcommentid,
+              id: `sub_${item.rootcommentid}_${c.subcommentid}`,
              text: this.replaceEmoji(c.subcommentcontent).replace(/\\n/g, '\n').split('\n'),
-              time: parseInt(c.subcommentid.substring(index + 1) + '000'),
-              timeStr: dateFormat2(parseInt(c.subcommentid.substring(index + 1) + '000')),
+              time: c.subcommentid == item.commentid ? time : null,
+              timeStr: c.subcommentid == item.commentid ? timeStr : null,
              userName: c.replynick.substring(1),
              avatar: c.avatarurl,
              userId: c.encrypt_replyuin,
--- a/src/renderer/utils/music/wy/comment.js
+++ b/src/renderer/utils/music/wy/comment.js
@ -104,7 +104,8 @@ export default {
    const { body, statusCode } = await _requestObj2.promise
    if (statusCode != 200 || body.code !== 200) throw new Error('获取热门评论失败')
    // console.log(body)
-    return { source: 'wy', comments: this.filterComment(body.data.hotComments) }
+    const total = body.data.hotComments?.length ?? 0
+    return { source: 'wy', comments: this.filterComment(body.data.hotComments), total, page, limit, maxPage: 1 }
  },
  filterComment(rawList) {
    return rawList.map(item => {
--- 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="listItemHeight" #default="{ item, index }"
+        containerClass="scroll" contentClass="list")
+        div.list-item(@click="handleDoubleClick($event, index)" @contextmenu="handleListItemRigthClick($event, index)"
+          :class="[{[$style.active]: playListIndex == index }, { selected: selectedIndex == index }, { active: selectedData.includes(item) }]")
+          div.list-item-cell.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
+          div.list-item-cell.auto
+            span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
+          div.list-item-cell(style="width: 20%;") {{item.progress.progress}}%
+          div.list-item-cell(style="width: 22%;") {{item.statusText}}
+          div.list-item-cell(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
+          div.list-item-cell(style="width: 13%; padding-left: 0; padding-right: 0;")
+            material-list-buttons(:index="index" :download-btn="false" :file-btn="item.status != downloadStatus.ERROR" remove-btn
+              :start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
+              :pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
+              :play-btn="item.status == downloadStatus.COMPLETED" :search-btn="item.status == downloadStatus.ERROR" @btn-click="handleListBtnClick")
    material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
  div(:class="$style.noItem" v-else)
 </template>
@ -38,6 +39,7 @@ import { mapGetters, mapActions, mapMutations } from 'vuex'
 import { checkPath, openDirInExplorer, openUrl } from '../utils'
 import musicSdk from '../utils/music'
 import path from 'path'
+import { windowSizeList } from '@common/config'

 export default {
  name: 'Download',
@ -52,8 +54,10 @@ export default {
        isShiftDown: false,
        isModDown: false,
      },
+      selectedIndex: -1,
      lastSelectIndex: 0,
      listMenu: {
+        rightClickItemIndex: -1,
        isShowItemMenu: false,
        itemMenuControl: {
          play: true,
@ -168,6 +172,9 @@ export default {
        },
      ]
    },
+    listItemHeight() {
+      return parseInt(windowSizeList.find(item => item.id == this.setting.windowSizeId).fontSize) / 16 * 37
+    },
  },
  watch: {
    list() {
@ -217,7 +224,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 +255,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 +266,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 +316,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 +351,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 +391,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 +517,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 +537,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;
+        }
+      }
    }
  }
 })
--- 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 {
--- 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="listItemHeight"
+          @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,12 @@

 <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'
+import { windowSizeList } from '@common/config'
+
+
 export default {
  name: 'List',
  data() {
@ -94,7 +89,6 @@ export default {
      selectdListData: [],
      // isShowEditBtn: false,
      isShowDownloadMultiple: false,
-      delayShow: false,
      isShowListAdd: false,
      isShowListAddMultiple: false,
      isShowListSortModal: false,
@ -151,6 +145,7 @@ export default {
      isVisibleMusicSearch: false,
      fetchingListStatus: {},
      selectedListInfo: {},
+      selectedIndex: -1,
    }
  },
  computed: {
@ -291,6 +286,9 @@ export default {
        },
      ]
    },
+    listItemHeight() {
+      return parseInt(windowSizeList.find(item => item.id == this.setting.windowSizeId).fontSize) / 16 * 37
+    },
  },
  watch: {
    // selectdListDetailData(n) {
@ -318,11 +316,10 @@ export default {
      if (to.query.scrollIndex != null) this.isToggleList = false
      return next()
    }
-    this.delayShow = false
    this.$nextTick(() => {
      this.listId = to.query.id
      this.$nextTick(() => {
-        this.handleDelayShow()
+        this.restoreScroll(this.$route.query.scrollIndex, false)
      })
    })
    this.isShowDownload = false
@ -348,28 +345,22 @@ export default {
  // }
  // },
  beforeRouteLeave(to, from, next) {
-    this.clearDelayTimeout()
-    this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
+    setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
    next()
  },
  created() {
-    this.listId = this.$route.query.id || this.defaultList.id
+    this.listId = this.$route.query.id || getListPrevSelectId() || this.defaultList.id
    this.setPrevSelectListId(this.listId)
-    this.handleSaveScroll = throttle((listId, location) => {
-      this.setListScroll({ id: listId, location })
-    }, 1000)
    this.listenEvent()
  },
  mounted() {
-    this.handleDelayShow()
-    this.setListsScroll()
+    this.restoreScroll(this.$route.query.scrollIndex, false)
  },
  beforeDestroy() {
    this.unlistenEvent()
-    this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
+    setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
  },
  methods: {
-    ...mapMutations(['setPrevSelectListId']),
    ...mapMutations('list', [
      'listRemove',
      'listRemoveMultiple',
@ -378,9 +369,9 @@ export default {
      'moveupUserList',
      'movedownUserList',
      'removeUserList',
-      'setListScroll',
      'setList',
      'setMusicPosition',
+      'setPrevSelectListId',
    ]),
    ...mapActions('songList', ['getListDetailAll']),
    ...mapActions('leaderboard', {
@ -429,21 +420,8 @@ export default {
      this.keyEvent.isModDown = false
      this.handleSelectAllData()
    },
-    handleDelayShow() {
-      this.clearDelayTimeout()
-      if (this.list.length > 150) {
-        this.delayTimeout = setTimeout(() => {
-          this.delayTimeout = null
-          this.delayShow = true
-          this.restoreScroll(this.$route.query.scrollIndex, false)
-        }, 200)
-      } else {
-        this.delayShow = true
-        this.restoreScroll(this.$route.query.scrollIndex, false)
-      }
-    },
-    handleScroll(e) {
-      this.handleSaveScroll(this.listId, e.target.scrollTop)
+    handleScroll() {
+      setListPosition(this.listId, this.$refs.list.getScrollTop())
    },
    clearDelayTimeout() {
      if (this.delayTimeout) {
@ -452,22 +430,15 @@ export default {
      }
    },
    handleScrollList(index, isAnimation, callback = () => {}) {
-      let location = this.getMusicLocation(index) - 150
-      if (location < 0) location = 0
-      if (isAnimation) {
-        scrollTo(this.$refs.dom_scrollContent, location, 300, callback)
-      } else {
-        this.$refs.dom_scrollContent.scrollTo(0, location)
-        callback()
-      }
+      this.$refs.list.scrollToIndex(index, -150, isAnimation).then(callback)
    },
    restoreScroll(index, isAnimation) {
      if (!this.list.length) return
      if (index == null) {
-        let location = this.listData.location || 0
-        if (this.setting.list.isSaveScrollLocation && location) {
+        let location = getListPosition(this.listData.id) || 0
+        if (this.setting.list.isSaveScrollLocation && location != null) {
          this.$nextTick(() => {
-            this.$refs.dom_scrollContent.scrollTo(0, location)
+            this.$refs.list.scrollTo(location)
          })
        }
        return
@ -484,7 +455,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 +488,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 +498,67 @@ export default {
        let index = this.selectdListDetailData.indexOf(item)
        if (index < 0) {
          this.selectdListDetailData.push(item)
-          event.currentTarget.classList.add('active')
        } else {
          this.selectdListDetailData.splice(index, 1)
-          event.currentTarget.classList.remove('active')
        }
      } else if (this.selectdListDetailData.length) this.removeAllSelectListDetail()
    },
-    handleSelectListData(event, clickIndex) {
-      if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
+    // handleSelectListData(event, clickIndex) {
+    //   if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()

-      if (this.keyEvent.isShiftDown) {
-        if (this.selectdListData.length) {
-          let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
-          if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
-          this.removeAllSelectList()
-          let isNeedReverse = false
-          if (clickIndex < lastSelectIndex) {
-            let temp = lastSelectIndex
-            lastSelectIndex = clickIndex
-            clickIndex = temp
-            isNeedReverse = true
-          }
-          this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
-          if (isNeedReverse) this.selectdListData.reverse()
-          let nodes = this.$refs.dom_tbody.childNodes
-          do {
-            nodes[lastSelectIndex].classList.add('active')
-            lastSelectIndex++
-          } while (lastSelectIndex <= clickIndex)
-        } else {
-          event.currentTarget.classList.add('active')
-          this.selectdListData.push(this.list[clickIndex])
-        }
-      } else if (this.keyEvent.isModDown) {
-        let item = this.list[clickIndex]
-        let index = this.selectdListData.indexOf(item)
-        if (index < 0) {
-          this.selectdListData.push(item)
-          event.currentTarget.classList.add('active')
-        } else {
-          this.selectdListData.splice(index, 1)
-          event.currentTarget.classList.remove('active')
-        }
-      } else if (this.selectdListData.length) this.removeAllSelectList()
-    },
+    //   if (this.keyEvent.isShiftDown) {
+    //     if (this.selectdListData.length) {
+    //       let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
+    //       if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
+    //       this.removeAllSelectList()
+    //       let isNeedReverse = false
+    //       if (clickIndex < lastSelectIndex) {
+    //         let temp = lastSelectIndex
+    //         lastSelectIndex = clickIndex
+    //         clickIndex = temp
+    //         isNeedReverse = true
+    //       }
+    //       this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
+    //       if (isNeedReverse) this.selectdListData.reverse()
+    //       // let nodes = this.$refs.dom_tbody.childNodes
+    //       // do {
+    //       //   nodes[lastSelectIndex].classList.add('active')
+    //       //   lastSelectIndex++
+    //       // } while (lastSelectIndex <= clickIndex)
+    //     } else {
+    //       // event.currentTarget.classList.add('active')
+    //       this.selectdListData.push(this.list[clickIndex])
+    //     }
+    //   } else if (this.keyEvent.isModDown) {
+    //     let item = this.list[clickIndex]
+    //     let index = this.selectdListData.indexOf(item)
+    //     if (index < 0) {
+    //       this.selectdListData.push(item)
+    //       // event.currentTarget.classList.add('active')
+    //     } else {
+    //       this.selectdListData.splice(index, 1)
+    //       // event.currentTarget.classList.remove('active')
+    //     }
+    //   } else if (this.selectdListData.length) this.removeAllSelectList()
+    // },
    removeAllSelectListDetail() {
      this.selectdListDetailData = []
-      let dom_tbody = this.$refs.dom_tbody
-      if (!dom_tbody) return
-      let nodes = dom_tbody.querySelectorAll('.active')
-      for (const node of nodes) {
-        if (node.parentNode == dom_tbody) node.classList.remove('active')
-      }
-    },
-    removeAllSelectList() {
-      this.selectdListData = []
-      let dom_list = this.$refs.dom_lists_list
-      if (!dom_list) return
-      let nodes = dom_list.querySelectorAll('.selected')
-      for (const node of nodes) {
-        if (node.parentNode == dom_list) node.classList.remove('selected')
-      }
+      // let dom_tbody = this.$refs.dom_tbody
+      // if (!dom_tbody) return
+      // let nodes = dom_tbody.querySelectorAll('.active')
+      // for (const node of nodes) {
+      //   if (node.parentNode == dom_tbody) node.classList.remove('active')
+      // }
    },
+    // removeAllSelectList() {
+    //   this.selectdListData = []
+    //   let dom_list = this.$refs.dom_lists_list
+    //   if (!dom_list) return
+    //   let nodes = dom_list.querySelectorAll('.selected')
+    //   for (const node of nodes) {
+    //     if (node.parentNode == dom_list) node.classList.remove('selected')
+    //   }
+    // },
    testPlay(index) {
      // if (!this.assertApiSupport(this.list[index].source)) return
      this.setPlayList({ list: this.listData, index })
@ -635,10 +598,10 @@ export default {
    handleSelectAllData() {
      this.removeAllSelectListDetail()
      this.selectdListDetailData = [...this.list]
-      let nodes = this.$refs.dom_tbody.childNodes
-      for (const node of nodes) {
-        node.classList.add('active')
-      }
+      // let nodes = this.$refs.dom_tbody.childNodes
+      // for (const node of nodes) {
+      //   node.classList.add('active')
+      // }
      // asyncSetArray(this.selectdListDetailData, isSelect ? [...this.list] : [])
    },
    handleAddDownloadMultiple(type) {
@ -680,12 +643,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 +695,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 +734,21 @@ export default {
      this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.list[index].source].getMusicDetailPageUrl
      // this.listMenu.itemMenuControl.play =
      //   this.listMenu.itemMenuControl.playLater =
-      this.listMenu.itemMenuControl.download =
-        this.assertApiSupport(this.list[index].source)
-      let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
-      if (dom_selected) dom_selected.classList.remove('selected')
-      this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
-      let dom_td = event.target.closest('td')
-
+      this.listMenu.itemMenuControl.download = this.assertApiSupport(this.list[index].source)
+      let dom_container = event.target.closest('.' + this.$style.container)
+      // let dom_listItemCell = event.target.closest('.list-item-cell')
+      const getOffsetValue = (target, x = 0, y = 0) => {
+        if (target === dom_container) return { x, y }
+        if (!target) return { x: 0, y: 0 }
+        x += target.offsetLeft
+        y += target.offsetTop
+        return getOffsetValue(target.offsetParent, x, y)
+      }
      this.listMenu.rightClickItemIndex = index
-      this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
-      this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      this.selectedIndex = index
+      let { x, y } = getOffsetValue(event.target)
+      this.listMenu.menuLocation.x = x + event.offsetX
+      this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.list.getScrollTop()
      this.hideListsMenu()
      this.$nextTick(() => {
        this.listMenu.isShowItemMenu = true
@ -842,8 +803,7 @@ export default {
      }
    },
    hideListMenu() {
-      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
-      if (dom_selected) dom_selected.classList.remove('selected')
+      this.selectedIndex = -1
      this.listMenu.isShowItemMenu = false
      this.listMenu.rightClickItemIndex = -1
    },
@ -946,10 +906,9 @@ export default {
        case 'listClick':
          if (index < 0) return
          this.handleScrollList(index, true, () => {
-            let dom = document.getElementById('mid_' + this.list[index].songmid)
-            dom.classList.add('selected')
+            this.selectedIndex = index
            setTimeout(() => {
-              dom.classList.remove('selected')
+              this.selectedIndex = -1
              if (isPlay) this.testPlay(index)
            }, 600)
          })
@ -1240,6 +1199,11 @@ export default {
  //     }
  //   }
  // }
+  &.copying {
+    .no-select {
+      display: none;
+    }
+  }
 }
 .thead {
  flex: none;
@ -1248,28 +1212,20 @@ export default {
    // padding-left: 10px;
  }
 }
-.tbody {
+:global(.list) {
  flex: auto;
-  overflow-y: auto;
-
-  tr {
+  :global(.list-item) {
    &.active {
      color: @color-btn;
    }
  }
-  td {
-    font-size: 12px;
+  :global(.list-item-cell) {
+    font-size: 12px !important;

    &:first-child {
      // padding-left: 10px;
-      font-size: 11px;
-      color: @color-theme_2-font-label;
-    }
-  }
-
-  &.copying {
-    .no-select {
-      display: none;
+      font-size: 11px !important;
+      color: @color-theme_2-font-label !important;
    }
  }
 }
@ -1280,6 +1236,7 @@ export default {
  font-size: .8em;
  line-height: 1;
  opacity: .75;
+  display: inline-block;
 }

 .disabled {
@ -1325,15 +1282,15 @@ each(@themes, {
    .listsNew {
      background-color: ~'@{color-@{value}-theme_2-hover}';
    }
-    .tbody {
-      tr {
+    :global(.list) {
+      :global(.list-item) {
        &.active {
          color: ~'@{color-@{value}-btn}';
        }
      }
-      td {
+      :global(.list-item-cell) {
        &:first-child {
-          color: ~'@{color-@{value}-theme_2-font-label}';
+          color: ~'@{color-@{value}-theme_2-font-label}' !important;
        }
      }
    }
--- a/src/renderer/views/Setting.vue
+++ b/src/renderer/views/Setting.vue
@ -455,6 +455,10 @@ export default {
          id: 1,
          name: 'origin',
        },
+        {
+          id: 2,
+          name: 'black',
+        },
      ]
    },
    syncEnableTitle() {
@ -842,12 +846,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 +882,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)
      }

--- a/src/static/images/tray/tray0Template.ico
+++ b/src/static/images/tray/tray0Template.ico
--- a/src/static/images/tray/tray0Template.png
+++ b/src/static/images/tray/tray0Template.png
--- a/src/static/images/tray/tray0Template@2x.ico
+++ b/src/static/images/tray/tray0Template@2x.ico
--- a/src/static/images/tray/tray0Template@2x.png
+++ b/src/static/images/tray/tray0Template@2x.png
--- a/src/static/images/tray/trayTemplate.png
+++ b/src/static/images/tray/trayTemplate.png
--- a/src/static/images/tray/trayTemplate@1.25x.png
+++ b/src/static/images/tray/trayTemplate@1.25x.png
--- a/src/static/images/tray/trayTemplate@1.5x.png
+++ b/src/static/images/tray/trayTemplate@1.5x.png
--- a/src/static/images/tray/trayTemplate@2x.png
+++ b/src/static/images/tray/trayTemplate@2x.png
--- a/src/static/images/tray/tray_black.png
+++ b/src/static/images/tray/tray_black.png
--- a/src/static/images/tray/tray_black@1.25x.png
+++ b/src/static/images/tray/tray_black@1.25x.png
--- a/src/static/images/tray/tray_black@1.5x.png
+++ b/src/static/images/tray/tray_black@1.5x.png
--- a/src/static/images/tray/tray_black@2x.png
+++ b/src/static/images/tray/tray_black@2x.png
--- a/src/static/images/tray/tray1Template.ico
+++ b/src/static/images/tray/tray1Template.ico
--- a/src/static/images/tray/tray1Template.png
+++ b/src/static/images/tray/tray1Template.png
--- a/src/static/images/tray/tray1Template@2x.ico
+++ b/src/static/images/tray/tray1Template@2x.ico
--- a/src/static/images/tray/tray1Template@2x.png
+++ b/src/static/images/tray/tray1Template@2x.png