Merge branch 'dev'

.eslintrc

@@ -22,5 +22,6 @@
   },
   "settings": {
     "html/html-extensions": [".html", ".vue"]
-  }
+  },
+  "ignorePatterns": ["vendors", "*.min.js"]
 }

.ncurc.js

@@ -3,6 +3,7 @@ module.exports = {
   reject: [
     'vue-loader',
     'webpack-dev-server',
+    'eslint',
     // 'eslint-config-standard'
   ]
 }

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
 
 ### 修复

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 下整个界面闪烁（消失又出现）
 
-- 更新显卡驱动
+可尝试在关掉软件后，在桌面空白处鼠标右击，在弹出的菜单中选择**个性化**，在弹出的窗口中**切换到系统内置的Aero主题**，然后再启动软件看是否解决。
-- 添加启动参数`-dha`运行（添加的方法请自行百度“给快捷方式加参数”）
-- 尝试将绿色版的软件放在**桌面**或**我的文档**运行
 
 ## Windows 7 下桌面歌词字体列表为空
 
@@ -344,8 +342,8 @@ send(EVENT_NAMES.inited, {
 
 ```
 
-- `@name `：源的名字，建议不要过长，10个字符以内
+- `@name `：源的名字，建议不要过长，24个字符以内
-- `@description `：源的描述，建议不要过长，20个字符以内，可不填，不填时必须保留 @description
+- `@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)`

README.md

@@ -36,7 +36,7 @@
 
 所用技术栈：
 
-- Electron 13
+- Electron 15
 - Vue 2
 
 已支持的平台：

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

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'],
+    }),
   ],
 }

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'],
+    }),
   ],
 }

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-loader": "^6.5.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
+    "css-minimizer-webpack-plugin": "^3.1.1",
     "del": "^6.0.0",
-    "electron": "^13.4.0",
+    "electron": "^15.3.0",
-    "electron-builder": "^22.11.7",
+    "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",
+    "html-webpack-plugin": "^5.5.0",
-    "less": "^4.1.1",
+    "less": "^4.1.2",
-    "less-loader": "^10.0.1",
+    "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": "^8.3.11",
-    "postcss-loader": "^6.1.1",
+    "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": "^5.60.0",
-    "webpack-cli": "^4.8.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",
+    "koa": "^2.13.4",
-    "long": "^4.0.0",
+    "long": "^5.0.1",
-    "lrc-file-parser": "^1.2.1",
     "needle": "^3.0.0",
     "node-id3": "^0.2.3",
     "request": "^2.88.2",
-    "socket.io": "^4.2.0",
+    "socket.io": "^4.3.1",
-    "utf-8-validate": "^5.0.6",
+    "utf-8-validate": "^5.0.7",
     "vue": "^2.6.14",
     "vue-i18n": "^8.26.5",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.3",
-    "vuex": "^3.6.2",
+    "vuex": "^3.6.2"
-    "vuex-router-sync": "^5.0.0"
   }
 }

publish/changeLog.md

@@ -1,4 +1,22 @@
+### 新增
+
+- 添加黑色托盘图标
+- 自定义源新增`version`字段，新增`utils.buffer.bufToString`方法
+
+### 优化
+
+- 大幅优化我的列表、下载、歌单、排行榜列表性能，现在即使同一列表内的歌曲很多时也不会卡顿了
+- 优化列表同步代码逻辑
+- 优化开关评论时的动画性能
+- 优化进入、离开播放详情页的性能
+- 兼容桌面歌词以触摸的方式移动、调整大小
+- 调整图标尺寸
+
 ### 修复
 
-- 修复我的列表搜索无法搜索小括号、中括号等字符的问题
+- 修复kg源的歌单链接无法打开的问题
-- 修复v1.14.0出现的备份与恢复功能备份的数据无法恢复的问题，同时兼容使用v1.14.0导出的存在问题的数据
+- 修复同一首歌的URL、歌词等同时需要换源时的处理问题
+
+### 其他
+
+- 更新 Electron 到 v15.3.0

src/common/defaultSetting.js

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

src/common/utils.js

@@ -153,8 +153,8 @@ exports.initSetting = isShowErrorAlert => {
     // 迁移列表滚动位置设置 ~0.18.3
     if (setting.list.scroll) {
       let scroll = setting.list.scroll
-      electronStore_list.set('defaultList.location', scroll.locations.default || 0)
+      // electronStore_list.set('defaultList.location', scroll.locations.default || 0)
-      electronStore_list.set('loveList.location', scroll.locations.love || 0)
+      // electronStore_list.set('loveList.location', scroll.locations.love || 0)
       electronStore_config.delete('setting.list.scroll')
       electronStore_config.set('setting.list.isSaveScrollLocation', scroll.enable)
       delete setting.list.scroll

src/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)

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)
+    if (!sourceListItemIds.has(m.songmid) || !targetListItemIds.has(m.songmid)) removedListIds.add(m.songmid)
-  }
-  for (const m of snapshotList.list) {
-    if (!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)
+    if (!localUserListIds.has(l.id) || !remoteUserListIds.has(l.id)) removedListIds.add(l.id)
-  }
-  for (const l of snapshot.userList) {
-    if (!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)

src/main/modules/tray.js

@@ -1,5 +1,5 @@
-const { app, Tray, Menu } = require('electron')
+const { app, Tray, Menu, nativeImage } = require('electron')
-const { isWin } = require('../../common/utils')
+// 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
+  let theme = themeList.find(item => item.id === themeId) || themeList[0]
-  const iconPath = path.join(global.__static, 'images/tray', isWin ? themeName + '@2x.ico' : themeName + '.png')
+  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
+  let theme = themeList.find(item => item.id === themeId) || themeList[0]
-  const iconPath = path.join(global.__static, 'images/tray', isWin ? themeName + '@2x.ico' : themeName + '.png')
+  const iconPath = path.join(global.__static, 'images/tray', theme.fileName + '.png')
-  global.modules.tray.setImage(iconPath)
+  global.modules.tray.setImage(nativeImage.createFromPath(iconPath))
 }

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

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,

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-left(@mousedown.self="handleMouseDown('left', $event)" @touchstart.self="handleTouchDown('left', $event)")
-  div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
+  div.resize-top(@mousedown.self="handleMouseDown('top', $event)" @touchstart.self="handleTouchDown('top', $event)")
-  div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
+  div.resize-right(@mousedown.self="handleMouseDown('right', $event)" @touchstart.self="handleTouchDown('right', $event)")
-  div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)")
+  div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)" @touchstart.self="handleTouchDown('bottom', $event)")
-  div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $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)")
+  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)")
+  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)")
+  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.msDownX = clientX
-      this.resize.msDownY = event.clientY
+      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() {
+    // handleMouseOver() {
-      // this.handleMouseUp()
+    //   // this.handleMouseUp()
-    },
+    // },
   },
 }
 </script>

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) {
+    handleLyricDown(target, x, y) {
-      if (e.target.classList.contains('font') ||
+      if (target.classList.contains('font') ||
-        e.target.parentNode.classList.contains('font') ||
+        target.parentNode.classList.contains('font') ||
-        e.target.classList.contains('translation') ||
+        target.classList.contains('translation') ||
-        e.target.parentNode.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.msDownX = x
-        this.winEvent.msDownY = e.clientY
+        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,
+          x: x - this.winEvent.msDownX,
-          y: e.clientY - this.winEvent.msDownY,
+          y: y - this.winEvent.msDownY,
           w: window.innerWidth,
           h: window.innerHeight,
         })
       }
-
+    },
-      // if (this.volumeEvent.isMsDown) {
+    handleTouchMove(e) {
-      //   let val = this.volumeEvent.msDownValue + (e.clientX - this.volumeEvent.msDownX) / 70
+      if (e.changedTouches.length) {
-      //   this.volume = val < 0 ? 0 : val > 1 ? 1 : val
+        const touch = e.changedTouches[0]
-      //   if (this.audio) this.audio.volume = this.volume
+        this.handleMove(touch.clientX, touch.clientY)
-      // }
+      }
-
+    },
-      // console.log(val)
+    handleMouseMsMove(e) {
+      this.handleMove(e.clientX, e.clientY)
     },
     startLyricScrollTimeout() {
       this.clearLyricScrollTimeout()

src/renderer/App.vue

@@ -29,6 +29,7 @@ import music from './utils/music'
 import { throttle, openUrl, compareVer, getPlayList, parseUrlParams, saveSetting } from './utils'
 import { base as eventBaseName, sync as eventSyncName } from './event/names'
 import apiSourceInfo from './utils/music/api-source-info'
+import { initListPosition, initListPrevSelectId } from '@renderer/utils/data'
 
 window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
 
@@ -338,6 +339,8 @@ export default {
       return Promise.all([
         this.initMyList(), // 初始化播放列表
         this.initSearchHistoryList(), // 初始化搜索历史列表
+        initListPosition(), // 列表位置记录
+        initListPrevSelectId(), // 上次选中的列表记录
       ])
       // this.initDownloadList() // 初始化下载列表
     },

src/renderer/assets/styles/index.less

@@ -1,5 +1,7 @@
 @import './reset.less';
 @import './animate.less';
+@import './layout.less';
+
 *, *::after, *::before {
 	-webkit-user-drag: none;
 }
@@ -72,6 +74,45 @@ table {
   }
 }
 
+.list {
+  width: 100%;
+  overflow: hidden;
+  color: @color-theme_2-font;
+  .list-item {
+    height: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    // border-top: 1px solid rgba(0, 0, 0, 0.12);
+    transition: background-color 0.2s ease;
+    border-bottom: 1px solid @color-theme_2-line;
+    box-sizing: border-box;
+    &:hover {
+      background-color: @color-theme_2-hover;
+    }
+    &.active {
+      background-color: @color-theme_2-active;
+    }
+    &.selected {
+      background-color: @color-theme_2-hover;
+    }
+    .list-item-cell {
+      flex: none;
+      padding: 0 6px;
+      position: relative;
+      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      font-size: 13px;
+      line-height: 16px;
+      vertical-align: middle;
+      box-sizing: border-box;
+      .mixin-ellipsis-1;
+
+      &.auto {
+        flex: auto;
+      }
+    }
+  }
+}
 
 .badge {
   display: inline-block;
@@ -240,6 +281,22 @@ each(@themes, {
       }
     }
 
+    .list {
+      color: ~'@{color-@{value}-theme_2-font}';
+      .list-item {
+        border-bottom-color: ~'@{color-@{value}-theme_2-line}';
+        &:hover {
+          background-color: ~'@{color-@{value}-theme_2-hover}';
+        }
+        &.active {
+          background-color: ~'@{color-@{value}-theme_2-active}';
+        }
+        &.selected {
+          background-color: ~'@{color-@{value}-theme_2-hover}';
+        }
+      }
+    }
+
     input, textarea {
       &::placeholder {
         color: ~'@{color-@{value}-theme_2-font-label}';

src/renderer/components/core/Aside.vue

@@ -35,7 +35,7 @@ div(:class="$style.aside")
     dl
       //- dt {{$t('core.aside.my_music')}}
       dd
-        router-link(:active-class="$style.active" :tips="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
+        router-link(:active-class="$style.active" to="list" :tips="$t('core.aside.my_list')")
           div(:class="$style.icon")
             svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 444.87 391.18' space='preserve')
               use(xlink:href='#icon-love')

src/renderer/components/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)

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', [
+    hide() {
-      'visiblePlayerDetail',
+      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;
+  position: absolute;
-  opacity: 0;
+  right: 0;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  opacity: 1;
   margin-left: 10px;
+  transform: scaleX(0);
 }
 
 .footer {

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 {

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)

src/renderer/components/material/Selection.vue

@@ -5,7 +5,7 @@
       div.icon(:class="$style.icon")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
           use(xlink:href='#icon-down')
-    ul.list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
+    ul.selection-list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
       li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :tips="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
 </template>
 

src/renderer/components/material/SongList.vue

@@ -13,7 +13,31 @@ div(:class="$style.songList")
               th.nobreak(:style="{ width: rowWidth.r5 }") {{$t('material.song_list.time')}}
               th.nobreak(:style="{ width: rowWidth.r6 }") {{$t('material.song_list.action')}}
       div(:class="$style.content")
-        div.scroll(v-show="list.length" :class="$style.tbody" ref="dom_scrollContent")
+        div(v-if="list.length" :class="$style.content" ref="dom_listContent")
+          material-virtualized-list(:list="list" key-name="songmid" ref="list" :item-height="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.listMenu.itemMenuControl.download = this.assertApiSupport(this.list[index].source)
-        this.assertApiSupport(this.list[index].source)
+      let dom_container = event.target.closest('.' + this.$style.songList)
-      let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
+      const getOffsetValue = (target, x = 0, y = 0) => {
-      if (dom_selected) dom_selected.classList.remove('selected')
+        if (target === dom_container) return { x, y }
-      this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
+        if (!target) return { x: 0, y: 0 }
-      let dom_td = event.target.closest('td')
+        x += target.offsetLeft
+        y += target.offsetTop
+        return getOffsetValue(target.offsetParent, x, y)
+      }
       this.listMenu.rightClickItemIndex = index
-      this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
+      this.selectedIndex = index
-      this.listMenu.menuLocation.y = dom_td.offsetParent.offsetTop + dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      let { x, y } = getOffsetValue(event.target)
+      this.listMenu.menuLocation.x = x + event.offsetX
+      this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.list.getScrollTop()
       this.hideListsMenu()
       this.$nextTick(() => {
         this.listMenu.isShowItemMenu = true
       })
     },
     hideListMenu() {
-      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
+      this.selectedIndex = -1
-      if (dom_selected) dom_selected.classList.remove('selected')
       this.listMenu.isShowItemMenu = false
       this.listMenu.rightClickItemIndex = -1
     },
@@ -406,24 +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 {
+    :global(.list) {
-      td {
+      :global(.list-item-cell) {
         &:first-child {
-          color: ~'@{color-@{value}-theme_2-font-label}';
+          color: ~'@{color-@{value}-theme_2-font-label}' !important;
         }
       }
     }

src/renderer/components/material/VirtualizedList.vue

@@ -0,0 +1,241 @@
+<template>
+  <component :is="containerEl" :class="containerClass" ref="dom_scrollContainer" style="height: 100%; overflow: auto; position: relative; display: block;">
+    <component :is="contentEl" :class="contentClass" :style="contentStyle">
+      <div v-for="item in views" :key="item.key" :style="item.style">
+        <slot name="default" v-bind="{ item: item.item, index: item.index }" />
+      </div>
+    </component>
+    <slot name="footer" />
+  </component>
+</template>
+
+<script>
+
+const easeInOutQuad = (t, b, c, d) => {
+  t /= d / 2
+  if (t < 1) return (c / 2) * t * t + b
+  t--
+  return (-c / 2) * (t * (t - 2) - 1) + b
+}
+const handleScroll = (element, to, duration = 300, callback = () => {}, onCancel = () => {}) => {
+  if (!element) return callback()
+  const start = element.scrollTop || element.scrollY || 0
+  let cancel = false
+  if (to > start) {
+    let maxScrollTop = element.scrollHeight - element.clientHeight
+    if (to > maxScrollTop) to = maxScrollTop
+  } else if (to < start) {
+    if (to < 0) to = 0
+  } else return callback()
+  const change = to - start
+  const increment = 10
+  if (!change) return callback()
+
+  let currentTime = 0
+  let val
+  let cancelCallback
+
+  const animateScroll = () => {
+    currentTime += increment
+    val = parseInt(easeInOutQuad(currentTime, start, change, duration))
+    if (element.scrollTo) {
+      element.scrollTo(0, val)
+    } else {
+      element.scrollTop = val
+    }
+    if (currentTime < duration) {
+      if (cancel) {
+        cancelCallback()
+        onCancel()
+        return
+      }
+      setTimeout(animateScroll, increment)
+    } else {
+      callback()
+    }
+  }
+  animateScroll()
+  return (callback) => {
+    cancelCallback = callback
+    cancel = true
+  }
+}
+
+export default {
+  name: 'VirtualizedList',
+  props: {
+    containerEl: {
+      type: String,
+      default: 'div',
+    },
+    containerClass: {
+      type: String,
+      default: 'virtualized-list',
+    },
+    contentEl: {
+      type: String,
+      default: 'div',
+    },
+    contentClass: {
+      type: String,
+      default: 'virtualized-list-content',
+    },
+    outsideNum: {
+      type: Number,
+      default: 10,
+    },
+    itemHeight: {
+      type: Number,
+      required: true,
+    },
+    keyName: {
+      type: String,
+      require: true,
+    },
+    list: {
+      type: Array,
+      require: true,
+    },
+
+  },
+  data() {
+    return {
+      views: [],
+      isWaitingUpdate: false,
+      startIndex: -1,
+      endIndex: -1,
+      scrollTop: 0,
+      cachedList: [],
+      cancelScroll: null,
+      isScrolling: false,
+      scrollToValue: 0,
+    }
+  },
+  computed: {
+    contentStyle() {
+      return {
+        display: 'block',
+        height: this.list.length * this.itemHeight + 'px',
+      }
+    },
+  },
+  watch: {
+    itemHeight() {
+      this.updateView()
+    },
+    list() {
+      this.cachedList = Array(this.list.length)
+      this.startIndex = -1
+      this.endIndex = -1
+      this.updateView()
+    },
+  },
+  mounted() {
+    this.$refs.dom_scrollContainer.addEventListener('scroll', this.onScroll, false)
+    this.cachedList = Array(this.list.length)
+    this.startIndex = -1
+    this.endIndex = -1
+    this.updateView()
+  },
+  beforeDestroy() {
+    if (this.cancelScroll) this.cancelScroll()
+  },
+  methods: {
+    onScroll(event) {
+      if (this.isWaitingUpdate) return
+      this.isWaitingUpdate = true
+      window.requestAnimationFrame(() => {
+        this.updateView()
+        this.isWaitingUpdate = false
+      })
+      this.$emit('scroll', event)
+    },
+
+    createList(startIndex, endIndex) {
+      const cache = this.cachedList.slice(startIndex, endIndex)
+      const list = this.list.slice(startIndex, endIndex).map((item, i) => {
+        if (cache[i]) return cache[i]
+        const top = (startIndex + i) * this.itemHeight
+        const index = startIndex + i
+        return this.cachedList[index] = {
+          item,
+          top,
+          style: { position: 'absolute', left: 0, right: 0, top: top + 'px', height: this.itemHeight + 'px' },
+          index,
+          key: item[this.keyName],
+        }
+      })
+      return list
+    },
+
+    updateView() {
+      const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
+      const currentStartIndex = Math.floor(currentScrollTop / this.itemHeight)
+      const currentEndIndex = currentStartIndex + Math.ceil(this.$refs.dom_scrollContainer.clientHeight / this.itemHeight)
+      const continuous = currentStartIndex <= this.endIndex && currentEndIndex >= this.startIndex
+      const currentStartRenderIndex = Math.max(Math.floor(currentScrollTop / this.itemHeight) - this.outsideNum, 0)
+      const currentEndRenderIndex = currentStartIndex + Math.ceil(this.$refs.dom_scrollContainer.clientHeight / this.itemHeight) + this.outsideNum
+      // console.log(continuous)
+      // debugger
+      if (continuous) {
+        if (Math.abs(currentScrollTop - this.scrollTop) < this.itemHeight * 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>

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",

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": "播放设置",

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": "播放設置",

src/renderer/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { sync } from 'vuex-router-sync'
+// import { sync } from 'vuex-router-sync'
 
 import './event'
 
@@ -20,7 +20,7 @@ import { getSetting } from './utils'
 import languageList from '@renderer/lang/languages.json'
 import { rendererSend, NAMES } from '../common/ipc'
 
-sync(store, router)
+// sync(store, router)
 
 Vue.config.productionTip = false
 Vue.config.devtools = process.env.NODE_ENV === 'development'

src/renderer/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 {

src/renderer/store/modules/leaderboard.js

@@ -9,9 +9,7 @@ for (const source of music.sources) {
   sources.push(source)
 }
 
-// state
+const listInfo = {
-const state = {
-  boards: sourceList,
   list: [],
   total: 0,
   page: 1,
@@ -19,6 +17,11 @@ const state = {
   key: null,
 }
 
+// state
+const state = {
+  boards: sourceList,
+}
+
 // getters
 const getters = {
   sources(state, getters, rootState, { sourceNames }) {
@@ -27,16 +30,6 @@ const getters = {
   boards(state) {
     return state.boards
   },
-  list(state) {
-    return state.list
-  },
-  info(state) {
-    return {
-      total: state.total,
-      limit: state.limit,
-      page: state.page,
-    }
-  },
 }
 
 // actions
@@ -47,7 +40,6 @@ const actions = {
     // let tabId = rootState.setting.leaderboard.tabId
     // let key = `${source}${tabId}${page}`
     // if (state.list.length && state.key == key) return true
-    // commit('clearList')
     if (state.boards[source].length) return
     return music[source].leaderboard.getBoards().then(result => commit('setBoardsList', { boards: result, source }))
   },
@@ -56,14 +48,22 @@ const actions = {
     let tabId = rootState.setting.leaderboard.tabId
     let [source, bangId] = tabId.split('__')
     let key = `${source}${tabId}${page}`
-    if (state.list.length && state.key == key) return Promise.resolve()
+    if (listInfo.list.length && listInfo.key == key) return Promise.resolve(listInfo)
-    commit('clearList')
+    // commit('clearList')
     // return (
     //   cache.has(key)
     //     ? Promise.resolve(cache.get(key))
     //     : music[source].leaderboard.getList(bangId, page)
     // ).then(result => commit('setList', { result, key }))
-    return music[source].leaderboard.getList(bangId, page).then(result => commit('setList', { result, key }))
+    return music[source].leaderboard.getList(bangId, page).then(result => {
+      cache.set(key, result)
+      listInfo.list = result.list
+      listInfo.total = result.total
+      listInfo.limit = result.limit
+      listInfo.page = result.page
+      listInfo.key = key
+      return listInfo
+    })
   },
   getListAll({ state, rootState }, id) {
     // console.log(source, id)
@@ -96,18 +96,6 @@ const mutations = {
   setBoardsList(state, { boards, source }) {
     state.boards[source] = boards.list
   },
-  setList(state, { result, key }) {
-    state.list = result.list
-    state.total = result.total
-    state.limit = result.limit
-    state.page = result.page
-    state.key = key
-    cache.set(key, result)
-  },
-  clearList(state) {
-    state.list = []
-    state.total = 0
-  },
 }
 
 export default {

src/renderer/store/modules/list.js

@@ -1,6 +1,7 @@
 import musicSdk from '../../utils/music'
 import { clearLyric, clearMusicUrl } from '../../utils'
 import { sync as eventSyncName } from '@renderer/event/names'
+import { removeListPosition, setListPrevSelectId } from '@renderer/utils/data'
 
 let allList = {}
 window.allList = allList
@@ -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 {

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

src/renderer/store/mutations.js

@@ -61,9 +61,6 @@ export default {
   setMediaDeviceId(state, val) {
     state.setting.player.mediaDeviceId = val
   },
-  setPrevSelectListId(state, val) {
-    state.setting.list.prevSelectListId = val
-  },
   setDesktopLyricConfig(state, config) {
     state.setting.desktopLyric = Object.assign(state.setting.desktopLyric, config)
   },

src/renderer/utils/data.js

@@ -0,0 +1,45 @@
+import { rendererSend, rendererInvoke, NAMES } from '../../common/ipc'
+import { throttle } from './index'
+
+let listPosition = {}
+let listPrevSelectId
+
+const saveListPosition = throttle(() => {
+  rendererSend(NAMES.mainWindow.save_data, {
+    path: 'listPosition',
+    data: listPosition,
+  })
+}, 1000)
+
+export const initListPosition = () => {
+  return rendererInvoke(NAMES.mainWindow.get_data, 'listPosition').then(data => {
+    if (!data) data = {}
+    listPosition = data
+  })
+}
+export const getListPosition = id => listPosition[id] || 0
+export const setListPosition = (id, position) => {
+  listPosition[id] = position || 0
+  saveListPosition()
+}
+export const removeListPosition = id => {
+  delete listPosition[id]
+  saveListPosition()
+}
+
+const saveListPrevSelectId = throttle(() => {
+  rendererSend(NAMES.mainWindow.save_data, {
+    path: 'listPrevSelectId',
+    data: listPrevSelectId,
+  })
+}, 200)
+export const initListPrevSelectId = () => {
+  return rendererInvoke(NAMES.mainWindow.get_data, 'listPrevSelectId').then(id => {
+    listPrevSelectId = id
+  })
+}
+export const getListPrevSelectId = () => listPrevSelectId
+export const setListPrevSelectId = id => {
+  listPrevSelectId = id
+  saveListPrevSelectId()
+}

src/renderer/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()

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(/#.*$/, '')

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 []

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

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,
+        time: item.rootcommentid == item.commentid ? time : null,
-        timeStr: time ? dateFormat2(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'),
+              time: c.subcommentid == item.commentid ? time : null,
-              timeStr: dateFormat2(parseInt(c.subcommentid.substring(index + 1) + '000')),
+              timeStr: c.subcommentid == item.commentid ? timeStr : null,
               userName: c.replynick.substring(1),
               avatar: c.avatarurl,
               userId: c.encrypt_replyuin,

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 => {

src/renderer/views/Download.vue

@@ -14,17 +14,18 @@ div(:class="$style.download")
             th.nobreak(style="width: 22%;") {{$t('view.download.status')}}
             th.nobreak(style="width: 10%;") {{$t('view.download.quality')}}
             th.nobreak(style="width: 13%;") {{$t('view.download.action')}}
-    div.scroll(v-if="list.length" :class="$style.tbody" ref="dom_scrollContent")
+    div(v-if="list.length" :class="$style.content" ref="dom_listContent")
-      table
+      material-virtualized-list(:list="showList" key-name="key" ref="list" :item-height="listItemHeight" #default="{ item, index }"
-        tbody(ref="dom_tbody")
+        containerClass="scroll" contentClass="list")
-          tr(v-for='(item, index) in showList' :key='item.key' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
+        div.list-item(@click="handleDoubleClick($event, index)" @contextmenu="handleListItemRigthClick($event, index)"
-            td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
+          :class="[{[$style.active]: playListIndex == index }, { selected: selectedIndex == index }, { active: selectedData.includes(item) }]")
-            td.break
+          div.list-item-cell.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" @click.stop) {{index + 1}}
+          div.list-item-cell.auto
             span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
-            td.break(style="width: 20%;") {{item.progress.progress}}%
+          div.list-item-cell(style="width: 20%;") {{item.progress.progress}}%
-            td.break(style="width: 22%;") {{item.statusText}}
+          div.list-item-cell(style="width: 22%;") {{item.statusText}}
-            td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
+          div.list-item-cell(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
-            td(style="width: 13%; padding-left: 0; padding-right: 0;")
+          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"
@@ -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')
+      let dom_container = event.target.closest('.' + this.$style.download)
-      if (dom_selected) dom_selected.classList.remove('selected')
+      const getOffsetValue = (target, x = 0, y = 0) => {
-      this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
+        if (target === dom_container) return { x, y }
-      let dom_td = event.target.closest('td')
+        if (!target) return { x: 0, y: 0 }
+        x += target.offsetLeft
+        y += target.offsetTop
+        return getOffsetValue(target.offsetParent, x, y)
+      }
       this.listMenu.rightClickItemIndex = index
-      this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
+      this.selectedIndex = index
-      this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      let { x, y } = getOffsetValue(event.target)
+      this.listMenu.menuLocation.x = x + event.offsetX
+      this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.list.getScrollTop()
 
       let item = this.showList[index]
       if (item.isComplate) {
@@ -397,8 +391,7 @@ export default {
       })
     },
     hideListMenu() {
-      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
+      this.selectedIndex = -1
-      if (dom_selected) dom_selected.classList.remove('selected')
       this.listMenu.isShowItemMenu = false
       this.listMenu.rightClickItemIndex = -1
     },
@@ -524,18 +517,18 @@ export default {
     // padding-left: 10px;
   }
 }
-.tbody {
+:global(.list) {
   flex: auto;
   overflow-y: auto;
-  td {
+  :global(.list-item-cell) {
-    font-size: 12px;
+    font-size: 12px !important;
     &:first-child {
       // padding-left: 10px;
-      font-size: 11px;
+      font-size: 11px !important;
-      color: @color-theme_2-font-label;
+      color: @color-theme_2-font-label !important;
     }
   }
-  tr {
+  :global(.list-item) {
     &.active {
       color: @color-btn;
     }
@@ -544,17 +537,17 @@ export default {
 
 each(@themes, {
   :global(#container.@{value}) {
-    .tbody {
+    :global(.list) {
-      tr {
+      :global(.list-item-cell) {
-        &.active {
-          color: ~'@{color-@{value}-btn}';
-        }
-      }
-      td {
         &:first-child {
           color: ~'@{color-@{value}-theme_2-font-label}';
         }
       }
+      :global(.list-item) {
+        &.active {
+          color: ~'@{color-@{value}-btn}' !important;
+        }
+      }
     }
   }
 })

src/renderer/views/Leaderboard.vue

@@ -16,7 +16,7 @@
             @contextmenu="handleListsItemRigthClick($event, index)")
           span(:class="$style.listsLabel") {{item.name}}
     div(:class="$style.list")
-      material-song-list(v-model="selectedData" ref="songList" :hideListsMenu="hideListsMenu" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :list="list")
+      material-song-list(v-model="selectedData" ref="songList" :hideListsMenu="hideListsMenu" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="listInfo.limit" :total="listInfo.total" :noItem="$t('material.song_list.loding_list')" :list="list")
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
     material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
@@ -56,11 +56,18 @@ export default {
           y: 0,
         },
       },
+      listInfo: {
+        list: [],
+        total: 0,
+        page: 1,
+        limit: 30,
+        key: null,
+      },
     }
   },
   computed: {
     ...mapGetters(['setting']),
-    ...mapGetters('leaderboard', ['sources', 'boards', 'list', 'info']),
+    ...mapGetters('leaderboard', ['sources', 'boards', 'info']),
     ...mapGetters('list', ['defaultList']),
     boardList() {
       return this.source && this.boards[this.source] ? this.boards[this.source] : []
@@ -79,13 +86,22 @@ export default {
         },
       ]
     },
+    list() {
+      return this.listInfo.list
+    },
   },
   watch: {
     tabId(n, o) {
       this.setLeaderboard({ tabId: n })
       if (!n || (!o && this.page !== 1)) return
-      this.getList(1).then(() => {
+      this.listInfo.list = []
-        this.page = this.info.page
+      this.getList(1).then(listInfo => {
+        this.listInfo.list = listInfo.list
+        this.listInfo.total = listInfo.total
+        this.listInfo.limit = listInfo.limit
+        this.listInfo.page = listInfo.page
+        this.listInfo.key = listInfo.key
+        this.page = listInfo.page
       })
     },
     source(n, o) {
@@ -102,7 +118,7 @@ export default {
   mounted() {
     this.source = this.setting.leaderboard.source
     this.tabId = this.setting.leaderboard.tabId
-    this.page = this.info.page
+    this.page = this.listInfo.page
   },
   methods: {
     ...mapMutations(['setLeaderboard']),
@@ -206,8 +222,14 @@ export default {
       })
     },
     handleTogglePage(page) {
-      this.getList(page).then(() => {
+      this.listInfo.list = []
-        this.page = this.info.page
+      this.getList(page).then(listInfo => {
+        this.listInfo.list = listInfo.list
+        this.listInfo.total = listInfo.total
+        this.listInfo.limit = listInfo.limit
+        this.listInfo.page = listInfo.page
+        this.listInfo.key = listInfo.key
+        this.page = listInfo.page
       })
     },
     handleAddDownload(type) {
@@ -381,7 +403,7 @@ export default {
     transition: opacity .3s ease;
   }
 
-  :global(.list) {
+  :global(.selection-list) {
     max-height: 500px;
     box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
     li {
@@ -465,7 +487,7 @@ each(@themes, {
       :global(.label) {
         color: ~'@{color-@{value}-theme_2-font}' !important;
       }
-      :global(.list) {
+      :global(.selection-list) {
         li {
           background-color: ~'@{color-@{value}-theme_2-background_2}';
           &:hover {

src/renderer/views/List.vue

@@ -36,35 +36,26 @@
               th.nobreak(style="width: 22%;") {{$t('view.list.album')}}
               th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
               th.nobreak(style="width: 15%;") {{$t('view.list.action')}}
-      div(v-if="delayShow && list.length" :class="$style.content")
+      div(v-if="list.length" :class="$style.content" ref="dom_listContent")
-        div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
+        material-virtualized-list(:list="list" key-name="songmid" ref="list" #default="{ item, index }" :item-height="listItemHeight"
-          table
+          @scroll="handleScroll" containerClass="scroll" contentClass="list" @contextmenu.native.capture="handleContextMenu")
-            tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
+          div.list-item(@click="handleDoubleClick($event, index)"
-              tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"  @contextmenu="handleListItemRigthClick($event, index)"
+            :class="[{ [$style.active]: isPlayList && playInfo.playIndex === index }, { selected: selectedIndex == index }, { active: selectdListDetailData.includes(item) }, { [$style.disabled]: !assertApiSupport(item.source) }]"
-                @click="handleDoubleClick($event, index)" :class="[isPlayList && playInfo.playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
+            @contextmenu="handleListItemRigthClick($event, index)")
-                td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
+            div.list-item-cell.nobreak.center(style="flex: 0 0 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
-                td.break
+            div.list-item-cell.auto.break(:tips="item.name")
               span.select {{item.name}}
               span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
-                  //- span.badge.badge-light(v-if="item._types['128k']") 128K
+            div.list-item-cell.break(style="flex: 0 0 22%;")
-                  //- span.badge.badge-light(v-if="item._types['192k']") 192K
-                  //- span.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%;")
+            div.list-item-cell.break(style="flex: 0 0 22%;")
               span.select {{item.albumName}}
-                td(style="width: 9%;")
+            div.list-item-cell(style="flex: 0 0 9%;")
               span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
-                td(style="width: 15%; padding-left: 0; padding-right: 0;")
+            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)")
-                  //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
-                  //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
-                  //- button.btn-secondary(type='button' @click.stop='handleRemove(index)') 删除
-                  //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
       div(:class="$style.noItem" v-else)
-        p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
+        p(v-text="$t('view.list.no_item')")
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
     //- material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
@@ -79,8 +70,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()
+    setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
-    this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
     next()
   },
   created() {
-    this.listId = this.$route.query.id || this.defaultList.id
+    this.listId = this.$route.query.id || getListPrevSelectId() || this.defaultList.id
     this.setPrevSelectListId(this.listId)
-    this.handleSaveScroll = throttle((listId, location) => {
-      this.setListScroll({ id: listId, location })
-    }, 1000)
     this.listenEvent()
   },
   mounted() {
-    this.handleDelayShow()
+    this.restoreScroll(this.$route.query.scrollIndex, false)
-    this.setListsScroll()
   },
   beforeDestroy() {
     this.unlistenEvent()
-    this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
+    setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
   },
   methods: {
-    ...mapMutations(['setPrevSelectListId']),
     ...mapMutations('list', [
       'listRemove',
       'listRemoveMultiple',
@@ -378,9 +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() {
+    handleScroll() {
-      this.clearDelayTimeout()
+      setListPosition(this.listId, this.$refs.list.getScrollTop())
-      if (this.list.length > 150) {
-        this.delayTimeout = setTimeout(() => {
-          this.delayTimeout = null
-          this.delayShow = true
-          this.restoreScroll(this.$route.query.scrollIndex, false)
-        }, 200)
-      } else {
-        this.delayShow = true
-        this.restoreScroll(this.$route.query.scrollIndex, false)
-      }
-    },
-    handleScroll(e) {
-      this.handleSaveScroll(this.listId, e.target.scrollTop)
     },
     clearDelayTimeout() {
       if (this.delayTimeout) {
@@ -452,22 +430,15 @@ export default {
       }
     },
     handleScrollList(index, isAnimation, callback = () => {}) {
-      let location = this.getMusicLocation(index) - 150
+      this.$refs.list.scrollToIndex(index, -150, isAnimation).then(callback)
-      if (location < 0) location = 0
-      if (isAnimation) {
-        scrollTo(this.$refs.dom_scrollContent, location, 300, callback)
-      } else {
-        this.$refs.dom_scrollContent.scrollTo(0, location)
-        callback()
-      }
     },
     restoreScroll(index, isAnimation) {
       if (!this.list.length) return
       if (index == null) {
-        let location = this.listData.location || 0
+        let location = getListPosition(this.listData.id) || 0
-        if (this.setting.list.isSaveScrollLocation && location) {
+        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) {
+    // handleSelectListData(event, clickIndex) {
-      if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
+    //   if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
 
-      if (this.keyEvent.isShiftDown) {
+    //   if (this.keyEvent.isShiftDown) {
-        if (this.selectdListData.length) {
+    //     if (this.selectdListData.length) {
-          let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
+    //       let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
-          if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
+    //       if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
-          this.removeAllSelectList()
+    //       this.removeAllSelectList()
-          let isNeedReverse = false
+    //       let isNeedReverse = false
-          if (clickIndex < lastSelectIndex) {
+    //       if (clickIndex < lastSelectIndex) {
-            let temp = lastSelectIndex
+    //         let temp = lastSelectIndex
-            lastSelectIndex = clickIndex
+    //         lastSelectIndex = clickIndex
-            clickIndex = temp
+    //         clickIndex = temp
-            isNeedReverse = true
+    //         isNeedReverse = true
-          }
+    //       }
-          this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
+    //       this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
-          if (isNeedReverse) this.selectdListData.reverse()
+    //       if (isNeedReverse) this.selectdListData.reverse()
-          let nodes = this.$refs.dom_tbody.childNodes
+    //       // let nodes = this.$refs.dom_tbody.childNodes
-          do {
+    //       // do {
-            nodes[lastSelectIndex].classList.add('active')
+    //       //   nodes[lastSelectIndex].classList.add('active')
-            lastSelectIndex++
+    //       //   lastSelectIndex++
-          } while (lastSelectIndex <= clickIndex)
+    //       // } while (lastSelectIndex <= clickIndex)
-        } else {
+    //     } else {
-          event.currentTarget.classList.add('active')
+    //       // event.currentTarget.classList.add('active')
-          this.selectdListData.push(this.list[clickIndex])
+    //       this.selectdListData.push(this.list[clickIndex])
-        }
+    //     }
-      } else if (this.keyEvent.isModDown) {
+    //   } else if (this.keyEvent.isModDown) {
-        let item = this.list[clickIndex]
+    //     let item = this.list[clickIndex]
-        let index = this.selectdListData.indexOf(item)
+    //     let index = this.selectdListData.indexOf(item)
-        if (index < 0) {
+    //     if (index < 0) {
-          this.selectdListData.push(item)
+    //       this.selectdListData.push(item)
-          event.currentTarget.classList.add('active')
+    //       // event.currentTarget.classList.add('active')
-        } else {
+    //     } else {
-          this.selectdListData.splice(index, 1)
+    //       this.selectdListData.splice(index, 1)
-          event.currentTarget.classList.remove('active')
+    //       // event.currentTarget.classList.remove('active')
-        }
+    //     }
-      } else if (this.selectdListData.length) this.removeAllSelectList()
+    //   } else if (this.selectdListData.length) this.removeAllSelectList()
-    },
+    // },
     removeAllSelectListDetail() {
       this.selectdListDetailData = []
-      let dom_tbody = this.$refs.dom_tbody
+      // let dom_tbody = this.$refs.dom_tbody
-      if (!dom_tbody) return
+      // if (!dom_tbody) return
-      let nodes = dom_tbody.querySelectorAll('.active')
+      // let nodes = dom_tbody.querySelectorAll('.active')
-      for (const node of nodes) {
+      // for (const node of nodes) {
-        if (node.parentNode == dom_tbody) node.classList.remove('active')
+      //   if (node.parentNode == dom_tbody) node.classList.remove('active')
-      }
+      // }
-    },
-    removeAllSelectList() {
-      this.selectdListData = []
-      let dom_list = this.$refs.dom_lists_list
-      if (!dom_list) return
-      let nodes = dom_list.querySelectorAll('.selected')
-      for (const node of nodes) {
-        if (node.parentNode == dom_list) node.classList.remove('selected')
-      }
     },
+    // removeAllSelectList() {
+    //   this.selectdListData = []
+    //   let dom_list = this.$refs.dom_lists_list
+    //   if (!dom_list) return
+    //   let nodes = dom_list.querySelectorAll('.selected')
+    //   for (const node of nodes) {
+    //     if (node.parentNode == dom_list) node.classList.remove('selected')
+    //   }
+    // },
     testPlay(index) {
       // if (!this.assertApiSupport(this.list[index].source)) return
       this.setPlayList({ list: this.listData, index })
@@ -635,10 +598,10 @@ export default {
     handleSelectAllData() {
       this.removeAllSelectListDetail()
       this.selectdListDetailData = [...this.list]
-      let nodes = this.$refs.dom_tbody.childNodes
+      // let nodes = this.$refs.dom_tbody.childNodes
-      for (const node of nodes) {
+      // for (const node of nodes) {
-        node.classList.add('active')
+      //   node.classList.add('active')
-      }
+      // }
       // asyncSetArray(this.selectdListDetailData, isSelect ? [...this.list] : [])
     },
     handleAddDownloadMultiple(type) {
@@ -680,12 +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.listMenu.itemMenuControl.download = this.assertApiSupport(this.list[index].source)
-        this.assertApiSupport(this.list[index].source)
+      let dom_container = event.target.closest('.' + this.$style.container)
-      let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
+      // let dom_listItemCell = event.target.closest('.list-item-cell')
-      if (dom_selected) dom_selected.classList.remove('selected')
+      const getOffsetValue = (target, x = 0, y = 0) => {
-      this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
+        if (target === dom_container) return { x, y }
-      let dom_td = event.target.closest('td')
+        if (!target) return { x: 0, y: 0 }
-
+        x += target.offsetLeft
+        y += target.offsetTop
+        return getOffsetValue(target.offsetParent, x, y)
+      }
       this.listMenu.rightClickItemIndex = index
-      this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
+      this.selectedIndex = index
-      this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
+      let { x, y } = getOffsetValue(event.target)
+      this.listMenu.menuLocation.x = x + event.offsetX
+      this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.list.getScrollTop()
       this.hideListsMenu()
       this.$nextTick(() => {
         this.listMenu.isShowItemMenu = true
@@ -842,8 +803,7 @@ export default {
       }
     },
     hideListMenu() {
-      let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
+      this.selectedIndex = -1
-      if (dom_selected) dom_selected.classList.remove('selected')
       this.listMenu.isShowItemMenu = false
       this.listMenu.rightClickItemIndex = -1
     },
@@ -946,10 +906,9 @@ export default {
         case 'listClick':
           if (index < 0) return
           this.handleScrollList(index, true, () => {
-            let dom = document.getElementById('mid_' + this.list[index].songmid)
+            this.selectedIndex = index
-            dom.classList.add('selected')
             setTimeout(() => {
-              dom.classList.remove('selected')
+              this.selectedIndex = -1
               if (isPlay) this.testPlay(index)
             }, 600)
           })
@@ -1240,6 +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;
+  :global(.list-item) {
-
-  tr {
     &.active {
       color: @color-btn;
     }
   }
-  td {
+  :global(.list-item-cell) {
-    font-size: 12px;
+    font-size: 12px !important;
 
     &:first-child {
       // padding-left: 10px;
-      font-size: 11px;
+      font-size: 11px !important;
-      color: @color-theme_2-font-label;
+      color: @color-theme_2-font-label !important;
-    }
-  }
-
-  &.copying {
-    .no-select {
-      display: none;
     }
   }
 }
@@ -1280,6 +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 {
+    :global(.list) {
-      tr {
+      :global(.list-item) {
         &.active {
           color: ~'@{color-@{value}-btn}';
         }
       }
-      td {
+      :global(.list-item-cell) {
         &:first-child {
-          color: ~'@{color-@{value}-theme_2-font-label}';
+          color: ~'@{color-@{value}-theme_2-font-label}' !important;
         }
       }
     }

src/renderer/views/Setting.vue

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