Merge branch 'dev'

发布v1.3.0版本
修复小芸源评论的翻页加载问题
2026-09-20 08:04:00 +08:00 · 2020-11-01 18:18:15 +08:00 · 2020-11-01 18:17:34 +08:00 · 2020-11-01 18:01:04 +08:00 · 2020-11-01 14:36:53 +08:00 · 2020-11-01 01:23:04 +08:00
81 changed files with 3461 additions and 2036 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,65 @@ 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.3.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.2...v1.3.0) - 2020-11-01
+
+### 新增
+
+- 播放详情页新增歌曲评论加载显示（某些平台暂不支持显示子评论）
+
+### 优化
+
+- 修改播放详情页的歌曲图片的显示效果
+
+### 修复
+
+- 修复小芸源音乐搜索结果最多只有20条搜索结果的问题
+
+## [1.2.2](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.1...v1.2.2) - 2020-10-18
+
+### 修复
+
+- 降级 Electron 到 9.x.x 版本修复 Linux 版桌面歌词窗口变白的问题
+
+## [1.2.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.0...v1.2.1) - 2020-10-18
+
+### 优化
+
+- Linux版的软件界面默认使用圆角与阴影，顺便修复了桌面歌词窗口变白的问题，已在Ubuntu 18.10测试正常，若显示异常可尝试添加`-nt`参数启动
+
+### 修复
+
+- 修复聚合搜索的分页问题
+- 修复代理输入框输入的内容不生效的问题
+
+## [1.2.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.1.1...v1.2.0) - 2020-09-30
+
+提前祝大家中秋&国庆快乐~
+
+### 新增
+
+- 播放控制栏开启/关闭桌面歌词按钮 新增右击按钮时锁定/解锁桌面歌词功能
+
+### 优化
+
+- 优化我的列表滚动条位置的保存逻辑
+- 更新设置-备份与恢复功能的描述
+- 优化软件内鼠标悬停的提示界面
+
+### 修复
+
+- 修复桌面歌词窗口不允许拖出桌面之外的位置计算偏移Bug
+- 修复网易云KTV嗨榜无法加载的问题
+- 修复初始化搜索历史列表功能
+- 修复重启软件后试听列表与收藏列表无法恢复上次的滚动位置的问题
+- 修复歌曲封面无法嵌入的Bug
+- 修复酷狗歌词格式问题
+- 修复关闭切换动画时从搜索候选列表点击内容无效的问题
+
+### 其他
+
+- 更新 Electron 到 v10.1.3
+
 ## [1.1.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.1.0...v1.1.1) - 2020-09-19

 ### 修复
--- a/FAQ.md
+++ b/FAQ.md
@@ -41,7 +41,7 @@

 ### Windows 7 系统桌面歌词显示异常

-Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的**Windows 7 下界面异常（界面显示不完整）**方法解决。
+Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的 **Windows 7 下界面异常（界面显示不完整）** 方法解决。

 ### MAC OS 系统、桌面歌词有残留阴影

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

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

 ## 软件启动后，界面无法显示

-软件启动后，可以在任务栏看到软件，但软件界面在桌面上无任何显示。<br>
+对于软件启动后，可以在任务栏看到软件，但软件界面在桌面上无任何显示，或者整个界面偶尔闪烁的情况。<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>
@@ -136,5 +136,6 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的*

 ## 无法打开外部歌单

+不支持垮源打开歌单，请确认你需要打开的歌单平台是否与软件标签所写的歌单源对应；<br>
 对于分享出来的歌单，若打开失败，可尝试先在浏览器中打开后，再从浏览器地址栏复制URL地址到软件打开；<br>
 或者如果你知道歌单 id 也可以直接输入歌单 id 打开。<br>
--- a/README.md
+++ b/README.md
@@ -100,7 +100,7 @@ npm run pack:linux
 5. 由于使用本项目产生的包括由于本协议或由于使用或无法使用本项目而引起的任何性质的任何直接、间接、特殊、偶然或结果性损害（包括但不限于因商誉损失、停工、计算机故障或故障引起的损害赔偿，或任何及所有其他商业损害或损失）由使用者负责。
 6. 本项目完全免费，且开源发布于 GitHub 面向全世界人用作对技术的学习交流，本项目不对项目内的技术可能存在违反当地法律法规的行为作保证，**禁止在违反当地法律法规的情况下使用本项目**，对于使用者在明知或不知当地法律法规不允许的情况下使用本项目所造成的任何违法违规行为由使用者承担，本项目不承担由此造成的任何直接、间接、特殊、偶然或结果性责任。

-若你使用了本项目，将代表你接收以上协议。
+若你使用了本项目，将代表你接受以上协议。

 音乐平台不易，请尊重版权，支持正版。<br>
 若对此有疑问请 mail to: lyswhut+qq.com (请将`+`替换成`@`)
--- a/build-config/main/webpack.config.dev.js
+++ b/build-config/main/webpack.config.dev.js
@@ -23,7 +23,7 @@ module.exports = merge(baseConfig, {
      onErrors(severity, errors) { // Silent warning from electron-debug
        if (severity != 'warning') return

-        for (let i = errors.length; i > -1; i--) {
+        for (let i = errors.length - 1; i > -1; i--) {
          const error = errors[i]
          if (error.file == './node_modules/electron-debug/index.js') errors.splice(i, 1)
        }
--- a/build-config/renderer-lyric/webpack.config.prod.js
+++ b/build-config/renderer-lyric/webpack.config.prod.js
@@ -32,15 +32,11 @@ module.exports = merge(baseConfig, {
        NODE_ENV: '"production"',
      },
    }),
-    new webpack.NamedChunksPlugin(),
  ],
  optimization: {
+    chunkIds: 'named',
    minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: false, // set to true if you want JS source maps
-      }),
+      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
--- a/build-config/renderer/webpack.config.prod.js
+++ b/build-config/renderer/webpack.config.prod.js
@@ -32,15 +32,11 @@ module.exports = merge(baseConfig, {
        NODE_ENV: '"production"',
      },
    }),
-    new webpack.NamedChunksPlugin(),
  ],
  optimization: {
+    chunkIds: 'named',
    minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: false, // set to true if you want JS source maps
-      }),
+      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "lx-music-desktop",
-  "version": "1.1.1",
+  "version": "1.3.0",
  "description": "一个免费的音乐下载助手",
  "main": "./dist/electron/main.js",
  "productName": "lx-music-desktop",
@@ -59,7 +59,7 @@
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-formatter-friendly --fix src"
  },
  "browserslist": [
-    "Electron 10.1.2"
+    "Electron 10.1.3"
  ],
  "engines": {
    "node": ">= 12"
@@ -158,12 +158,12 @@
  },
  "homepage": "https://github.com/lyswhut/lx-music-desktop#readme",
  "devDependencies": {
-    "@babel/core": "^7.11.6",
+    "@babel/core": "^7.12.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-umd": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/polyfill": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
+    "@babel/plugin-transform-modules-umd": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "babel-minify-webpack-plugin": "^0.3.1",
@@ -171,68 +171,68 @@
    "cfonts": "^2.8.6",
    "chalk": "^4.1.0",
    "changelog-parser": "^2.8.0",
-    "copy-webpack-plugin": "^6.1.1",
+    "copy-webpack-plugin": "^6.2.1",
    "core-js": "^3.6.5",
    "cross-env": "^7.0.2",
    "css-loader": "^4.3.0",
-    "del": "^5.1.0",
-    "electron": "^10.1.2",
-    "electron-builder": "^22.8.1",
+    "del": "^6.0.0",
+    "electron": "^9.3.3",
+    "electron-builder": "^22.9.1",
    "electron-debug": "^3.1.0",
    "electron-devtools-installer": "^3.1.1",
-    "eslint": "^7.9.0",
+    "eslint": "^7.12.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-formatter-friendly": "^7.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.1.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "file-loader": "^6.1.0",
+    "eslint-plugin-standard": "^4.0.2",
+    "file-loader": "^6.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^4.5.0",
    "less": "^3.12.2",
-    "less-loader": "^7.0.1",
+    "less-loader": "^7.0.2",
    "markdown-it": "^11.0.1",
-    "mini-css-extract-plugin": "^0.11.2",
+    "mini-css-extract-plugin": "^0.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss-loader": "^4.0.2",
+    "postcss-loader": "^4.0.4",
    "postcss-pxtorem": "^5.1.1",
    "pug": "^3.0.0",
    "pug-loader": "^2.4.0",
    "pug-plain-loader": "^1.0.0",
-    "raw-loader": "^4.0.1",
+    "raw-loader": "^4.0.2",
    "rimraf": "^3.0.2",
    "spinnies": "^0.5.1",
    "stylus": "^0.54.8",
-    "stylus-loader": "^3.0.2",
-    "terser-webpack-plugin": "^4.2.1",
-    "url-loader": "^4.1.0",
-    "vue-loader": "^15.9.3",
+    "stylus-loader": "^4.2.0",
+    "terser-webpack-plugin": "^4.2.3",
+    "url-loader": "^4.1.1",
+    "vue-loader": "^15.9.4",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.1.4"
+    "webpack-merge": "^5.3.0"
  },
  "dependencies": {
    "crypto-js": "^4.0.0",
    "dnscache": "^1.0.2",
    "electron-log": "^4.2.4",
-    "electron-store": "^6.0.0",
+    "electron-store": "^6.0.1",
    "electron-updater": "^4.3.5",
    "iconv-lite": "^0.6.2",
-    "image-size": "^0.9.1",
+    "image-size": "^0.9.3",
    "js-htmlencode": "^0.3.0",
    "lrc-file-parser": "^1.0.5",
    "needle": "^2.5.2",
-    "node-id3": "^0.1.18",
+    "node-id3": "^0.2.1",
    "request": "^2.88.2",
    "vue": "^2.6.12",
-    "vue-i18n": "^8.21.1",
-    "vue-router": "^3.4.3",
+    "vue-i18n": "^8.22.1",
+    "vue-router": "^3.4.8",
    "vuex": "^3.5.1",
    "vuex-router-sync": "^5.0.0"
  }
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,3 +1,11 @@
+### 新增
+
+- 播放详情页新增歌曲评论加载显示（某些平台暂不支持显示子评论）
+
+### 优化
+
+- 修改播放详情页的歌曲图片的显示效果
+
 ### 修复

- 修复某些情况下桌面歌词不会播放的问题
+- 修复小芸源音乐搜索结果最多只有20条搜索结果的问题
--- a/publish/version.json
+++ b/publish/version.json
--- a/src/common/ipcNames.js
+++ b/src/common/ipcNames.js
@@ -48,7 +48,6 @@ const names = {
    get_playlist: 'get_playlist',
    save_playlist: 'save_playlist',
    get_data: 'get_data',
-    set_data: 'set_data',
    save_data: 'save_data',
    get_hot_key: 'get_hot_key',
  },
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -173,10 +173,11 @@ exports.initSetting = () => {
    // 迁移列表滚动位置设置 ~0.18.3
    if (setting.list.scroll) {
      let scroll = setting.list.scroll
-      electronStore_list.set('defaultList.location', scroll.locations.defaultList || 0)
-      electronStore_list.set('loveList.location', scroll.locations.loveList || 0)
+      electronStore_list.set('defaultList.location', scroll.locations.default || 0)
+      electronStore_list.set('loveList.location', scroll.locations.love || 0)
      electronStore_config.delete('setting.list.scroll')
      electronStore_config.set('setting.list.isSaveScrollLocation', scroll.enable)
+      delete setting.list.scroll
    }
  }

--- a/src/main/index.js
+++ b/src/main/index.js
@@ -95,7 +95,7 @@ function createWindow() {
    useContentSize: true,
    width: windowSizeInfo.width,
    frame: false,
-    transparent: !isLinux && !global.envParams.nt,
+    transparent: !global.envParams.nt,
    enableRemoteModule: false,
    // icon: path.join(global.__static, isWin ? 'icons/256x256.ico' : 'icons/512x512.png'),
    resizable: false,
@@ -133,7 +133,8 @@ function init() {
  createWindow()
 }

-app.on('ready', init)
+// https://github.com/electron/electron/issues/16809
+app.on('ready', isLinux ? () => setTimeout(init, 300) : init)

 app.on('activate', () => {
  if (global.modules.mainWindow) {
--- a/src/main/modules/winLyric/event.js
+++ b/src/main/modules/winLyric/event.js
@@ -1,7 +1,7 @@
 const { common: COMMON_EVENT_NAME, winLyric: WIN_LYRIC_EVENT_NAME, hotKey: HOT_KEY_EVENT_NAME, mainWindow: MAIN_WINDOW_EVENT_NAME } = require('../../events/_name')
 const { mainSend, NAMES: { winLyric: ipcWinLyricNames } } = require('../../../common/ipc')
 const { desktop_lyric } = require('../../../common/hotKey')
-const { setLyricWindow } = require('./utils')
+const { getLyricWindowBounds } = require('./utils')

 let isLock = null
 let isEnable = null
@@ -27,6 +27,17 @@ const setLrcConfig = () => {
      isAlwaysOnTop = desktopLyric.isAlwaysOnTop
      global.modules.lyricWindow.setAlwaysOnTop(desktopLyric.isAlwaysOnTop, 'screen-saver')
    }
+    if (isLockScreen != desktopLyric.isLockScreen) {
+      isLockScreen = desktopLyric.isLockScreen
+      if (desktopLyric.isLockScreen) {
+        global.modules.lyricWindow.setBounds(getLyricWindowBounds(global.modules.lyricWindow.getBounds(), {
+          x: null,
+          y: null,
+          w: desktopLyric.width,
+          h: desktopLyric.height,
+        }))
+      }
+    }
  }
  if (isEnable != desktopLyric.enable) {
    isEnable = desktopLyric.enable
@@ -36,17 +47,6 @@ const setLrcConfig = () => {
      global.lx_event.winLyric.close()
    }
  }
-  if (isLockScreen != desktopLyric.isLockScreen) {
-    isLockScreen = desktopLyric.isLockScreen
-    if (desktopLyric.isLockScreen) {
-      setLyricWindow({
-        x: desktopLyric.x,
-        y: desktopLyric.y,
-        w: desktopLyric.width,
-        h: desktopLyric.height,
-      })
-    }
-  }
 }
 global.lx_event.common.on(COMMON_EVENT_NAME.config, name => {
  if (WIN_LYRIC_EVENT_NAME.name === name) return
--- a/src/main/modules/winLyric/index.js
+++ b/src/main/modules/winLyric/index.js
@@ -1,6 +1,7 @@
 const { BrowserWindow } = require('electron')
 const { winLyric: WIN_LYRIC_EVENT_NAME } = require('../../events/_name')
 const { debounce } = require('../../../common/utils')
+const { getLyricWindowBounds } = require('./utils')

 require('./event')
 require('./rendererEvent')
@@ -67,29 +68,29 @@ const winEvent = lyricWindow => {
  })
 }

-let offset = 8
 const createWindow = () => {
  if (global.modules.lyricWindow) return
  if (!global.appSetting.desktopLyric.enable) return
  // const windowSizeInfo = getWindowSizeInfo(global.appSetting)
  let { x, y, width, height, isAlwaysOnTop } = global.appSetting.desktopLyric
  let { width: screenWidth, height: screenHeight } = global.envParams.workAreaSize
-  screenWidth += offset * 2
-  screenHeight += offset * 2
  if (x == null) {
-    x = screenWidth - width - offset
-    y = screenHeight - height - offset
+    x = screenWidth - width
+    y = screenHeight - height
  }
  if (global.appSetting.desktopLyric.isLockScreen) {
-    x = Math.max(-offset, screenWidth < (width + x) ? screenWidth - width : x)
-    y = Math.max(-offset, screenHeight < (height + y) ? screenHeight - height : y)
+    let bounds = getLyricWindowBounds({ x, y, width, height }, { x: null, y: null, w: width, h: height })
+    x = bounds.x
+    y = bounds.y
+    width = bounds.width
+    height = bounds.height
  }
  /**
   * Initial window options
   */
  global.modules.lyricWindow = new BrowserWindow({
-    height: Math.max(height > screenHeight ? screenHeight : height, 80),
-    width: Math.max(width > screenWidth ? screenWidth : width, 380),
+    height,
+    width,
    x,
    y,
    minWidth: 380,
--- a/src/main/modules/winLyric/rendererEvent.js
+++ b/src/main/modules/winLyric/rendererEvent.js
@@ -8,7 +8,7 @@ const {
  },
 } = require('../../../common/ipc')
 const { winLyric: WIN_LYRIC_EVENT_NAME } = require('../../events/_name')
-const { setLyricWindow } = require('./utils')
+const { getLyricWindowBounds } = require('./utils')

 mainOn(ipcWinLyricNames.get_lyric_info, (event, action) => {
  if (!global.modules.mainWindow) return
@@ -28,5 +28,5 @@ mainHandle(ipcWinLyricNames.get_lyric_config, async() => {
 })

 mainOn(ipcWinLyricNames.set_win_bounds, (event, options) => {
-  setLyricWindow(options)
+  global.modules.lyricWindow.setBounds(getLyricWindowBounds(global.modules.lyricWindow.getBounds(), options))
 })
--- a/src/main/modules/winLyric/utils.js
+++ b/src/main/modules/winLyric/utils.js
@@ -1,56 +1,68 @@
 // 设置窗口位置、大小
-let bounds
 let winX
 let winY
 let wasW
-let wasY
+let wasH
 let offset = 8
-exports.setLyricWindow = ({ x = 0, y = 0, w = 0, h = 0 }) => {
-  if (!global.modules.lyricWindow) return
-  bounds = global.modules.lyricWindow.getBounds()
-  wasW = global.envParams.workAreaSize.width
-  wasY = global.envParams.workAreaSize.height + offset
+let minWidth = 380
+let minHeight = 80
+exports.getLyricWindowBounds = (bounds, { x = 0, y = 0, w = 0, h = 0 }) => {
+  if (w < minWidth) w = minWidth
+  if (h < minHeight) h = minHeight
+
+  if (global.appSetting.desktopLyric.isLockScreen) {
+    wasW = global.envParams.workAreaSize.width + offset
+    wasH = global.envParams.workAreaSize.height + offset
+    if (w > wasW + offset) w = wasW + offset
+    if (h > wasH + offset) h = wasH + offset
+    if (x == null) {
+      if (bounds.x > wasW - w) {
+        x = wasW - w - bounds.x
+      } else if (bounds.x < -offset) {
+        x = bounds.x + offset
+      } else {
+        x = 0
+      }
+      if (bounds.y > wasH - h) {
+        y = wasH - h - bounds.y
+      } else if (bounds.y < -offset) {
+        y = bounds.y + offset
+      } else {
+        y = 0
+      }
+    }
+    winX = bounds.x + x
+    winY = bounds.y + y
+
+    if (x != 0) {
+      if (winX < -offset) {
+        winX = -offset
+      } else if (winX + w > wasW) {
+        winX = wasW - w
+      }
+    }
+    if (y != 0) {
+      if (winY < -offset) {
+        winY = -offset
+      } else if (winY + h > wasH) {
+        winY = wasH - h
+      }
+    }
+
+    x = winX
+    y = winY
+
+    if (x + w > wasW) w = wasW - x
+    if (y + h > wasH) h = wasH - y
+  } else {
+    y += bounds.y
+    x += bounds.x
+  }

  bounds.width = w
  bounds.height = h
-  if (bounds.width > wasW - offset) {
-    bounds.width = wasW - offset
-  } else if (bounds.width < 380) {
-    bounds.width = 380
-  }
-  if (bounds.height > wasY) {
-    bounds.height = wasY + offset
-  } else if (bounds.height < 80) {
-    bounds.height = 80
-  }
-
-  if (global.appSetting.desktopLyric.isLockScreen) {
-    if (x != 0) {
-      winX = bounds.x + x
-      if (winX > wasW - bounds.width + offset) {
-        winX = wasW - bounds.width + offset
-      } else if (winX < -offset) {
-        winX = -offset
-      }
-      bounds.x = winX
-    }
-    if (y != 0) {
-      winY = bounds.y + y
-      if (winY > wasY - bounds.height) {
-        winY = wasY - bounds.height
-      } else if (winY < -offset) {
-        winY = -offset
-      }
-      bounds.y = winY
-    }
-  } else {
-    if (x != 0) {
-      bounds.x = bounds.x + x
-    }
-    if (y != 0) {
-      bounds.y = bounds.y + y
-    }
-  }
-  // console.log(bounds, x, y, w, h)
-  global.modules.lyricWindow.setBounds(bounds)
+  bounds.x = x
+  bounds.y = y
+  // console.log('util bounds', bounds)
+  return bounds
 }
--- a/src/main/rendererEvents/data.js
+++ b/src/main/rendererEvents/data.js
@@ -9,4 +9,4 @@ const electronStore_data = new Store({
 mainHandle(ipcMainWindowNames.get_data, async(event, path) => electronStore_data.get(path))


-mainOn(ipcMainWindowNames.save_data, (event, { path, data }) => electronStore_data.get(path, data))
+mainOn(ipcMainWindowNames.save_data, (event, { path, data }) => electronStore_data.set(path, data))
--- a/src/main/rendererEvents/playList.js
+++ b/src/main/rendererEvents/playList.js
@@ -2,15 +2,15 @@ const Store = require('electron-store')
 const { mainOn, NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')


-const electronStore_list = new Store({
-  name: 'playList',
-})
+let electronStore_list

 mainHandle(ipcMainWindowNames.get_playlist, async(event, isIgnoredError = false) => {
-  let electronStore_list = new Store({
-    name: 'playList',
-    clearInvalidConfig: !isIgnoredError,
-  })
+  if (!electronStore_list) {
+    electronStore_list = new Store({
+      name: 'playList',
+      clearInvalidConfig: !isIgnoredError,
+    })
+  }

  return {
    defaultList: electronStore_list.get('defaultList'),
@@ -20,4 +20,4 @@ mainHandle(ipcMainWindowNames.get_playlist, async(event, isIgnoredError = false)
  }
 })

-mainOn(ipcMainWindowNames.save_playlist, (event, { type, data }) => electronStore_list.set(type, data))
+mainOn(ipcMainWindowNames.save_playlist, (event, { type, data }) => electronStore_list && electronStore_list.set(type, data))
--- a/src/main/utils/flacMeta.js
+++ b/src/main/utils/flacMeta.js
@@ -72,9 +72,9 @@ module.exports = (filePath, meta) => {
      if (respones.statusCode !== 200 && respones.statusCode != 206) return writeMeta(filePath, meta)
      respones
        .pipe(fs.createWriteStream(picPath))
-        .on('finish', () => {
+        .on('finish', async() => {
          if (respones.complete) {
-            writeMeta(filePath, meta, picPath)
+            await writeMeta(filePath, meta, picPath)
          } else {
            writeMeta(filePath, meta)
          }
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-#container(v-if="isProd && !isNt" :class="theme" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
+#container(v-if="isProd && !isNt && !isLinux" :class="theme" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
  core-aside#left
  #right
    core-toolbar#toolbar
@@ -42,6 +42,7 @@ export default {
    return {
      isProd: process.env.NODE_ENV === 'production',
      isNt: false,
+      isLinux,
      globalObj: {
        apiSource: 'test',
        proxy: {},
@@ -94,7 +95,7 @@ export default {
      })
    }, 1000)
    this.saveSearchHistoryList = throttle(n => {
-      rendererSend(NAMES.mainWindow.set_data, {
+      rendererSend(NAMES.mainWindow.save_data, {
        path: 'searchHistoryList',
        data: n,
      })
@@ -292,7 +293,7 @@ export default {
      rendererInvoke(NAMES.mainWindow.get_data, 'searchHistoryList').then(historyList => {
        if (historyList == null) {
          historyList = []
-          rendererInvoke(NAMES.mainWindow.set_data, { path: 'searchHistoryList', data: historyList })
+          rendererSend(NAMES.mainWindow.save_data, { path: 'searchHistoryList', data: historyList })
        } else {
          this.setSearchHistoryList(historyList)
        }
@@ -338,12 +339,12 @@ export default {
    },
    handleEnvParamsInit(envParams) {
      this.envParams = envParams
-      this.isNt = isLinux || this.envParams.nt
+      this.isNt = this.envParams.nt
      if (this.isNt) {
        document.body.classList.remove('transparent')
        document.body.classList.add('noTransparent')
      }
-      if (this.isProd && !this.isNt) {
+      if (this.isProd && !this.isNt && !this.isLinux) {
        document.body.addEventListener('mouseenter', this.dieableIgnoreMouseEvents)
        document.body.addEventListener('mouseleave', this.enableIgnoreMouseEvents)
      }
--- a/src/renderer/assets/images/defaultUser.jpg
+++ b/src/renderer/assets/images/defaultUser.jpg
--- a/src/renderer/assets/styles/variables.less
+++ b/src/renderer/assets/styles/variables.less
@@ -23,6 +23,7 @@
@color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
 // @color-theme_2-line: transparent;
@color-theme_2-line: lighten(@color-theme, 35%);
+@color-reply-floor: fadeout(@color-theme, 95%);
@color-theme-sidebar: @color-theme;
@color-btn: lighten(@color-theme, 5%);
@color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
@@ -91,6 +92,7 @@
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
 // @color-green-theme_2-line: transparent;
@color-green-theme_2-line: lighten(@color-green-theme, 45%);
+@color-green-reply-floor: fadeout(@color-green-theme, 95%);
@color-green-theme-sidebar: @color-green-theme;
@color-green-btn: lighten(@color-green-theme, 5%);
@color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
@@ -148,6 +150,7 @@
@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
 // @color-yellow-theme_2-line: transparent;
@color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
+@color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
@color-yellow-theme-sidebar: @color-yellow-theme;
@color-yellow-btn: darken(@color-yellow-theme, 5%);
@color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
@@ -204,6 +207,7 @@
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
 // @color-orange-theme_2-line: transparent;
@color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
+@color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
@color-orange-theme-sidebar: @color-orange-theme;
@color-orange-btn: lighten(@color-orange-theme, 5%);
@color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
@@ -260,6 +264,7 @@
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
 // @color-blue-theme_2-line: transparent;
@color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
+@color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
@color-blue-theme-sidebar: @color-blue-theme;
@color-blue-btn: lighten(@color-blue-theme, 5%);
@color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
@@ -316,6 +321,7 @@
@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
 // @color-red-theme_2-line: transparent;
@color-red-theme_2-line: lighten(@color-red-theme, 42%);
+@color-red-reply-floor: fadeout(@color-red-theme, 95%);
@color-red-theme-sidebar: @color-red-theme;
@color-red-btn: lighten(@color-red-theme, 5%);
@color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
@@ -374,6 +380,7 @@
@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
 // @color-pink-theme_2-line: transparent;
@color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
+@color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
@color-pink-theme-sidebar: @color-pink-theme;
@color-pink-btn: darken(@color-pink-theme, 3%);
@color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
@@ -430,6 +437,7 @@
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
 // @color-purple-theme_2-line: transparent;
@color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
+@color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
@color-purple-theme-sidebar: @color-purple-theme;
@color-purple-btn: lighten(@color-purple-theme, 5%);
@color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
@@ -486,6 +494,7 @@
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
 // @color-grey-theme_2-line: transparent;
@color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
+@color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
@color-grey-theme-sidebar: @color-grey-theme;
@color-grey-btn: lighten(@color-grey-theme, 5%);
@color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
@@ -543,6 +552,7 @@
@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
 // @color-ming-theme_2-line: transparent;
@color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
+@color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
@color-ming-theme-sidebar: @color-ming-theme;
@color-ming-btn: lighten(@color-ming-theme, 5%);
@color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
@@ -602,6 +612,7 @@
@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
 // @color-blue2-theme_2-line: transparent;
@color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
+@color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);
@color-blue2-theme-sidebar: @color-blue2-theme;
@color-blue2-btn: lighten(@color-blue2-theme, 5%);
@color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
@@ -651,7 +662,7 @@
@color-mid_autumn-theme-font: rgba(246, 233, 255, 0.9);
@color-mid_autumn-theme-font-label: fadeout(lighten(@color-mid_autumn-theme, 20%), 20%);
@color-mid_autumn-theme_2: rgba(255, 255, 255, .9);
-@color-mid_autumn-theme_2-background_1: #e7e7e9;
+@color-mid_autumn-theme_2-background_1: #ececec;
@color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%);
@color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
@color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
@@ -659,6 +670,7 @@
@color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
@color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%);
+@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
@color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
@color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
@color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -716,6 +728,7 @@
@color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
@color-mid_autumn-theme_2-line: darken(@color-mid_autumn-theme, 18%);
+@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
@color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
@color-mid_autumn-btn: darken(@color-mid_autumn-theme, 10%);
@color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -772,6 +785,7 @@
@color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
 // @color-naruto-theme_2-line: transparent;
@color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
+@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 12%), 90%);
@color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
@color-naruto-btn: lighten(@color-naruto-theme, 2%);
@color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
@@ -828,6 +842,7 @@
@color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
 // @color-happy_new_year-theme_2-line: transparent;
@color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
+@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 12%), 85%);
@color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1);
@color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%);
@color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);
--- a/src/renderer/components/core/Aside.vue
+++ b/src/renderer/components/core/Aside.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
 div(:class="$style.aside")
  div(:class="$style.controlBtn" v-if="setting.controlBtnPosition == 'left'")
-    button(type="button" :class="$style.close" :title="$t('core.toolbar.close')" @click="close")
+    button(type="button" :class="$style.close" :tips="$t('core.toolbar.close')" @click="close")
      svg(:class="$style.controlBtniIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
        use(xlink:href='#icon-window-close')
-    button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
+    button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
      svg(:class="$style.controlBtniIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
        use(xlink:href='#icon-window-minimize')

@@ -16,18 +16,18 @@ div(:class="$style.aside")
    dl
      //- dt {{$t('core.aside.online_music')}}
      dd
-        router-link(:active-class="$style.active" to="search" :title="$t('core.aside.search')")
+        router-link(:active-class="$style.active" to="search" :tips="$t('core.aside.search')")
          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 425.2 425.2' space='preserve')
              use(xlink:href='#icon-search-2')
      dd
-        router-link(:active-class="$style.active" to="songList" :title="$t('core.aside.song_list')")
+        router-link(:active-class="$style.active" to="songList" :tips="$t('core.aside.song_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 425.2 425.2' space='preserve')
              use(xlink:href='#icon-album')
          //- span {{$t('core.aside.song_list')}}
      dd
-        router-link(:active-class="$style.active" to="leaderboard" :title="$t('core.aside.leaderboard')")
+        router-link(:active-class="$style.active" to="leaderboard" :tips="$t('core.aside.leaderboard')")
          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 425.22 425.2' space='preserve')
              use(xlink:href='#icon-leaderboard')
@@ -35,20 +35,20 @@ div(:class="$style.aside")
    dl
      //- dt {{$t('core.aside.my_music')}}
      dd
-        router-link(:active-class="$style.active" :title="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
+        router-link(:active-class="$style.active" :tips="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
          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')
    dl
      //- dt {{$t('core.aside.other')}}
      dd(v-if="setting.download.enable")
-        router-link(:active-class="$style.active" to="download" :title="$t('core.aside.download')")
+        router-link(:active-class="$style.active" to="download" :tips="$t('core.aside.download')")
          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 425.2 425.2' space='preserve')
              use(xlink:href='#icon-download-2')
          //- span {{$t('core.aside.download')}}
      dd
-        router-link(:active-class="$style.active" to="setting" :title="$t('core.aside.setting')")
+        router-link(:active-class="$style.active" to="setting" :tips="$t('core.aside.setting')")
          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 493.23 436.47' space='preserve')
              use(xlink:href='#icon-setting')
--- a/src/renderer/components/core/Icons.vue
+++ b/src/renderer/components/core/Icons.vue
@@ -75,8 +75,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
      // 0 0 512 512
      path(d='M511.563,434.259c-1.728-142.329-124.42-258.242-277.087-263.419V95.999c0-17.645-14.342-31.999-31.974-31.999 c-7.931,0-15.591,3.042-21.524,8.562c0,0-134.828,124.829-173.609,163.755C2.623,241.109,0,248.088,0,255.994 c0,7.906,2.623,14.885,7.369,19.687c38.781,38.915,173.609,163.745,173.609,163.745c5.933,5.521,13.593,8.562,21.524,8.562 c17.631,0,31.974-14.354,31.974-31.999v-74.591c153.479,2.156,255.792,50.603,255.792,95.924c0,5.896,4.767,10.666,10.658,10.666 c0.167,0.021,0.333,0.01,0.416,0c5.891,0,10.658-4.771,10.658-10.666C512,436.259,511.854,435.228,511.563,434.259z')
    g#icon-refresh(fill='currentColor')
-      // 0 0 512 512
-      path(d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z')
+      // 0 0 24 24
+      path(d='M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z')
    g#icon-eraser(fill='currentColor')
      // 0 0 512 512
      path(d='M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z')
@@ -206,5 +206,16 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
      path(d='M256,170s-62.469-76.808-141-24C44.762,222.824,84.909,325.08,256,415c21.339-8.361,44-17,44-17,19-6.392,28.155,20.742,16,26-27.589,11.935,5.974-4.141-60,28C-35.524,313.85,43.993,149.031,95,117c86.8-65.89,162,10,162,10s58.158-60.523,140-23c104.032,58.528,64,161.9,45,196-9.152,15.154-39.559-4.159-32-16,20.34-37.888,45.522-107.349-25-150C314.919,103.92,256,170,256,170Z')
      path(d='M383,368c-8.1.01-24.77-.155-40,0-15.713.16-15.282,34.964,0,35,15.1,0.035,40,0,40,0s-0.068,42.8,0,48c0.208,15.961,32.261,15.791,32-1-0.072-4.649,0-47,0-47s38.008-.031,43,0c15.732,0.046,14.947-33.98-1-34-4.884.093-42,0-42,0s-0.053-28.341,0-46c0.046-15.189-32.028-15.512-32,0C383.027,337.74,382.782,365.139,383,368Z')

+    g#icon-thumbs-up(fill='currentColor')
+      // 0 0 512 512
+      path(d='M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z')
+
+    g#icon-close(fill='currentColor')
+      // 0 0 24 24
+      path(d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
+
+    g#icon-comment(fill='currentColor')
+      // 0 0 24 24
+      path(d='M16 11H8V9H16V11M22 4V16C22 17.11 21.11 18 20 18H13.9L10.2 21.71C10 21.9 9.75 22 9.5 22H9C8.45 22 8 21.55 8 21V18H4C2.9 18 2 17.11 2 16V4C2 2.89 2.9 2 4 2H20C21.11 2 22 2.9 22 4M20 4H4V16H10V19.08L13.08 16H20V4')
 </template>

--- a/src/renderer/components/core/Player.vue
+++ b/src/renderer/components/core/Player.vue
@@ -8,19 +8,19 @@ div(:class="$style.player")
    div(:class="$style.middleContainer" v-if="!isShowPlayerDetail")
      div(:class="$style.column1")
        div(:class="$style.container")
-          div(:class="$style.title" @click="handleCopy(title)" :title="title + $t('core.player.copy_title')") {{title}}
+          div(:class="$style.title" @click="handleCopy(title)" :tips="title + $t('core.player.copy_title')") {{title}}
          div(:class="$style.controlBtn")

            div(:class="$style.volumeContent")
              div(:class="[$style.volume, setting.player.isMute ? $style.muted : null]")
                div(:class="$style.volumeBar" :style="{ transform: `scaleX(${volume || 0})` }")
-              div(:class="$style.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :title="`${$t('core.player.volume')}${parseInt(volume * 100)}%`")
-            div(:class="$style.titleBtn" @click='toggleDesktopLyric' :title="setting.desktopLyric.enable ? $t('core.player.desktop_lyric_off') : $t('core.player.desktop_lyric_on')")
+              div(:class="$style.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :tips="`${$t('core.player.volume')}${parseInt(volume * 100)}%`")
+            div(:class="$style.titleBtn" @click='toggleDesktopLyric' @contextmenu="handleToggleLockDesktopLyric" :tips="toggleDesktopLyricBtnTitle")
              svg(v-if="setting.desktopLyric.enable" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
-                use(xlink:href='#icon-desktop-lyric-off')
-              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
                use(xlink:href='#icon-desktop-lyric-on')
-            div(:class="$style.titleBtn" @click='toggleNextPlayMode' :title="nextTogglePlayName")
+              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
+                use(xlink:href='#icon-desktop-lyric-off')
+            div(:class="$style.titleBtn" @click='toggleNextPlayMode' :tips="nextTogglePlayName")
              svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='80%' viewBox='0 0 24 24' space='preserve')
                use(xlink:href='#icon-list-loop')
              svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
@@ -31,10 +31,10 @@ div(:class="$style.player")
                use(xlink:href='#icon-single-loop')
              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
                use(xlink:href='#icon-single')
-            div(:class="$style.titleBtn" @click='addMusicTo' :title="$t('core.player.add_music_to')")
+            div(:class="$style.titleBtn" @click='addMusicTo' :tips="$t('core.player.add_music_to')")
              svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='80%' viewBox='0 0 512 512' space='preserve')
                use(xlink:href='#icon-add-2')
-          //- div(:class="$style.playBtn" @click='handleNext' title="音量")
+          //- div(:class="$style.playBtn" @click='handleNext' tips="音量")
            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve')
              use(xlink:href='#icon-sound')

@@ -49,24 +49,26 @@ div(:class="$style.player")
        span(style="margin: 0 5px;") /
        span {{maxPlayTimeStr}}
  div(:class="$style.right")
-    div(:class="$style.playBtn" @click='handlePrev' :title="$t('core.player.next')" style="transform: rotate(180deg);")
+    div(:class="$style.playBtn" @click='handlePrev' :tips="$t('core.player.next')" style="transform: rotate(180deg);")
      svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
        use(xlink:href='#icon-nextMusic')
-    div(:class="$style.playBtn" :title="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click='togglePlay')
+    div(:class="$style.playBtn" :tips="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click='togglePlay')
      svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
        use(xlink:href='#icon-pause')
      svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
        use(xlink:href='#icon-play')
-    div(:class="$style.playBtn" @click='handleNext' :title="$t('core.player.next')")
+    div(:class="$style.playBtn" @click='handleNext' :tips="$t('core.player.next')")
      svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
        use(xlink:href='#icon-nextMusic')
  //- transition(enter-active-class="animated lightSpeedIn"
  transition(enter-active-class="animated lightSpeedIn"
      leave-active-class="animated slideOutDown")
-    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="musicInfo"
+    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
                      :lyric="lyric" :list="list" :listId="listId"
                      :playInfo="{ nowPlayTimeStr, maxPlayTimeStr, progress, nowPlayTime, status }"
-                      :isPlay="isPlay" @action="handlePlayDetailAction")
+                      :isPlay="isPlay" @action="handlePlayDetailAction"
+                      :nextTogglePlayName="nextTogglePlayName"
+                      @toggle-next-play-mode="toggleNextPlayMode" @add-music-to="addMusicTo")

  material-list-add-modal(:show="isShowAddMusicTo" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong" @close="isShowAddMusicTo = false")
  svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style="display: none;")
@@ -173,6 +175,17 @@ export default {
        default: return this.$t('core.player.play_toggle_mode_off')
      }
    },
+    toggleDesktopLyricBtnTitle() {
+      return `${
+        this.setting.desktopLyric.enable
+          ? this.$t('core.player.desktop_lyric_off')
+          : this.$t('core.player.desktop_lyric_on')
+      }（${
+        this.setting.desktopLyric.isLock
+          ? this.$t('core.player.desktop_lyric_unlock')
+          : this.$t('core.player.desktop_lyric_lock')
+      }）`
+    },
  },
  mounted() {
    this.init()
@@ -287,7 +300,7 @@ export default {
      'setPlayedList',
      'removePlayedList',
    ]),
-    ...mapMutations(['setVolume', 'setPlayNextMode', 'setVisibleDesktopLyric']),
+    ...mapMutations(['setVolume', 'setPlayNextMode', 'setVisibleDesktopLyric', 'setLockDesktopLyric']),
    ...mapMutations('list', ['updateMusicInfo']),
    ...mapMutations(['setMediaDeviceId']),
    handleRegisterEvent(action) {
@@ -756,6 +769,7 @@ export default {
      })
    },
    showPlayerDetail() {
+      if (!this.targetSong) return
      this.visiblePlayerDetail(true)
    },
    handleTransitionEnd(e) {
@@ -867,6 +881,9 @@ export default {
    toggleDesktopLyric() {
      this.setVisibleDesktopLyric(!this.setting.desktopLyric.enable)
    },
+    handleToggleLockDesktopLyric() {
+      this.setLockDesktopLyric(!this.setting.desktopLyric.isLock)
+    },
    toggleNextPlayMode() {
      let index = playNextModes.indexOf(this.setting.player.togglePlayMethod)
      if (++index >= playNextModes.length) index = -1
@@ -1147,6 +1164,7 @@ export default {
  display: flex;
  padding-top: 2px;
  // justify-content: space-between;
+  height: 16px;
  align-items: center;
 }

--- a/src/renderer/components/core/PlayerDetail.vue
+++ b/src/renderer/components/core/PlayerDetail.vue
@@ -4,37 +4,56 @@
    //- div(:class="$style.bg2")
    div(:class="$style.header")
      div(:class="$style.controBtn")
-        button(type="button" :class="$style.hide" :title="$t('core.player.hide_detail')" @click="visiblePlayerDetail(false)")
+        button(type="button" :class="$style.hide" :tips="$t('core.player.hide_detail')" @click="visiblePlayerDetail(false)")
          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" :title="$t('core.toolbar.min')" @click="min")
+        button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
            use(xlink:href='#icon-window-minimize')

        //- button(type="button" :class="$style.max" @click="max")
-        button(type="button" :class="$style.close" :title="$t('core.toolbar.close')" @click="close")
+        button(type="button" :class="$style.close" :tips="$t('core.toolbar.close')" @click="close")
          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
            use(xlink:href='#icon-window-close')

-    div(:class="$style.main")
+    div(:class="[$style.main, isShowComment ? $style.showComment : null]")
      div(:class="$style.left")
+        //- div(:class="$style.info")
        div(:class="$style.info")
-          div(:class="$style.img")
-            img(:src="musicInfo.img" v-if="musicInfo.img")
+          img(:class="$style.img" :src="musicInfo.img" v-if="musicInfo.img")
          div(:class="$style.description")
            p {{$t('core.player.name')}}{{musicInfo.name}}
            p {{$t('core.player.singer')}}{{musicInfo.singer}}
            p(v-if="musicInfo.album") {{$t('core.player.album')}}{{musicInfo.album}}
-        //- div(:class="$style.list")
-          ul

      div(:class="$style.right")
        div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
          div(:class="$style.lyricSpace")
          p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
          div(:class="$style.lyricSpace")
+
+      material-music-comment(:class="$style.comment" :titleFormat="this.setting.download.fileName" :musicInfo="musicInfo" v-model="isShowComment")
+
    div(:class="$style.footer")
-      div(:class="$style.left")
+      div(:class="$style.footerLeft")
+        div(:class="$style.footerLeftControlBtns")
+          div(:class="[$style.footerLeftControlBtn, isShowComment ? $style.active : null]" @click="isShowComment = !isShowComment" :tips="$t('core.player.comment_show')")
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-comment')
+          div(:class="$style.footerLeftControlBtn" @click="$emit('toggle-next-play-mode')" :tips="nextTogglePlayName")
+            svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-list-loop')
+            svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-list-random')
+            svg(v-else-if="setting.player.togglePlayMethod == 'list'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-list-order')
+            svg(v-else-if="setting.player.togglePlayMethod == 'singleLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='110%' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-single-loop')
+            svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-single')
+          div(:class="$style.footerLeftControlBtn" @click="$emit('add-music-to', musicInfo)" :tips="$t('core.player.add_music_to')")
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
+              use(xlink:href='#icon-add-2')
        div(:class="$style.progressContainer")
          div(:class="$style.progressContent")
            div(:class="$style.progress")
@@ -50,15 +69,15 @@
      div(:class="$style.playControl")
        //- div(:class="$style.playBtn")
        //- div(:class="$style.playBtn")
-        div(:class="$style.playBtn" @click="$emit('action', { type: 'prev' })" style="transform: rotate(180deg);" :title="$t('core.player.prev')")
+        div(:class="$style.playBtn" @click="$emit('action', { type: 'prev' })" style="transform: rotate(180deg);" :tips="$t('core.player.prev')")
          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
            use(xlink:href='#icon-nextMusic')
-        div(:class="$style.playBtn" :title="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click="$emit('action', { type: 'togglePlay' })")
+        div(:class="$style.playBtn" :tips="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click="$emit('action', { type: 'togglePlay' })")
          svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
            use(xlink:href='#icon-pause')
          svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
            use(xlink:href='#icon-play')
-        div(:class="$style.playBtn" @click="$emit('action', { type: 'next' })" :title="$t('core.player.next')")
+        div(:class="$style.playBtn" @click="$emit('action', { type: 'next' })" :tips="$t('core.player.next')")
          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
            use(xlink:href='#icon-nextMusic')
 </template>
@@ -124,6 +143,7 @@ export default {
      type: Boolean,
      default: false,
    },
+    nextTogglePlayName: String,
  },
  watch: {
    // 'musicInfo.img': {
@@ -205,6 +225,7 @@ export default {
      _lyricLines: [],
      lyricLines: [],
      isSetedLines: false,
+      isShowComment: false,
    }
  },
  mounted() {
@@ -452,33 +473,56 @@ export default {
  overflow: hidden;
  display: flex;
  padding: 0 30px;
+
+  &.showComment {
+    .left {
+      flex-basis: 18%;
+      .description p {
+        font-size: 12px;
+      }
+    }
+    .right {
+      flex-basis: 30%;
+      .lyric {
+        font-size: 13px;
+      }
+    }
+    .comment {
+      flex-basis: 50%;
+      opacity: 1;
+    }
+  }
 }
 .left {
-  flex: 0 0 40%;
-  overflow: hidden;
-}
-.info {
+  flex: 40%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
+  padding: 13px;
+  overflow: hidden;
+  transition: flex-basis @transition-theme;
+}
+
+.info {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  max-width: 300px;
+
 }
 .img {
-  width: 300px;
-  height: 300px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    border: 5px solid @color-theme-hover;
-    // border-radius: @radius-border;
-    // border: 5px solid #fff;
-  }
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 100%;
+  box-shadow: 0 0 4px @color-theme-hover;
+  border-radius: 6px;
+  opacity: .8;
+  // border: 5px solid @color-theme-hover;
+  // border-radius: @radius-border;
+  // border: 5px solid #fff;
 }
 .description {
-  width: 300px;
+  max-width: 300px;
  padding: 15px 0;
  overflow: hidden;
  p {
@@ -492,6 +536,8 @@ export default {
  flex: 0 0 60%;
  // padding: 0 30px;
  position: relative;
+  transition: flex-basis @transition-theme;
+
  &:before {
    position: absolute;
    top: 0;
@@ -537,18 +583,51 @@ export default {
  color: @color-theme;
  font-size: 1.2em;
 }
+
+.comment {
+  flex: 0 0 0;
+  opacity: 0;
+  margin-left: 10px;
+}
+
 .footer {
  flex: 0 0 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
 }
-.left {
+.footerLeft {
  flex: auto;
  display: flex;
  flex-flow: column nowrap;
-  align-items: center;
-  padding-top: 13px;
+  padding: 13px;
+  overflow: hidden;
+}
+.footerLeftControlBtns {
+  color: @color-theme_2-font;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
+.footerLeftControlBtn {
+  width: 18px;
+  height: 18px;
+  opacity: .5;
+  cursor: pointer;
+  transition: opacity @transition-theme;
+
+  &:hover {
+    opacity: .9;
+  }
+
+  +.footerLeftControlBtn {
+    margin-left: 6px;
+  }
+
+  &.active {
+    color: @color-theme;
+    opacity: .8;
+  }
 }
 .progress-container {
  width: 100%;
@@ -608,6 +687,7 @@ export default {
 }
 .time-label {
  width: 100%;
+  height: 18px;
  display: flex;
  justify-content: space-between;
  span {
@@ -686,13 +766,20 @@ each(@themes, {
      }
    }
    .img {
-      img {
-        border-color: ~'@{color-@{value}-theme-hover}';
-      }
+      box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
+      // border-color: ~'@{color-@{value}-theme-hover}';
    }
    .lrc-active {
      color: ~'@{color-@{value}-theme}';
    }
+    .footerLeftControlBtns {
+      color: ~'@{color-@{value}-theme_2-font}';
+    }
+    .footerLeftControlBtn {
+      &.active {
+        color: ~'@{color-@{value}-theme}';
+      }
+    }
    .progress {
      background-color: ~'@{color-@{value}-player-progress}';
    }
--- a/src/renderer/components/core/Toolbar.vue
+++ b/src/renderer/components/core/Toolbar.vue
@@ -8,12 +8,12 @@

    div(:class="$style.logo" v-if="setting.controlBtnPosition == 'left'") L X
    div(:class="$style.control" v-else)
-      button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
+      button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
        svg(:class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
          use(xlink:href='#icon-window-minimize')

      //- button(type="button" :class="$style.max" @click="max")
-      button(type="button" :class="$style.close" :title="$t('core.toolbar.close')" @click="close")
+      button(type="button" :class="$style.close" :tips="$t('core.toolbar.close')" @click="close")
        svg(:class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
          use(xlink:href='#icon-window-close')
 </template>
--- a/src/renderer/components/material/CommentFloor.vue
+++ b/src/renderer/components/material/CommentFloor.vue
@@ -0,0 +1,162 @@
+<template lang="pug">
+  div(:class="$style.container")
+    ul
+      li(v-for="(item, index) in comments" :key="item.id" :class="$style.listItem")
+        div(:class="$style.content")
+          div(:class="$style.left")
+            img( :class="$style.avatar" :src="item.avatar || commentDefImg" @error="handleUserImg")
+          div(:class="$style.right")
+            div(:class="$style.info")
+              div.select(:class="$style.name") {{item.userName}}
+              time(:class="$style.time" v-if="item.timeStr") {{timeFormat(item.timeStr)}}
+              div(:class="$style.likes" v-if="item.likedCount != null")
+                svg(:class="$style.likesIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
+                  use(xlink:href='#icon-thumbs-up')
+                | {{item.likedCount}}
+            div.select(:class="$style.comment_text")
+              p(v-for="text in item.text") {{text}}
+        material-comment-floor(v-if="item.reply && item.reply.length" :class="$style.reply_floor" :comments="item.reply")
+</template>
+
+<script>
+import commentDefImg from '../../assets/images/defaultUser.jpg'
+
+export default {
+  props: {
+    comments: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+  data() {
+    return {
+      commentDefImg,
+    }
+  },
+  methods: {
+    timeFormat(time) {
+      return time
+      // return formatTime(new Date(time), true)
+    },
+    handleUserImg(event) {
+      event.target.src = this.commentDefImg
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+@padding: 15px;
+
+.container {
+
+}
+
+.listItem {
+  border-bottom: 1px dashed @color-theme_2-line;
+}
+
+.content {
+  padding: 12px 0;
+  font-size: 13px;
+  color: @color-theme_2-font;
+  display: flex;
+}
+.left {
+  flex: none;
+}
+.avatar {
+  width: 40px;
+  border-radius: 4px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .15);
+}
+.right {
+  flex: auto;
+  min-width: 0;
+  margin-left: 10px;
+}
+
+.info {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  min-width: 0;
+  line-height: 1.3;
+  color: @color-theme_2-font-label;
+}
+.name {
+  flex: 0 1 auto;
+  min-width: 0;
+  .mixin-ellipsis-1;
+}
+.time {
+  flex: none;
+  font-size: 11px;
+  margin-left: 5px;
+}
+.likes {
+  flex: 1 0 auto;
+  margin-left: 10px;
+  font-size: 11px;
+  align-self: flex-end;
+  text-align: right;
+}
+.likesIcon {
+  width: 12px;
+  height: 12px;
+  margin-right: 3px;
+  color: @color-theme-active;
+}
+.comment_text {
+  text-align: justify;
+  font-size: 14px;
+  padding-top: 5px;
+  p {
+    line-height: 1.5;
+    word-break: break-all;
+  }
+}
+
+.reply_floor {
+  padding: 0 0 0 @padding;
+  margin-left: @padding * 2;
+  border-radius: .5rem;
+  &:last-child {
+    margin-bottom: 12px;
+  }
+  .listItem:last-child {
+    border-bottom: none;
+  }
+  .right {
+    margin-right: 10px;
+  }
+
+  background-color: @color-reply-floor;
+}
+
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .listItem {
+      border-bottom-color: ~'@{color-@{value}-theme_2-active}';
+    }
+    .content {
+      color: ~'@{color-@{value}-theme_2-font}';
+    }
+    .info {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
+    .likesIcon {
+      color: ~'@{color-@{value}-theme-active}';
+    }
+    .reply_floor {
+      background-color: ~'@{color-@{value}-reply-floor}';
+    }
+  }
+})
+
+</style>
--- a/src/renderer/components/material/DownloadModal.vue
+++ b/src/renderer/components/material/DownloadModal.vue
@@ -5,7 +5,7 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
      | {{ info.name }}
      br
      | {{ info.singer }}
-    material-btn(:class="$style.btn" v-if="checkSource(type.type)" :title="!checkSource(type.type) && $t('material.download_modal.btn_tip')" :disabled="!checkSource(type.type)" :key="type.type" @click="handleClick(type.type)" v-for="type in info.types") {{getTypeName(type.type)}} {{ type.type.toUpperCase() }}{{ type.size && ` - ${type.size.toUpperCase()}` }}
+    material-btn(:class="$style.btn" v-if="checkSource(type.type)" :tips="!checkSource(type.type) && $t('material.download_modal.btn_tip')" :disabled="!checkSource(type.type)" :key="type.type" @click="handleClick(type.type)" v-for="type in info.types") {{getTypeName(type.type)}} {{ type.type.toUpperCase() }}{{ type.size && ` - ${type.size.toUpperCase()}` }}

 </template>

--- a/src/renderer/components/material/Input.vue
+++ b/src/renderer/components/material/Input.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-  input(:class="$style.input" :type="type" :placeholder="placeholder" v-model.trim="text" :disabled="disabled"
-    @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="$emit('input', text)" @change="$emit('change', text)"
-    @keyup.enter="$emit('submit', text)")
+  input(:class="$style.input" :type="type" :placeholder="placeholder" :value="value" :disabled="disabled"
+    @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="$emit('input', $event.target.value.trim())" @change="$emit('change', $event.target.value.trim())"
+    @keyup.enter="$emit('submit', $event.target.value.trim())")
 </template>

 <script>
@@ -24,21 +24,6 @@ export default {
      default: 'text',
    },
  },
-  data() {
-    return {
-      text: '',
-    }
-  },
-  watch: {
-    value(n) {
-      this.text = n
-    },
-  },
-  methods: {
-    handleInput() {
-
-    },
-  },
 }
 </script>

--- a/src/renderer/components/material/ListButtons.vue
+++ b/src/renderer/components/material/ListButtons.vue
@@ -1,30 +1,30 @@
 <template lang="pug">
 div(:class="$style.btns")
-  button(type="button" v-if="playBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.play')" @click.stop="handleClick('play')")
+  button(type="button" v-if="playBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.play')" @click.stop="handleClick('play')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve' v-once)
      use(xlink:href='#icon-testPlay')
-  button(type="button" v-if="listAddBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')")
+  button(type="button" v-if="listAddBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve' v-once)
      use(xlink:href='#icon-addTo')
-  button(type="button" v-if="downloadBtn && setting.download.enable" @contextmenu.capture.stop :title="$t('material.list_buttons.download')" @click.stop="handleClick('download')")
+  button(type="button" v-if="downloadBtn && setting.download.enable" @contextmenu.capture.stop :tips="$t('material.list_buttons.download')" @click.stop="handleClick('download')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve' v-once)
      use(xlink:href='#icon-download')
-  //- button(type="button" :title="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')")
+  //- button(type="button" :tips="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
      use(xlink:href='#icon-addTo')
-  button(type="button" v-if="startBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.start')" @click.stop="handleClick('start')")
+  button(type="button" v-if="startBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.start')" @click.stop="handleClick('start')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve' v-once)
      use(xlink:href='#icon-play')
-  button(type="button" v-if="pauseBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')")
+  button(type="button" v-if="pauseBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve' v-once)
      use(xlink:href='#icon-pause')
-  button(type="button" v-if="fileBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.file')" @click.stop="handleClick('file')")
+  button(type="button" v-if="fileBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.file')" @click.stop="handleClick('file')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='-61 0 512 512' space='preserve' v-once)
      use(xlink:href='#icon-musicFile')
-  button(type="button" v-if="searchBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.search')" @click.stop="handleClick('search')")
+  button(type="button" v-if="searchBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.search')" @click.stop="handleClick('search')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve' v-once)
      use(xlink:href='#icon-search')
-  button(type="button" v-if="removeBtn" :title="$t('material.list_buttons.remove')" @click.stop="handleClick('remove')")
+  button(type="button" v-if="removeBtn" :tips="$t('material.list_buttons.remove')" @click.stop="handleClick('remove')")
    svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve' v-once)
      use(xlink:href='#icon-delete')

--- a/src/renderer/components/material/MusicComment.vue
+++ b/src/renderer/components/material/MusicComment.vue
@@ -0,0 +1,270 @@
+<template lang="pug">
+div(:class="$style.comment")
+  div(:class="$style.commentHeader")
+    h3 {{$t('core.player.comment_title', { name: title })}}
+    div(:class="$style.commentHeaderBtns")
+      div(:class="$style.commentHeaderBtn" @click="handleShowComment" :tips="$t('core.player.comment_refresh')")
+        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style='transform: rotate(45deg);' viewBox='0 0 24 24' space='preserve')
+          use(xlink:href='#icon-refresh')
+      div(:class="$style.commentHeaderBtn" @click="$emit('input', false)")
+        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
+          use(xlink:href='#icon-close')
+
+  div.scroll(:class="$style.commentMain" ref="dom_comment")
+    div(v-if="page == 1")
+      h2(:class="$style.commentType") {{$t('core.player.comment_hot_title')}}
+      p(:class="$style.commentLabel" style="cursor: pointer;" v-if="isHotLoadError" @click="handleGetHotComment(currentMusicInfo)") {{$t('core.player.comment_hot_load_error')}}
+      p(:class="$style.commentLabel" v-else-if="isHotLoading && !hotComments.length") {{$t('core.player.comment_hot_loading')}}
+      material-comment-floor(v-if="!isHotLoadError && hotComments.length" :class="[$style.commentFloor, isHotLoading ? $style.loading : null]" :comments="hotComments")
+      p(:class="$style.commentLabel" v-else-if="!isHotLoadError && !isHotLoading") {{$t('core.player.comment_no_content')}}
+    div
+      h2(:class="$style.commentType") {{$t('core.player.comment_new_title')}} ({{total}})
+      p(:class="$style.commentLabel" style="cursor: pointer;" v-if="isNewLoadError" @click="handleGetNewComment(currentMusicInfo, nextPage, limit)") {{$t('core.player.comment_new_load_error')}}
+      p(:class="$style.commentLabel" v-else-if="isNewLoading && !newComments.length") {{$t('core.player.comment_new_loading')}}
+      material-comment-floor(v-if="!isNewLoadError && newComments.length" :class="[$style.commentFloor, isNewLoading ? $style.loading : null]" :comments="newComments")
+      p(:class="$style.commentLabel" v-else-if="!isNewLoadError && !isNewLoading") {{$t('core.player.comment_no_content')}}
+    div(:class="$style.pagination")
+      material-pagination(:count="total" :btnLength="5" :limit="limit" :page="page" @btn-click="handleToggleCommentPage")
+</template>
+
+<script>
+import { scrollTo } from '../../utils'
+import music from '../../utils/music'
+
+export default {
+  props: {
+    value: Boolean,
+    titleFormat: {
+      type: String,
+      default: '歌名 - 歌手',
+    },
+    musicInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentMusicInfo: {
+        name: '',
+        singer: '',
+      },
+      page: 1,
+      total: 10,
+      maxPage: 1,
+      limit: 20,
+      isHotLoading: true,
+      isNewLoading: false,
+      isHotLoadError: true,
+      isNewLoadError: false,
+      nextPage: 1,
+      newComments: [
+        // {
+        //   text: ['123123hhh'],
+        //   userName: 'dsads',
+        //   avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+        //   time: '2020-10-22 22:14:17',
+        //   timeStr: '2020-10-22 22:14:17',
+        //   likedCount: 100,
+        //   reply: [],
+        // },
+      ],
+      hotComments: [
+        // {
+        //   text: ['123123hhh'],
+        //   userName: 'dsads',
+        //   avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+        //   time: '2020-10-22 22:14:17',
+        //   timeStr: '2020-10-22 22:14:17',
+        //   likedCount: 100,
+        //   reply: [
+        //     {
+        //       text: ['123123hhh'],
+        //       userName: 'dsads',
+        //       avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg',
+        //       time: '2020-10-22 22:14:17',
+        //       timeStr: '2020-10-22 22:14:17',
+        //       likedCount: 100,
+        //     },
+        //   ],
+        // },
+      ],
+    }
+  },
+  computed: {
+    title() {
+      return this.currentMusicInfo.name
+        ? this.titleFormat.replace('歌名', this.currentMusicInfo.name).replace('歌手', this.currentMusicInfo.singer)
+        : '^-^'
+    },
+  },
+  watch: {
+    value(n) {
+      if (n) this.handleShowComment()
+    },
+  },
+  methods: {
+    async getComment(musicInfo, page, limit, retryNum = 0) {
+      let resp
+      try {
+        resp = await music[musicInfo.source].comment.getComment(musicInfo, page, limit)
+      } catch (error) {
+        if (error.message == '取消请求' || ++retryNum > 2) throw error
+        resp = await this.getComment(musicInfo, page, limit, retryNum)
+      }
+      return resp
+    },
+    async getHotComment(musicInfo, retryNum = 0) {
+      let resp
+      try {
+        resp = await music[musicInfo.source].comment.getHotComment(musicInfo)
+      } catch (error) {
+        if (error.message == '取消请求' || ++retryNum > 2) throw error
+        resp = await this.getHotComment(musicInfo, retryNum)
+      }
+      return resp
+    },
+    handleGetNewComment(musicInfo, page, limit) {
+      this.isNewLoadError = false
+      this.isNewLoading = true
+      this.getComment(musicInfo, page, limit).then(comment => {
+        this.isNewLoading = false
+        this.total = comment.total
+        this.maxPage = comment.maxPage
+        this.page = page
+        this.newComments = comment.comments
+        this.$nextTick(() => {
+          scrollTo(this.$refs.dom_comment, 0, 300)
+        })
+      }).catch(err => {
+        console.log(err)
+        if (err.message == '取消请求') return
+        this.isNewLoadError = true
+        this.isNewLoading = false
+      })
+    },
+    handleGetHotComment(musicInfo) {
+      this.isHotLoadError = false
+      this.isHotLoading = true
+      this.getHotComment(musicInfo).then(hotComment => {
+        this.isHotLoading = false
+        this.hotComments = hotComment.comments
+      }).catch(err => {
+        console.log(err)
+        if (err.message == '取消请求') return
+        this.isHotLoadError = true
+        this.isHotLoading = false
+      })
+    },
+    handleShowComment() {
+      if (!this.musicInfo.songmid || !music[this.musicInfo.source].comment) return
+      // if (this.musicInfo.songmid != this.currentMusicInfo.songmid) {
+      this.page = 1
+      this.total = 0
+      this.maxPage = 1
+      this.nextPage = 1
+      // }
+      this.isShowComment = true
+      this.currentMusicInfo = this.musicInfo
+
+      if (this.page == 1) this.handleGetHotComment(this.currentMusicInfo)
+      this.handleGetNewComment(this.currentMusicInfo, this.page, this.limit)
+    },
+    handleToggleCommentPage(page) {
+      this.nextPage = page
+      this.handleGetNewComment(this.currentMusicInfo, page, this.limit)
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.comment {
+  display: flex;
+  flex-flow: column nowrap;
+  transition: @transition-theme;
+  transition-property: flex-basis opacity;
+  overflow: hidden;
+}
+.commentHeader {
+  flex: none;
+  padding-bottom: 5px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  // border-bottom: 1px solid #eee;
+  h3 {
+    font-size: 14px;
+    .mixin-ellipsis-1;
+    line-height: 1.2;
+  }
+}
+.commentHeaderBtns {
+  flex: 1 0 auto;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  color: @color-theme;
+}
+.commentHeaderBtn {
+  height: 22px;
+  width: 22px;
+  cursor: pointer;
+  transition: opacity @transition-theme;
+
+  +.commentHeaderBtn {
+    margin-left: 5px;
+  }
+
+  &:hover {
+    opacity: .7;
+  }
+}
+.commentMain {
+  flex: auto;
+  padding-left: 15px;
+  padding-right: 10px;
+  background-color: @color-reply-floor;
+  border-radius: 4px;
+}
+.commentLabel {
+  padding: 15px;
+  color: @color-theme_2-font-label;
+  font-size: 14px;
+}
+.commentType {
+  padding: 10px 0;
+  font-size: 13px;
+  color: @color-theme;
+}
+.commentFloor {
+  opacity: 1;
+  transition: opacity @transition-theme;
+
+  &.loading {
+    opacity: .4;
+  }
+}
+.pagination {
+  padding: 10px 0;
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .commentHeaderBtns {
+      color: ~'@{color-@{value}-theme}';
+    }
+    .commentMain {
+      background-color: ~'@{color-@{value}-reply-floor}';
+    }
+    .commentLabel {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
+    .commentType {
+      color: ~'@{color-@{value}-theme}';
+    }
+  }
+})
+</style>
--- a/src/renderer/components/material/Pagination.vue
+++ b/src/renderer/components/material/Pagination.vue
@@ -6,20 +6,20 @@ div(:class="$style.pagination" v-if="allPage > 1")
        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
          use(xlink:href='#icon-left')
    li(v-else)
-      button(type="button" @click="handleClick(page - 1)" :title="$t('material.pagination.prev')")
+      button(type="button" @click="handleClick(page - 1)" :tips="$t('material.pagination.prev')")
        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
          use(xlink:href='#icon-left')
    li(v-if="allPage > btnLength && page > pageEvg+1" :class="$style.first")
-      button(type="button" @click="handleClick(1)" :title="$t('material.pagination.page', { num: 1 })")
+      button(type="button" @click="handleClick(1)" :tips="$t('material.pagination.page', { num: 1 })")
        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
          use(xlink:href='#icon-first')

    li(v-for="(p, index) in pages" :key="index" :class="{[$style.active] : p == page}")
      span(v-if="p === page" v-text="page")
-      button(v-else type="button" @click="handleClick(p)" v-text="p" :title="$t('material.pagination.page', { num: p })")
+      button(v-else type="button" @click="handleClick(p)" v-text="p" :tips="$t('material.pagination.page', { num: p })")

    li(v-if="allPage > btnLength && allPage - page > pageEvg" :class="$style.last")
-      button(type="button" @click="handleClick(allPage)" :title="$t('material.pagination.page', { num: allPage })")
+      button(type="button" @click="handleClick(allPage)" :tips="$t('material.pagination.page', { num: allPage })")
        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
          use(xlink:href='#icon-last')

@@ -29,7 +29,7 @@ div(:class="$style.pagination" v-if="allPage > 1")
        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
          use(xlink:href='#icon-right')
    li(v-else)
-      button(type="button" @click="handleClick(page + 1)" :title="$t('material.pagination.next')")
+      button(type="button" @click="handleClick(page + 1)" :tips="$t('material.pagination.next')")
        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
          use(xlink:href='#icon-right')

--- a/src/renderer/components/material/SearchInput.vue
+++ b/src/renderer/components/material/SearchInput.vue
@@ -94,6 +94,7 @@ export default {
      this.$refs.dom_input.focus()
    },
    handleTemplistClick(index) {
+      console.log(index)
      this.sendEvent('listClick', index)
    },
    handleFocus() {
@@ -101,8 +102,10 @@ export default {
      this.sendEvent('focus')
    },
    handleBlur() {
-      this.focus = false
-      this.sendEvent('blur')
+      setTimeout(() => {
+        this.focus = false
+        this.sendEvent('blur')
+      }, 80)
    },
    handleSearch() {
      this.hideList()
--- a/src/renderer/components/material/Selection.vue
+++ b/src/renderer/components/material/Selection.vue
@@ -6,7 +6,7 @@
        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")
-      li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
+      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>

 <script>
--- a/src/renderer/components/material/VersionModal.vue
+++ b/src/renderer/components/material/VersionModal.vue
@@ -44,11 +44,11 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
        p 发现有新版本啦，但是自动更新功能出问题了，
        p
          | 你可以去&nbsp;
-          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
          | &nbsp;或&nbsp;
-          strong.hover.underline(@click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" title="点击打开") 网盘
+          strong.hover.underline(@click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" tips="点击打开") 网盘
          | (密码：
-          strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+          strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
          | )&nbsp;下载新版本，
        p
          | 国内Windows/MAC用户推荐到
@@ -61,11 +61,11 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
      p 你当前所在网络访问GitHub较慢，导致新版本下载超时（已经下了半个钟了😳），建议手动更新版本！
      p
        | 你可以去
-        material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+        material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
        | 或
-        material-btn(min @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" title="点击打开") 网盘
+        material-btn(min @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" tips="点击打开") 网盘
        | (密码：
-        strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+        strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
        | )下载新版本，
      p
        | 国内Windows/MAC用户推荐到
@@ -82,11 +82,11 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
          p 更新信息获取失败，可能是无法访问Github导致的，请手动检查更新！
          p
            | 检查方法：打开
-            material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+            material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
            | 或
-            material-btn(min @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" title="点击打开") 网盘
+            material-btn(min @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" tips="点击打开") 网盘
            | (密码：
-            strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+            strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
            | )查看它们的
            strong 版本号
            | 与当前版本({{version.version}})对比是否一样，
@@ -115,11 +115,11 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
          | 重新打开本弹窗。
        p
          | 手动更新可以去&nbsp;
-          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
          | &nbsp;或&nbsp;
-          strong.hover.underline(@click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" title="点击打开") 网盘
+          strong.hover.underline(@click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" tips="点击打开") 网盘
          | (密码：
-          strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+          strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
          | )&nbsp;下载，
        p 国内Windows/MAC用户推荐到网盘下载。
        p 当前下载进度：{{progress}}
--- a/src/renderer/components/material/listAddModal.vue
+++ b/src/renderer/components/material/listAddModal.vue
@@ -6,8 +6,8 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
      span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
      | &nbsp;{{$t('material.list_add_modal.title_last')}}
    div.scroll(:class="$style.btnContent")
-      material-btn(:class="$style.btn" :title="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
-      material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')")
+      material-btn(:class="$style.btn" :tips="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
+      material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('view.list.lists_new_list_btn')")
        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
          use(xlink:href='#icon-addTo')
        input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")
--- a/src/renderer/components/material/listAddMultipleModal.vue
+++ b/src/renderer/components/material/listAddMultipleModal.vue
@@ -3,8 +3,8 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
  main(:class="$style.main")
    h2 {{$t('material.list_add_multiple_modal.' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}
    div.scroll(:class="$style.btnContent")
-      material-btn(:class="$style.btn" :title="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
-      material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')")
+      material-btn(:class="$style.btn" :tips="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
+      material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('view.list.lists_new_list_btn')")
        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
          use(xlink:href='#icon-addTo')
        input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")
--- a/src/renderer/lang/en-us/base.json
+++ b/src/renderer/lang/en-us/base.json
@@ -0,0 +1,5 @@
+{
+  "date_format_second": "{num} seconds ago",
+  "date_format_minute": "{num} minutes ago",
+  "date_format_hour": "{num} hours ago"
+}
--- a/src/renderer/lang/en-us/core/player.json
+++ b/src/renderer/lang/en-us/core/player.json
@@ -21,9 +21,22 @@
  "add_music_to": "Add the current song to...",
  "desktop_lyric_on": "Open Desktop Lyrics",
  "desktop_lyric_off": "Close Desktop Lyrics",
+  "desktop_lyric_lock": "Right click to lock lyrics",
+  "desktop_lyric_unlock": "Right click to unlock lyrics",
  "play_toggle_mode_list_loop": "List Loop",
  "play_toggle_mode_random": "List Random",
  "play_toggle_mode_list": "Play in order",
  "play_toggle_mode_single_loop": "Single Loop",
-  "play_toggle_mode_off": "Disable"
+  "play_toggle_mode_off": "Disable",
+
+  "comment_show": "Show song comments",
+  "comment_hot_loading": "Hot comments are loading",
+  "comment_new_loading": "Latest comments are loading",
+  "comment_hot_load_error": "Hot comments failed to load, click to try to reload",
+  "comment_new_load_error": "The latest comment failed to load, click to try to reload",
+  "comment_refresh": "Refresh comments",
+  "comment_no_content": "No comments yet",
+  "comment_hot_title": "Hot Comment",
+  "comment_new_title": "Latest comment",
+  "comment_title": "{name} comment"
 }
--- a/src/renderer/lang/en-us/view/setting.json
+++ b/src/renderer/lang/en-us/view/setting.json
@@ -106,7 +106,7 @@
  "hot_key_desktop_lyric_toggle_always_top": "Top Desktop Lyrics Switch",

  "network": "Network",
-  "network_proxy_title": "Proxy (False setting would block Internet connections)",
+  "network_proxy_title": "HTTP Proxy (False setting would block Internet connections)",
  "network_proxy_host": "Host",
  "network_proxy_port": "Port",
  "network_proxy_username": "Username",
@@ -117,12 +117,12 @@
  "odc_clear_search_list": "Clear the search list when you are not searching",

  "backup": "Backup and restore",
-  "backup_part": "Partially",
+  "backup_part": "Partial data (list data includes audition list, favorite list, user-defined list, setting data does not include shortcut key settings)",
  "backup_part_import_list": "Import lists",
  "backup_part_export_list": "Export lists",
  "backup_part_import_setting": "Import settings",
  "backup_part_export_setting": "Export settings",
-  "backup_all": "All (Settings and Recently Played)",
+  "backup_all": "All data (list data and setting data)",
  "backup_all_import": "Import",
  "backup_all_export": "Export",
  "backup_all_import_desc": "Select a backup file",
--- a/src/renderer/lang/zh-cn/base.json
+++ b/src/renderer/lang/zh-cn/base.json
@@ -0,0 +1,5 @@
+{
+  "date_format_second": "{num}秒前",
+  "date_format_minute": "{num}分钟前",
+  "date_format_hour": "{num}小时前"
+}
--- a/src/renderer/lang/zh-cn/core/player.json
+++ b/src/renderer/lang/zh-cn/core/player.json
@@ -21,9 +21,22 @@
  "add_music_to": "添加当前歌曲到...",
  "desktop_lyric_on": "开启桌面歌词",
  "desktop_lyric_off": "关闭桌面歌词",
+  "desktop_lyric_lock": "右击锁定歌词",
+  "desktop_lyric_unlock": "右击解锁歌词",
  "play_toggle_mode_list_loop": "列表循环",
  "play_toggle_mode_random": "列表随机",
  "play_toggle_mode_list": "顺序播放",
  "play_toggle_mode_single_loop": "单曲循环",
-  "play_toggle_mode_off": "禁用"
+  "play_toggle_mode_off": "禁用",
+
+  "comment_show": "显示歌曲评论",
+  "comment_hot_loading": "热门评论加载中",
+  "comment_new_loading": "最新评论加载中",
+  "comment_hot_load_error": "热门评论加载失败，点击尝试重新加载",
+  "comment_new_load_error": "最新评论加载失败，点击尝试重新加载",
+  "comment_refresh": "刷新评论",
+  "comment_no_content": "暂无评论",
+  "comment_hot_title": "热门评论",
+  "comment_new_title": "最新评论",
+  "comment_title": "{name} 的评论"
 }
--- a/src/renderer/lang/zh-cn/view/setting.json
+++ b/src/renderer/lang/zh-cn/view/setting.json
@@ -106,7 +106,7 @@
  "hot_key_desktop_lyric_toggle_always_top": "桌面歌词置顶切换",

  "network": "网络设置",
-  "network_proxy_title": "代理设置（乱设置软件将无法联网）",
+  "network_proxy_title": "HTTP代理设置（乱设置软件将无法联网）",
  "network_proxy_host": "主机",
  "network_proxy_port": "端口",
  "network_proxy_username": "用户名",
@@ -117,12 +117,12 @@
  "odc_clear_search_list": "离开搜索界面时清空搜索列表",

  "backup": "备份与恢复",
-  "backup_part": "部分数据",
+  "backup_part": "部分数据（列表数据包括试听列表、收藏列表、用户自定义列表，设置数据不包括快捷键设置）",
  "backup_part_import_list": "导入列表",
  "backup_part_export_list": "导出列表",
  "backup_part_import_setting": "导入设置",
  "backup_part_export_setting": "导出设置",
-  "backup_all": "所有数据（设置与试听列表）",
+  "backup_all": "所有数据（列表数据与设置数据）",
  "backup_all_import": "导入",
  "backup_all_export": "导出",
  "backup_all_import_desc": "选择备份文件",
--- a/src/renderer/lang/zh-tw/base.json
+++ b/src/renderer/lang/zh-tw/base.json
@@ -0,0 +1,5 @@
+{
+  "date_format_second": "{num}秒前",
+  "date_format_minute": "{num}分鐘前",
+  "date_format_hour": "{num}小時前"
+}
--- a/src/renderer/lang/zh-tw/core/player.json
+++ b/src/renderer/lang/zh-tw/core/player.json
@@ -21,9 +21,22 @@
  "add_music_to": "添加當前歌曲到...",
  "desktop_lyric_on": "開啟桌面歌詞",
  "desktop_lyric_off": "關閉桌面歌詞",
+  "desktop_lyric_lock": "右擊鎖定歌詞",
+  "desktop_lyric_unlock": "右擊解鎖歌詞",
  "play_toggle_mode_list_loop": "列表循環",
  "play_toggle_mode_random": "列表隨機",
  "play_toggle_mode_list": "順序播放",
  "play_toggle_mode_single_loop": "單曲循環",
-  "play_toggle_mode_off": "禁用"
+  "play_toggle_mode_off": "禁用",
+
+  "comment_show": "顯示歌曲評論",
+  "comment_hot_loading": "熱門評論加載中",
+  "comment_new_loading": "最新評論加載中",
+  "comment_hot_load_error": "熱門評論加載失敗，點擊嘗試重新加載",
+  "comment_new_load_error": "最新評論加載失敗，點擊嘗試重新加載",
+  "comment_refresh": "刷新評論",
+  "comment_no_content": "暫無評論",
+  "comment_hot_title": "熱門評論",
+  "comment_new_title": "最新評論",
+  "comment_title": "{name} 的評論"
 }
--- a/src/renderer/lang/zh-tw/view/setting.json
+++ b/src/renderer/lang/zh-tw/view/setting.json
@@ -99,7 +99,7 @@
  "hot_key_desktop_lyric_toggle_lock": "桌面歌詞鎖定切換",
  "hot_key_desktop_lyric_toggle_always_top": "桌面歌詞置頂切換",
  "network": "網絡設置",
-  "network_proxy_title": "代理設置（亂設置軟件將無法聯網）",
+  "network_proxy_title": "HTTP代理設置（亂設置軟件將無法聯網）",
  "network_proxy_host": "主機",
  "network_proxy_port": "端口",
  "network_proxy_username": "用戶名",
@@ -108,12 +108,12 @@
  "odc_clear_search_input": "離開搜索界面時清空搜索框",
  "odc_clear_search_list": "離開搜索界面時清空搜索列表",
  "backup": "備份與恢復",
-  "backup_part": "部分數據",
+  "backup_part": "部分數據（列表數據包括試聽列表、收藏列表、用戶自定義列表，設置數據不包括快捷鍵設置）",
  "backup_part_import_list": "導入列表",
  "backup_part_export_list": "導出列表",
  "backup_part_import_setting": "導入設置",
  "backup_part_export_setting": "導出設置",
-  "backup_all": "所有數據（設置與試聽列表）",
+  "backup_all": "所有數據（列表數據與設置數據）",
  "backup_all_import": "導入",
  "backup_all_export": "導出",
  "backup_all_import_desc": "選擇備份文件",
--- a/src/renderer/plugins/Tips/Tips.js
+++ b/src/renderer/plugins/Tips/Tips.js
@@ -0,0 +1,30 @@
+import Tips from './Tips.vue'
+import Vue from 'vue'
+
+const TipsConstructor = Vue.extend(Tips)
+export default ({ position, message } = {}) => {
+  if (!position) return
+  let instance = new TipsConstructor().$mount(document.createElement('div'))
+
+  // Tips实例挂载到刚创建的div
+  // 属性设置
+  instance.visible = true
+  instance.message = message
+  instance.position.top = position.top
+  instance.position.left = position.left
+
+  // 将Tips的DOM挂载到body上
+  document.body.appendChild(instance.$el)
+
+  instance.cancel = () => {
+    instance.visible = false
+    instance = null
+  }
+
+  instance.setTips = tips => {
+    instance.message = tips
+  }
+
+  return instance
+}
+
--- a/src/renderer/plugins/Tips/Tips.vue
+++ b/src/renderer/plugins/Tips/Tips.vue
@@ -0,0 +1,93 @@
+<template>
+  <transition name="tips-fade" @after-leave="afterLeave">
+    <div v-show="visible" :style="{ left: position.left + 'px' , top: position.top + 'px', transform: transform }" ref="dom_tips" :class="$style.tips">{{message}}</div>
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      message: '',
+      position: {
+        top: 0,
+        left: 0,
+      },
+      transform: 'translate(0, 0)',
+      cancel: null,
+      setTips: null,
+    }
+  },
+  watch: {
+    message() {
+      this.$nextTick(() => {
+        this.transform = `translate(${this.handleGetOffsetXY(this.position.left, this.position.top)})`
+      })
+    },
+  },
+  methods: {
+    afterLeave(el, done) {
+      el.parentNode.removeChild(el)
+    },
+    handleGetOffsetXY(left, top) {
+      const tipsWidth = this.$refs.dom_tips.clientWidth
+      const tipsHeight = this.$refs.dom_tips.clientHeight
+      const dom_container = document.body
+      const containerWidth = dom_container.clientWidth
+      const containerHeight = dom_container.clientHeight
+      const offsetWidth = containerWidth - left - tipsWidth
+      const offsetHeight = containerHeight - top - tipsHeight
+      let x = 0
+      let y = 0
+      if (tipsWidth < left && containerWidth > tipsWidth && offsetWidth < 5) {
+        x = -tipsWidth - 12
+      }
+      if (tipsHeight < top && containerHeight > tipsHeight && offsetHeight < 5) {
+        y = -tipsHeight - 8
+      }
+      return `${x}px, ${y}px`
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.tips {
+  position: fixed;
+  // transform: scale(1);
+  line-height: 1.2;
+  word-wrap: break-word;
+  padding: 4px 5px;
+  z-index: 999;
+  font-size: 12px;
+  max-width: 80%;
+  color: @color-theme_2-font;
+  border-radius: 3px;
+  background: @color-green-theme_2-background_1;
+  overflow: hidden;
+  pointer-events: none;
+  // text-align: justify;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+}
+
+:global(.tips-fade-enter-active), :global(.tips-fade-leave-active) {
+  transition: opacity .2s;
+}
+:global(.tips-fade-enter), :global(.tips-fade-leave-to) {
+  opacity: 0;
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    ~.tips {
+      color: ~'@{color-@{value}-theme_2-font}';
+      background: ~'@{color-@{value}-theme_2-background_1}';
+    }
+  }
+})
+
+
+</style>
--- a/src/renderer/plugins/Tips/index.js
+++ b/src/renderer/plugins/Tips/index.js
@@ -0,0 +1,55 @@
+import tips from './Tips'
+import { debounce } from '../../utils'
+
+let instance
+let prevTips
+
+const getTips = el => el.getAttribute('tips')
+  ? el.getAttribute('tips')
+  : el.parentNode === document.documentElement
+    ? null
+    : getTips(el.parentNode)
+
+const showTips = debounce(event => {
+  let msg = getTips(event.target)
+  if (!msg) return
+  prevTips = msg
+  instance = tips({
+    message: msg,
+    position: {
+      top: event.y + 12,
+      left: event.x + 8,
+    },
+  })
+}, 400)
+
+const hideTips = () => {
+  if (!instance) return
+  instance.cancel()
+  prevTips = null
+  instance = null
+}
+
+const setTips = tips => {
+  if (!instance) return
+  instance.setTips(tips)
+}
+
+const updateTips = event => {
+  if (!instance) return
+  setTimeout(() => {
+    let msg = getTips(event.target)
+    if (!msg || prevTips === msg) return
+    setTips(msg)
+    prevTips = msg
+  })
+}
+
+document.body.addEventListener('mousemove', event => {
+  hideTips()
+  showTips(event)
+})
+
+document.body.addEventListener('click', updateTips)
+
+document.body.addEventListener('contextmenu', updateTips)
--- a/src/renderer/plugins/index.js
+++ b/src/renderer/plugins/index.js
@@ -1 +1,2 @@
 // import './axios'
+import './Tips'
--- a/src/renderer/store/modules/download.js
+++ b/src/renderer/store/modules/download.js
@@ -158,6 +158,9 @@ const getUrl = (downloadInfo, isRefresh) => {
  return url && !isRefresh ? Promise.resolve({ url }) : music[downloadInfo.musicInfo.source].getMusicUrl(downloadInfo.musicInfo, downloadInfo.type).promise
 }

+// 修复 1.1.x版本 酷狗源歌词格式
+const fixKgLyric = lrc => /\[00:\d\d:\d\d.\d+\]/.test(lrc) ? lrc.replace(/(?:\[00:(\d\d:\d\d.\d+\]))/gm, '[$1') : lrc
+
 /**
 * 设置歌曲meta信息
 * @param {*} downloadInfo
@@ -184,7 +187,8 @@ const saveMeta = (downloadInfo, filePath, isEmbedPic, isEmbedLyric) => {
        })
      : Promise.resolve(),
  ]
-  Promise.all(tasks).then(([imgUrl, lyrics]) => {
+  Promise.all(tasks).then(([imgUrl, lyrics = {}]) => {
+    if (lyrics.lyric) lyrics.lyric = fixKgLyric(lyrics.lyric)
    setMeta(filePath, {
      title: downloadInfo.musicInfo.name,
      artist: downloadInfo.musicInfo.singer,
@@ -205,7 +209,10 @@ const downloadLyric = (downloadInfo, filePath) => {
    ? Promise.resolve({ lyric: downloadInfo.musicInfo.lrc, tlyric: downloadInfo.musicInfo.tlrc || '' })
    : music[downloadInfo.musicInfo.source].getLyric(downloadInfo.musicInfo).promise
  promise.then(lrcs => {
-    if (lrcs.lyric) saveLrc(filePath.replace(/(mp3|flac|ape|wav)$/, 'lrc'), lrcs.lyric)
+    if (lrcs.lyric) {
+      lrcs.lyric = fixKgLyric(lrcs.lyric)
+      saveLrc(filePath.replace(/(mp3|flac|ape|wav)$/, 'lrc'), lrcs.lyric)
+    }
  })
 }

--- a/src/renderer/store/modules/list.js
+++ b/src/renderer/store/modules/list.js
@@ -54,8 +54,8 @@ const actions = {
 // mitations
 const mutations = {
  initList(state, { defaultList, loveList, userList }) {
-    if (defaultList != null) state.defaultList.list = defaultList.list
-    if (loveList != null) state.loveList.list = loveList.list
+    if (defaultList != null) Object.assign(state.defaultList, { list: defaultList.list, location: defaultList.location })
+    if (loveList != null) Object.assign(state.loveList, { list: loveList.list, location: loveList.location })
    if (userList != null) state.userList = userList
    allListInit(state.defaultList, state.loveList, state.userList)
    state.isInitedList = true
--- a/src/renderer/store/mutations.js
+++ b/src/renderer/store/mutations.js
@@ -55,6 +55,9 @@ export default {
  setVisibleDesktopLyric(state, val) {
    state.setting.desktopLyric.enable = val
  },
+  setLockDesktopLyric(state, val) {
+    state.setting.desktopLyric.isLock = val
+  },
  setMediaDeviceId(state, val) {
    state.setting.player.mediaDeviceId = val
  },
--- a/src/renderer/utils/index.js
+++ b/src/renderer/utils/index.js
@@ -20,6 +20,39 @@ export const sizeFormate = size => {
  return `${(size / Math.pow(1024, Math.floor(number))).toFixed(2)} ${units[number]}`
 }

+/**
+  * 日期格式化
+  * @param {*} date 时间
+  * @param {String} format 时间格式，默认YYYY-MM-DD hh:mm:ss
+  */
+export const dateFormat = (date = new Date(), format = 'YYYY-MM-DD hh:mm:ss') => {
+  if (typeof date != 'object') date = new Date(date)
+  const munFix = (n) => n < 10 ? ('0' + n) : n
+  return format
+    .replace('YYYY', date.getFullYear())
+    .replace('MM', munFix(date.getMonth() + 1))
+    .replace('DD', munFix(date.getDate()))
+    .replace('hh', munFix(date.getHours()))
+    .replace('mm', munFix(date.getMinutes()))
+    .replace('ss', munFix(date.getSeconds()))
+}
+
+/**
+ * 时间格式化
+ */
+export const dateFormat2 = time => {
+  let differ = parseInt((Date.now() - time) / 1000)
+  if (differ < 60) {
+    return window.i18n.t('base.date_format_second', { num: differ })
+  } else if (differ < 3600) {
+    return window.i18n.t('base.date_format_minute', { num: parseInt(differ / 60) })
+  } else if (differ < 86400) {
+    return window.i18n.t('base.date_format_hour', { num: parseInt(differ / 3600) })
+  } else {
+    return dateFormat(time)
+  }
+}
+
 export const formatPlayTime = time => {
  let m = parseInt(time / 60)
  let s = parseInt(time % 60)
--- a/src/renderer/utils/music/kg/comment.js
+++ b/src/renderer/utils/music/kg/comment.js
@@ -0,0 +1,75 @@
+import { httpFetch } from '../../request'
+import { dateFormat2 } from '../../'
+
+export default {
+  _requestObj: null,
+  _requestObj2: null,
+  async getComment({ hash }, page = 1, limit = 20) {
+    if (this._requestObj) this._requestObj.cancelHttp()
+
+    const _requestObj = httpFetch(`http://comment.service.kugou.com/index.php?r=commentsv2/getCommentWithLike&code=fc4be23b4e972707f36b8a828a93ba8a&extdata=${hash}&p=${page}&pagesize=${limit}&ver=1.01&clientver=8373&appid=1001&kugouid=687373022`, {
+      headers: {
+        'User-Agent': 'Android712-AndroidPhone-8983-18-0-COMMENT-wifi',
+      },
+    })
+    const { body, statusCode } = await _requestObj.promise
+    // console.log(body)
+    if (statusCode != 200 || body.err_code !== 0) throw new Error('获取评论失败')
+    return { source: 'kg', comments: this.filterComment(body.list || []), total: body.count, page, limit, maxPage: Math.ceil(body.count / limit) || 1 }
+  },
+  async getHotComment({ hash, songmid }, page = 1, limit = 100) {
+    // console.log(songmid)
+    if (this._requestObj2) this._requestObj2.cancelHttp()
+
+    const _requestObj2 = httpFetch(`http://comment.service.kugou.com/index.php?r=commentsv2/getCommentWithLike&code=fc4be23b4e972707f36b8a828a93ba8a&extdata=${hash}&p=${page}&pagesize=${limit}&ver=1.01&clientver=8373&appid=1001&kugouid=687373022`, {
+      headers: {
+        'User-Agent': 'Android712-AndroidPhone-8983-18-0-COMMENT-wifi',
+      },
+    })
+    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 || []) }
+  },
+  async getReplyComment({ songmid }, replyId, page = 1, limit = 100) {
+    if (this._requestObj2) this._requestObj2.cancelHttp()
+
+    const _requestObj2 = httpFetch(`http://comment.service.kugou.com/index.php?r=commentsv2/getReplyWithLike&code=fc4be23b4e972707f36b8a828a93ba8a&p=${page}&pagesize=${limit}&ver=1.01&clientver=8373&kugouid=687373022&appid=1001&childrenid=${songmid}&tid=${replyId}`, {
+      headers: {
+        'User-Agent': 'Android712-AndroidPhone-8983-18-0-COMMENT-wifi',
+      },
+    })
+    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.list || []) }
+  },
+  filterComment(rawList) {
+    return rawList.map(item => {
+      let data = {
+        id: item.id,
+        text: item.content.split('\n'),
+        time: item.addtime,
+        timeStr: dateFormat2(new Date(item.addtime).getTime()),
+        userName: item.user_name,
+        avatar: item.user_pic,
+        userId: item.user_id,
+        likedCount: item.like.likenum,
+        replyNum: item.reply_num,
+        reply: [],
+      }
+
+      return item.pcontent ? {
+        id: item.id,
+        text: item.pcontent.split('\n'),
+        time: null,
+        userName: item.puser,
+        avatar: null,
+        userId: item.puser_id,
+        likedCount: null,
+        replyNum: null,
+        reply: [data],
+      } : data
+    })
+  },
+}
--- a/src/renderer/utils/music/kg/index.js
+++ b/src/renderer/utils/music/kg/index.js
@@ -5,12 +5,14 @@ import musicSearch from './musicSearch'
 import pic from './pic'
 import lyric from './lyric'
 import hotSearch from './hotSearch'
+import comment from './comment'

 const kg = {
  leaderboard,
  songList,
  musicSearch,
  hotSearch,
+  comment,
  getMusicUrl(songInfo, type) {
    return apis('kg').getMusicUrl(songInfo, type)
  },
--- a/src/renderer/utils/music/kg/lyric.js
+++ b/src/renderer/utils/music/kg/lyric.js
@@ -21,12 +21,10 @@ const parseLyric = str => {
    let time = parseInt(result[2])
    let ms = time % 1000
    time /= 1000
-    let h = parseInt(time / 3600).toString().padStart(2, '0')
-    time %= 3600
    let m = parseInt(time / 60).toString().padStart(2, '0')
    time %= 60
    let s = parseInt(time).toString().padStart(2, '0')
-    time = `${h}:${m}:${s}.${ms}`
+    time = `${m}:${s}.${ms}`
    if (tlyric) tlyric[i] = `[${time}]${tlyric[i++][0]}`
    return str.replace(result[1], time)
  })
--- a/src/renderer/utils/music/kw/comment.js
+++ b/src/renderer/utils/music/kw/comment.js
@@ -0,0 +1,61 @@
+import { httpFetch } from '../../request'
+import { dateFormat2 } from '../../'
+
+export default {
+  _requestObj: null,
+  _requestObj2: null,
+  async getComment({ songmid }, page = 1, limit = 20) {
+    if (this._requestObj) this._requestObj.cancelHttp()
+
+    const _requestObj = httpFetch(`http://comment.kuwo.cn/com.s?type=get_comment&uid=0&digest=15&sid=${songmid}&page=${page}&rows=${limit}&f=web&prod=MUSIC_8.7.7.0_BCS37&devid=28556413`, {
+      headers: {
+        'User-Agent': 'Dalvik/2.1.0 (Linux; U; Android 9;)',
+      },
+    })
+    const { body, statusCode } = await _requestObj.promise
+    if (statusCode != 200 || body.result !== 'ok') throw new Error('获取评论失败')
+    // console.log(body)
+    return { source: 'kw', comments: this.filterComment(body.rows), total: body.total, page, limit, maxPage: Math.ceil(body.total / limit) || 1 }
+  },
+  async getHotComment({ songmid }, page = 1, limit = 100) {
+    if (this._requestObj2) this._requestObj2.cancelHttp()
+
+    const _requestObj2 = httpFetch(`http://comment.kuwo.cn/com.s?type=get_rec_comment&uid=0&digest=15&sid=${songmid}&page=${page}&rows=${limit}&f=web&prod=MUSIC_8.7.7.0_BCS37&devid=28556413`, {
+      headers: {
+        'User-Agent': 'Dalvik/2.1.0 (Linux; U; Android 9;)',
+      },
+    })
+    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) }
+  },
+  filterComment(rawList) {
+    if (!rawList) return []
+    return rawList.map(item => {
+      let data = {
+        id: item.id,
+        text: item.msg.split('\n'),
+        time: item.time,
+        timeStr: dateFormat2(new Date(item.time).getTime()),
+        userName: decodeURIComponent(item.u_name),
+        avatar: item.u_pic,
+        userId: item.u_id,
+        likedCount: item.like_num,
+        reply: [],
+      }
+      return item.reply ? {
+        id: item.id,
+        rootId: item.reply.id,
+        text: item.reply.msg.split('\n'),
+        time: item.reply.time,
+        timeStr: dateFormat2(new Date(item.reply.time).getTime()),
+        userName: decodeURIComponent(item.reply.u_name),
+        avatar: item.reply.u_pic,
+        userId: item.reply.u_id,
+        likedCount: item.reply.like_num,
+        reply: [data],
+      } : data
+    })
+  },
+}
--- a/src/renderer/utils/music/kw/index.js
+++ b/src/renderer/utils/music/kw/index.js
@@ -8,6 +8,7 @@ import pic from './pic'
 import { apis } from '../api-source'
 import songList from './songList'
 import hotSearch from './hotSearch'
+import comment from './comment'

 const kw = {
  _musicInfoRequestObj: null,
@@ -36,6 +37,7 @@ const kw = {
  leaderboard,
  songList,
  hotSearch,
+  comment,
  getLyric(songInfo, isGetLyricx) {
    // let singer = songInfo.singer.indexOf('、') > -1 ? songInfo.singer.split('、')[0] : songInfo.singer
    return lyric.getLyric(songInfo.songmid, isGetLyricx)
--- a/src/renderer/utils/music/mg/album.js
+++ b/src/renderer/utils/music/mg/album.js
@@ -0,0 +1,30 @@
+import { httpFetch } from '../../request'
+
+export default {
+  getAlbum(songInfo, tryNum = 0) {
+    let requestObj = httpFetch(`http://app.c.nf.migu.cn/MIGUM2.0/v1.0/content/queryAlbumSong?albumId=${songInfo.albumId}&pageNo=1`, {
+      headers: {
+        sign: '46DB65104950B98FE451AD41047CC6C4',
+        timestamp: 1603451430776,
+        appId: 'yyapp2',
+        mode: 'android',
+        ua: 'Android_migu',
+        version: '6.9.4',
+        osVersion: 'android 7.0',
+        'User-Agent': 'okhttp/3.9.1',
+        channel: '0146832',
+      },
+    })
+    requestObj.promise = requestObj.promise.then(({ body }) => {
+      if (body.code !== '000000') {
+        if (tryNum > 5) return Promise.reject('获取专辑失败')
+        let tryRequestObj = this.getAlbum(songInfo, ++tryNum)
+        requestObj.cancelHttp = tryRequestObj.cancelHttp.bind(tryRequestObj)
+        return tryRequestObj.promise
+      }
+      console.log(body)
+      return body.songList
+    })
+    return requestObj
+  },
+}
--- a/src/renderer/utils/music/mg/comment.js
+++ b/src/renderer/utils/music/mg/comment.js
@@ -0,0 +1,95 @@
+import { httpFetch } from '../../request'
+import album from './album'
+import { dateFormat2 } from '../../'
+
+export default {
+  _requestObj: null,
+  _requestObj2: null,
+  _requestObj3: null,
+  async getSongId(musicInfo) {
+    if (this._requestObj3) this._requestObj3.cancelHttp()
+    this.requestObj3 = album.getAlbum(musicInfo)
+    const list = await this.requestObj3.promise
+    const copyrightId = musicInfo.copyrightId
+    let info = list.find(s => s.copyrightId == copyrightId)
+    const songmid = musicInfo.songmid
+    if (!info) info = list.find(s => s.songId == songmid)
+    return info ? info.songId : null
+  },
+  async getComment(musicInfo, page = 1, limit = 20) {
+    if (this._requestObj) this._requestObj.cancelHttp()
+    if (!musicInfo.songId) {
+      let id = await this.getSongId(musicInfo)
+      if (!id) throw new Error('获取评论失败')
+      musicInfo.songId = id
+    }
+
+    const _requestObj = httpFetch(`https://music.migu.cn/v3/api/comment/listComments?targetId=${musicInfo.songId}&pageSize=${limit}&pageNo=${page}`, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4195.1 Safari/537.36',
+        Referer: 'https://music.migu.cn',
+      },
+    })
+    const { body, statusCode } = await _requestObj.promise
+    console.log(body)
+    if (statusCode != 200 || body.returnCode !== '000000') throw new Error('获取评论失败')
+    return { source: 'mg', comments: this.filterComment(body.data.items), total: body.data.itemTotal, page, limit, maxPage: Math.ceil(body.data.itemTotal / limit) || 1 }
+  },
+  async getHotComment(musicInfo, page = 1, limit = 100) {
+    if (this._requestObj2) this._requestObj2.cancelHttp()
+
+    if (!musicInfo.songId) {
+      let id = await this.getSongId(musicInfo)
+      if (!id) throw new Error('获取评论失败')
+      musicInfo.songId = id
+    }
+
+    const _requestObj2 = httpFetch(`https://music.migu.cn/v3/api/comment/listTopComments?targetId=${musicInfo.songId}&pageSize=${limit}&pageNo=${page}`, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4195.1 Safari/537.36',
+        Referer: 'https://music.migu.cn',
+      },
+    })
+    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) }
+  },
+  async getReplyComment(musicInfo, replyId, page = 1, limit = 100) {
+    if (this._requestObj2) this._requestObj2.cancelHttp()
+
+    const _requestObj2 = httpFetch(`https://music.migu.cn/v3/api/comment/listCommentsById?commentId=${replyId}&pageSize=${limit}&pageNo=${page}`, {
+      headers: {
+        'User-Agent': 'Android712-AndroidPhone-8983-18-0-COMMENT-wifi',
+      },
+    })
+    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) }
+  },
+  filterComment(rawList) {
+    return rawList.map(item => ({
+      id: item.commentId,
+      text: item.body.split('\n'),
+      time: item.createTime,
+      timeStr: dateFormat2(new Date(item.createTime).getTime()),
+      userName: item.author.name,
+      avatar: item.author.avatar,
+      userId: item.author.id,
+      likedCount: item.praiseCount,
+      replyNum: item.replyTotal,
+      reply: item.replyCommentList.map(c => ({
+        id: c.commentId,
+        text: c.body.split('\n'),
+        time: c.createTime,
+        timeStr: dateFormat2(new Date(c.createTime).getTime()),
+        userName: c.author.name,
+        avatar: c.author.avatar,
+        userId: c.author.id,
+        likedCount: c.praiseCount,
+        replyNum: c.replyTotal,
+      })),
+    }))
+  },
+}
--- a/src/renderer/utils/music/mg/index.js
+++ b/src/renderer/utils/music/mg/index.js
@@ -5,12 +5,14 @@ import musicSearch from './musicSearch'
 import pic from './pic'
 import lyric from './lyric'
 import hotSearch from './hotSearch'
+import comment from './comment'

 const mg = {
  songList,
  musicSearch,
  leaderboard,
  hotSearch,
+  comment,
  getMusicUrl(songInfo, type) {
    return apis('mg').getMusicUrl(songInfo, type)
  },
--- a/src/renderer/utils/music/mg/leaderboard.js
+++ b/src/renderer/utils/music/mg/leaderboard.js
@@ -137,6 +137,7 @@ export default {
        albumName: item.album,
        albumId: item.albumId,
        songmid: item.copyrightId,
+        songId: item.songId,
        copyrightId: item.copyrightId,
        source: 'mg',
        interval: null,
@@ -195,7 +196,7 @@ export default {
  getList(bangid, page, retryNum = 0) {
    if (++retryNum > 3) return Promise.reject(new Error('try max num'))
    return this.getData(this.getUrl(bangid, page)).then(({ statusCode, body }) => {
-      // console.log(body)
+      console.log(body)
      if (statusCode !== 200 || body.code !== this.successCode) return this.getList(bangid, page, retryNum)
      const list = this.filterData(body.data.columnInfo.dataList)
      return {
--- a/src/renderer/utils/music/mg/musicSearch.js
+++ b/src/renderer/utils/music/mg/musicSearch.js
@@ -36,7 +36,7 @@ export default {
    return arr.join('、')
  },
  handleResult(rawData) {
-    // console.log(rawData)
+    console.log(rawData)
    let ids = new Set()
    const list = []
    rawData.forEach(item => {
@@ -82,6 +82,7 @@ export default {
        albumName: albumNInfo.name,
        albumId: albumNInfo.id,
        songmid: item.id,
+        songId: item.songId,
        copyrightId: item.copyrightId,
        source: 'mg',
        interval: null,
--- a/src/renderer/utils/music/mg/songList.js
+++ b/src/renderer/utils/music/mg/songList.js
@@ -24,25 +24,25 @@ export default {
    list: /<li><div class="thumb">.+?<\/li>/g,
    listInfo: /.+data-original="(.+?)".*data-id="(\d+)".*<div class="song-list-name"><a\s.*?>(.+?)<\/a>.+<i class="iconfont cf-bofangliang"><\/i>(.+?)<\/div>/,

-    // http://music.migu.cn/v3/music/playlist/161044573?page=1
+    // https://music.migu.cn/v3/music/playlist/161044573?page=1
    listDetailLink: /^.+\/playlist\/(\d+)(?:\?.*|&.*$|#.*$|$)/,
  },
  tagsUrl: 'https://app.c.nf.migu.cn/MIGUM2.0/v1.0/content/indexTagPage.do?needAll=0',
  getSongListUrl(sortId, tagId, page) {
    // if (tagId == null) {
    //   return sortId == 'recommend'
-    //     ? `http://music.migu.cn/v3/music/playlist?page=${page}&from=migu`
-    //     : `http://music.migu.cn/v3/music/playlist?sort=${sortId}&page=${page}&from=migu`
+    //     ? `https://music.migu.cn/v3/music/playlist?page=${page}&from=migu`
+    //     : `https://music.migu.cn/v3/music/playlist?sort=${sortId}&page=${page}&from=migu`
    // }
-    // return `http://music.migu.cn/v3/music/playlist?tagId=${tagId}&page=${page}&from=migu`
+    // return `https://music.migu.cn/v3/music/playlist?tagId=${tagId}&page=${page}&from=migu`
    if (tagId == null) {
-      // return `http://app.c.nf.migu.cn/MIGUM2.0/v2.0/content/getMusicData.do?count=${this.limit_list}&start=${page}&templateVersion=5&type=1`
+      // return `https://app.c.nf.migu.cn/MIGUM2.0/v2.0/content/getMusicData.do?count=${this.limit_list}&start=${page}&templateVersion=5&type=1`
      // return `https://c.musicapp.migu.cn/MIGUM2.0/v2.0/content/getMusicData.do?count=${this.limit_list}&start=${page}&templateVersion=5&type=${sortId}`
-      // http://app.c.nf.migu.cn/MIGUM2.0/v2.0/content/getMusicData.do?count=50&start=2&templateVersion=5&type=1
-      return `http://m.music.migu.cn/migu/remoting/playlist_bycolumnid_tag?playListType=2&type=1&columnId=${sortId}&startIndex=${(page - 1) * 10}`
+      // https://app.c.nf.migu.cn/MIGUM2.0/v2.0/content/getMusicData.do?count=50&start=2&templateVersion=5&type=1
+      return `https://m.music.migu.cn/migu/remoting/playlist_bycolumnid_tag?playListType=2&type=1&columnId=${sortId}&startIndex=${(page - 1) * 10}`
    }
    // return `https://app.c.nf.migu.cn/MIGUM2.0/v2.0/content/getMusicData.do?area=2&count=${this.limit_list}&start=${page}&tags=${tagId}&templateVersion=5&type=3`
-    return `http://m.music.migu.cn/migu/remoting/playlist_bycolumnid_tag?playListType=2&type=1&tagId=${tagId}&startIndex=${(page - 1) * 10}`
+    return `https://m.music.migu.cn/migu/remoting/playlist_bycolumnid_tag?playListType=2&type=1&tagId=${tagId}&startIndex=${(page - 1) * 10}`
  },
  getSongListDetailUrl(id, page) {
    return `https://app.c.nf.migu.cn/MIGUM2.0/v1.0/user/queryMusicListSongs.do?musicListId=${id}&pageNo=${page}&pageSize=${this.limit_song}`
@@ -74,7 +74,7 @@ export default {
    return this._requestObj_listDetail.promise.then(({ body }) => {
      if (body.code !== this.successCode) return this.getListDetail(id, page, ++tryNum)
      // console.log(JSON.stringify(body))
-      console.log(body)
+      // console.log(body)
      return {
        list: this.filterListDetail(body.list),
        page,
@@ -135,6 +135,7 @@ export default {
        albumId: item.albumId,
        songmid: item.copyrightId,
        copyrightId: item.copyrightId,
+        songId: item.songId,
        source: 'mg',
        interval: null,
        img: item.albumImgs && item.albumImgs.length ? item.albumImgs[0].img : null,
@@ -185,7 +186,6 @@ export default {
    // })
    return this._requestObj_list.promise.then(({ body }) => {
      if (body.retCode !== '100000' || body.retMsg.code !== this.successCode) return this.getList(sortId, tagId, page, ++tryNum)
-      // console.log(body)
      return {
        list: this.filterList(body.retMsg.playlist),
        total: parseInt(body.retMsg.countSize),
--- a/src/renderer/utils/music/tx/comment.js
+++ b/src/renderer/utils/music/tx/comment.js
@@ -0,0 +1,187 @@
+import { httpFetch } from '../../request'
+import { dateFormat2 } from '../../'
+
+const emojis = {
+  e400846: '😘',
+  e400874: '😴',
+  e400825: '😃',
+  e400847: '😙',
+  e400835: '😍',
+  e400873: '😳',
+  e400836: '😎',
+  e400867: '😭',
+  e400832: '😊',
+  e400837: '😏',
+  e400875: '😫',
+  e400831: '😉',
+  e400855: '😡',
+  e400823: '😄',
+  e400862: '😨',
+  e400844: '😖',
+  e400841: '😓',
+  e400830: '😈',
+  e400828: '😆',
+  e400833: '😋',
+  e400822: '😀',
+  e400843: '😕',
+  e400829: '😇',
+  e400824: '😂',
+  e400834: '😌',
+  e400877: '😷',
+  e400132: '🍉',
+  e400181: '🍺',
+  e401067: '☕️',
+  e400186: '🥧',
+  e400343: '🐷',
+  e400116: '🌹',
+  e400126: '🍃',
+  e400613: '💋',
+  e401236: '❤️',
+  e400622: '💔',
+  e400637: '💣',
+  e400643: '💩',
+  e400773: '🔪',
+  e400102: '🌛',
+  e401328: '🌞',
+  e400420: '👏',
+  e400914: '🙌',
+  e400408: '👍',
+  e400414: '👎',
+  e401121: '✋',
+  e400396: '👋',
+  e400384: '👉',
+  e401115: '✊',
+  e400402: '👌',
+  e400905: '🙈',
+  e400906: '🙉',
+  e400907: '🙊',
+  e400562: '👻',
+  e400932: '🙏',
+  e400644: '💪',
+  e400611: '💉',
+  e400185: '🎁',
+  e400655: '💰',
+  e400325: '🐥',
+  e400612: '💊',
+  e400198: '🎉',
+  e401685: '⚡️',
+  e400631: '💝',
+  e400768: '🔥',
+  e400432: '👑',
+}
+
+export default {
+  _requestObj: null,
+  _requestObj2: null,
+  async getComment({ songId }, page = 1, limit = 20) {
+    if (this._requestObj) this._requestObj.cancelHttp()
+
+    const _requestObj = httpFetch('http://c.y.qq.com/base/fcgi-bin/fcg_global_comment_h5.fcg', {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)',
+      },
+      form: {
+        uin: '0',
+        format: 'json',
+        cid: '205360772',
+        reqtype: '2',
+        biztype: '1',
+        topid: songId,
+        cmd: '8',
+        needmusiccrit: '1',
+        pagenum: page - 1,
+        pagesize: limit,
+      },
+    })
+    const { body, statusCode } = await _requestObj.promise
+    if (statusCode != 200 || body.code !== 0) throw new Error('获取评论失败')
+    // console.log(body, statusCode)
+    const comment = body.comment
+    return {
+      source: 'tx',
+      comments: this.filterComment(comment.commentlist),
+      total: comment.commenttotal,
+      page,
+      limit,
+      maxPage: Math.ceil(comment.commenttotal / limit) || 1,
+    }
+  },
+  async getHotComment({ songId }, page = 1, limit = 100) {
+    if (this._requestObj2) this._requestObj2.cancelHttp()
+
+    const _requestObj2 = httpFetch('http://c.y.qq.com/base/fcgi-bin/fcg_global_comment_h5.fcg', {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)',
+      },
+      form: {
+        uin: '0',
+        format: 'json',
+        cid: '205360772',
+        reqtype: '2',
+        biztype: '1',
+        topid: songId,
+        cmd: '9',
+        needmusiccrit: '1',
+        pagenum: page - 1,
+        pagesize: limit,
+      },
+    })
+    const { body, statusCode } = await _requestObj2.promise
+    if (statusCode != 200 || body.code !== 0) throw new Error('获取热门评论失败')
+    // console.log(body, statusCode)
+    const comment = body.comment
+    return {
+      source: 'tx',
+      comments: this.filterComment(comment.commentlist),
+      total: comment.commenttotal,
+    }
+  },
+  replaceEmoji(msg) {
+    let rxp = /^\[em\](e\d+)\[\/em\]$/
+    let result = msg.match(/\[em\]e\d+\[\/em\]/g)
+    if (!result) return msg
+    result = Array.from(new Set(result))
+    for (let item of result) {
+      let code = item.replace(rxp, '$1')
+      msg = msg.replace(new RegExp(item.replace('[em]', '\\[em\\]').replace('[/em]', '\\[\\/em\\]'), 'g'), emojis[code] || '')
+    }
+    return msg
+  },
+  filterComment(rawList) {
+    return rawList.map(item => {
+      let time = item.rootcommentid ? parseInt(item.rootcommentid.substring(item.rootcommentid.lastIndexOf('_') + 1) + '000') : null
+      if (item.middlecommentcontent) {
+        let firstItem = item.middlecommentcontent[0]
+        firstItem.avatarurl = item.avatarurl
+        firstItem.praisenum = item.praisenum
+        item.avatarurl = null
+        item.praisenum = null
+        item.middlecommentcontent.reverse()
+      }
+      return {
+        id: item.subcommentid,
+        rootId: item.rootcommentid,
+        text: item.rootcommentcontent ? this.replaceEmoji(item.rootcommentcontent).replace(/\\n/g, '\n').split('\n') : [],
+        time,
+        timeStr: time ? dateFormat2(time) : 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('_')
+          return {
+            id: c.subcommentid,
+            text: this.replaceEmoji(c.subcommentcontent).replace(/\\n/g, '\n').split('\n'),
+            time: parseInt(c.subcommentid.substring(index + 1) + '000'),
+            timeStr: dateFormat2(parseInt(c.subcommentid.substring(index + 1) + '000')),
+            userName: c.replynick.substring(1),
+            avatar: c.avatarurl,
+            userId: c.encrypt_replyuin,
+            likedCount: c.praisenum,
+          }
+        }) : [],
+      }
+    })
+  },
+}
--- a/src/renderer/utils/music/tx/index.js
+++ b/src/renderer/utils/music/tx/index.js
@@ -4,12 +4,14 @@ import songList from './songList'
 import musicSearch from './musicSearch'
 import { apis } from '../api-source'
 import hotSearch from './hotSearch'
+import comment from './comment'

 const tx = {
  leaderboard,
  songList,
  musicSearch,
  hotSearch,
+  comment,

  getMusicUrl(songInfo, type) {
    return apis('tx').getMusicUrl(songInfo, type)
--- a/src/renderer/utils/music/wy/comment.js
+++ b/src/renderer/utils/music/wy/comment.js
@@ -0,0 +1,138 @@
+import { httpFetch } from '../../request'
+import { weapi } from './utils/crypto'
+import { dateFormat2 } from '../../'
+
+let cursorTools = {
+  cache: {},
+  getCursor(id, page, limit) {
+    let cacheData = this.cache[id]
+    if (!cacheData) cacheData = this.cache[id] = {}
+    let orderType
+    let cursor
+    let offset
+    if (page == 1) {
+      cacheData.page = 1
+      cursor = cacheData.cursor = cacheData.prevCursor = Date.now()
+      orderType = 1
+      offset = 0
+    } else if (cacheData.page) {
+      cursor = cacheData.cursor
+      if (page > cacheData.page) {
+        orderType = 1
+        offset = (page - cacheData.page - 1) * limit
+      } else if (page < cacheData.page) {
+        orderType = 0
+        offset = (cacheData.page - page - 1) * limit
+      } else {
+        cursor = cacheData.cursor = cacheData.prevCursor
+        offset = cacheData.offset
+        orderType = cacheData.orderType
+      }
+    }
+    return {
+      orderType,
+      cursor,
+      offset,
+    }
+  },
+  setCursor(id, cursor, orderType, offset, page) {
+    let cacheData = this.cache[id]
+    if (!cacheData) cacheData = this.cache[id] = {}
+    cacheData.prevCursor = cacheData.cursor
+    cacheData.cursor = cursor
+    cacheData.orderType = orderType
+    cacheData.offset = offset
+    cacheData.page = page
+  },
+}
+
+export default {
+  _requestObj: null,
+  _requestObj2: null,
+  async getComment({ songmid }, page = 1, limit = 20) {
+    if (this._requestObj) this._requestObj.cancelHttp()
+
+    const id = 'R_SO_4_' + songmid
+
+    const cursorInfo = cursorTools.getCursor(songmid, page, limit)
+
+    const _requestObj = httpFetch('https://music.163.com/weapi/comment/resource/comments/get', {
+      method: 'post',
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36',
+        origin: 'https://music.163.com',
+        Refere: 'http://music.163.com/',
+      },
+      form: weapi({
+        cursor: cursorInfo.cursor,
+        offset: cursorInfo.offset,
+        orderType: cursorInfo.orderType,
+        pageNo: page,
+        pageSize: limit,
+        rid: id,
+        threadId: id,
+      }),
+    })
+    const { body, statusCode } = await _requestObj.promise
+    // console.log(body)
+    if (statusCode != 200 || body.code !== 200) throw new Error('获取评论失败')
+    cursorTools.setCursor(songmid, body.data.cursor, cursorInfo.orderType, cursorInfo.offset, page)
+    return { source: 'wy', comments: this.filterComment(body.data.comments), total: body.data.totalCount, page, limit, maxPage: Math.ceil(body.data.totalCount / limit) || 1 }
+  },
+  async getHotComment({ songmid }, page = 1, limit = 100) {
+    if (this._requestObj2) this._requestObj2.cancelHttp()
+
+    const id = 'R_SO_4_' + songmid
+
+    const _requestObj2 = httpFetch('https://music.163.com/weapi/comment/resource/comments/get', {
+      method: 'post',
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36',
+        origin: 'https://music.163.com',
+        Refere: 'http://music.163.com/',
+      },
+      form: weapi({
+        cursor: Date.now().toString(),
+        offset: 0,
+        orderType: 1,
+        pageNo: page,
+        pageSize: limit,
+        rid: id,
+        threadId: id,
+      }),
+    })
+    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) }
+  },
+  filterComment(rawList) {
+    return rawList.map(item => {
+      let data = {
+        id: item.commentId,
+        text: item.content ? item.content.split('\n') : '',
+        time: item.time ? item.time : '',
+        timeStr: item.time ? dateFormat2(item.time) : '',
+        userName: item.user.nickname,
+        avatar: item.user.avatarUrl,
+        userId: item.user.userId,
+        likedCount: item.likedCount,
+        reply: [],
+      }
+
+      let replyData = item.beReplied && item.beReplied[0]
+      return replyData ? {
+        id: item.commentId,
+        rootId: replyData.beRepliedCommentId,
+        text: replyData.content ? replyData.content.split('\n') : '',
+        time: item.time,
+        timeStr: null,
+        userName: replyData.user.nickname,
+        avatar: replyData.user.avatarUrl,
+        userId: replyData.user.userId,
+        likedCount: null,
+        reply: [data],
+      } : data
+    })
+  },
+}
--- a/src/renderer/utils/music/wy/index.js
+++ b/src/renderer/utils/music/wy/index.js
@@ -5,12 +5,14 @@ import getMusicInfo from './musicInfo'
 import musicSearch from './musicSearch'
 import songList from './songList'
 import hotSearch from './hotSearch'
+import comment from './comment'

 const wy = {
  leaderboard,
  musicSearch,
  songList,
  hotSearch,
+  comment,
  getMusicUrl(songInfo, type) {
    return apis('wy').getMusicUrl(songInfo, type)
  },
--- a/src/renderer/utils/music/wy/leaderboard.js
+++ b/src/renderer/utils/music/wy/leaderboard.js
@@ -16,7 +16,7 @@ const topList = [
  { id: 'wy__991319590', bangid: '991319590', name: '云音乐说唱榜' },
  { id: 'wy__180106', bangid: '180106', name: 'UK排行榜周榜' },
  { id: 'wy__60198', bangid: '60198', name: '美国Billboard周榜' },
-  { id: '21845217', bangid: '21845217', name: 'KTV嗨榜' },
+  { id: 'wy__21845217', bangid: '21845217', name: 'KTV嗨榜' },
  { id: 'wy__11641012', bangid: '11641012', name: 'iTunes榜' },
  { id: 'wy__120001', bangid: '120001', name: 'Hit FM Top榜' },
  { id: 'wy__60131', bangid: '60131', name: '日本Oricon周榜' },
--- a/src/renderer/utils/music/wy/musicSearch.js
+++ b/src/renderer/utils/music/wy/musicSearch.js
@@ -1,6 +1,7 @@
 import { httpFetch } from '../../request'
 import { weapi } from './utils/crypto'
-import { sizeFormate, formatPlayTime } from '../../index'
+// import { sizeFormate, formatPlayTime } from '../../index'
+import musicDetailApi from './musicDetail'

 let searchRequest
 export default {
@@ -10,8 +11,12 @@ export default {
  allPage: 1,
  musicSearch(str, page) {
    if (searchRequest && searchRequest.cancelHttp) searchRequest.cancelHttp()
-    searchRequest = httpFetch('http://music.163.com/weapi/cloudsearch/get/web?csrf_token=', {
+    searchRequest = httpFetch('https://music.163.com/weapi/search/get', {
      method: 'post',
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36',
+        origin: 'https://music.163.com',
+      },
      form: weapi({
        s: str,
        type: 1, // 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频
@@ -19,7 +24,24 @@ export default {
        offset: this.limit * (page - 1),
      }),
    })
-    return searchRequest.promise.then(({ body }) => body)
+    return searchRequest.promise.then(({ body }) =>
+      body && body.code === 200
+        ? musicDetailApi.getList(body.result.songs.map(s => s.id)).then(({ list }) => {
+          this.total = body.result.songCount || 0
+          this.page = page
+          this.allPage = Math.ceil(this.total / this.limit)
+          return {
+            code: 200,
+            data: {
+              list,
+              allPage: this.allPage,
+              limit: this.limit,
+              total: this.total,
+              source: 'wy',
+            },
+          }
+        })
+        : body)
  },
  getSinger(singers) {
    let arr = []
@@ -28,7 +50,7 @@ export default {
    })
    return arr.join('、')
  },
-  handleResult(rawList) {
+  /* handleResult(rawList) {
    // console.log(rawList)
    if (!rawList) return []
    return rawList.map(item => {
@@ -78,28 +100,29 @@ export default {
        typeUrl: {},
      }
    })
-  },
+  }, */
  search(str, page = 1, { limit } = {}, retryNum = 0) {
    if (++retryNum > 3) return Promise.reject(new Error('try max num'))
    if (limit != null) this.limit = limit
    return this.musicSearch(str, page).then(result => {
+      // console.log(result)
      if (!result || result.code !== 200) return this.search(str, page, { limit }, retryNum)
-      // console.log(result.result)
-      let list = this.handleResult(result.result.songs)
+      // let list = this.handleResult(result.result.songs || [])

-      if (list == null) return this.search(str, page, { limit }, retryNum)
+      // if (list == null) return this.search(str, page, { limit }, retryNum)

-      this.total = result.result.songCount
-      this.page = page
-      this.allPage = Math.ceil(this.total / this.limit)
+      // this.total = result.result.songCount || 0
+      // this.page = page
+      // this.allPage = Math.ceil(this.total / this.limit)

-      return Promise.resolve({
-        list,
-        allPage: this.allPage,
-        limit: this.limit,
-        total: this.total,
-        source: 'wy',
-      })
+      // return Promise.resolve({
+      //   list,
+      //   allPage: this.allPage,
+      //   limit: this.limit,
+      //   total: this.total,
+      //   source: 'wy',
+      // })
+      return result.data
    })
  },
 }
--- a/src/renderer/utils/music/xm/comment.js
+++ b/src/renderer/utils/music/xm/comment.js
@@ -0,0 +1,47 @@
+import { xmRequest } from './util'
+import { dateFormat2 } from '../../'
+
+export default {
+  _requestObj: null,
+  _requestObj2: null,
+  async getComment({ songmid }, page = 1, limit = 20) {
+    if (this._requestObj) this._requestObj.cancelHttp()
+
+    const _requestObj = xmRequest('/api/comment/getCommentList', { objectId: songmid, objectType: 'song', pagingVO: { page, pageSize: limit } })
+    const { body, statusCode } = await _requestObj.promise
+    // console.log(body)
+    if (statusCode != 200 || body.code !== 'SUCCESS') throw new Error('获取评论失败')
+    return { source: 'xm', comments: this.filterComment(body.result.data.commentList), total: body.result.data.pagingVO.count, page, limit, maxPage: Math.ceil(body.result.data.pagingVO.count / limit) || 1 }
+  },
+  async getHotComment({ songmid }, page = 1, limit = 100) {
+    if (this._requestObj2) this._requestObj2.cancelHttp()
+    if (!songmid) throw new Error('获取失败')
+    const _requestObj2 = xmRequest('/api/comment/getHotCommentList', { objectId: songmid, objectType: 'song', pagingVO: { page, pageSize: limit } })
+    const { body, statusCode } = await _requestObj2.promise
+    // console.log(body)
+    if (statusCode != 200 || body.code !== 'SUCCESS') throw new Error('获取热门评论失败')
+    return { source: 'xm', comments: this.filterComment(body.result.data.hotList) }
+  },
+  filterComment(rawList) {
+    return rawList.map(item => ({
+      id: item.commentId,
+      text: item.message.split('\n').filter(t => !!t),
+      time: item.gmtCreate,
+      timeStr: dateFormat2(item.gmtCreate),
+      userName: item.nickName,
+      avatar: item.avatar,
+      userId: item.userId,
+      likedCount: item.likes,
+      reply: item.replyData ? item.replyData.map(c => ({
+        id: c.commentId,
+        text: c.message.split('\n').filter(t => !!t),
+        time: c.gmtCreate,
+        timeStr: dateFormat2(c.gmtCreate),
+        userName: c.nickName,
+        avatar: c.avatar,
+        userId: c.userId,
+        likedCount: c.likes,
+      })) : [],
+    }))
+  },
+}
--- a/src/renderer/utils/music/xm/index.js
+++ b/src/renderer/utils/music/xm/index.js
@@ -5,6 +5,8 @@ import musicSearch from './musicSearch'
 // import pic from './pic'
 import lyric from './lyric'
 import hotSearch from './hotSearch'
+import comment from './comment'
+import musicInfo from './musicInfo'
 import { closeVerifyModal } from './util'

 const xm = {
@@ -13,6 +15,7 @@ const xm = {
  leaderboard,
  hotSearch,
  closeVerifyModal,
+  comment,
  getMusicUrl(songInfo, type) {
    return apis('xm').getMusicUrl(songInfo, type)
  },
@@ -24,7 +27,12 @@ const xm = {
    // return pic.getPic(songInfo)
  },
  getMusicDetailPageUrl(songInfo) {
-    return songInfo.songStringId ? `https://www.xiami.com/song/${songInfo.songStringId}` : null
+    if (songInfo.songStringId) return `https://www.xiami.com/song/${songInfo.songStringId}`
+
+    musicInfo.getMusicInfo(songInfo).then(({ data }) => {
+      songInfo.songStringId = data.songStringId
+    })
+    return `https://www.xiami.com/song/${songInfo.songmid}`
  },
  // init() {
  //   getToken()
--- a/src/renderer/utils/music/xm/musicInfo.js
+++ b/src/renderer/utils/music/xm/musicInfo.js
@@ -0,0 +1,14 @@
+import { xmRequest } from './util'
+
+export default {
+  _requestObj: null,
+  async getMusicInfo({ songmid }, page = 1, limit = 20) {
+    if (this._requestObj) this._requestObj.cancelHttp()
+
+    const _requestObj = xmRequest('/api/song/initialize', { songId: songmid })
+    const { body, statusCode } = await _requestObj.promise
+    // console.log(body)
+    if (statusCode != 200 || body.code !== 'SUCCESS') throw new Error('获取歌曲信息失败')
+    return { source: 'xm', data: body.result.data.songDetail }
+  },
+}
--- a/src/renderer/views/Leaderboard.vue
+++ b/src/renderer/views/Leaderboard.vue
@@ -7,11 +7,11 @@
      div(:class="$style.listsSelect")
        //- h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
        material-selection(:class="$style.select" :list="sources" item-key="id" item-name="name" v-model="source")
-        //- button(:class="$style.listsAdd" @click="handleShowNewList" :title="$t('view.list.lists_new_list_btn')")
+        //- button(:class="$style.listsAdd" @click="handleShowNewList" :tips="$t('view.list.lists_new_list_btn')")
          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
            use(xlink:href='#icon-list-add')
      ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
-        li(:class="[$style.listsItem, item.id == tabId ? $style.active : null]" :title="item.name" v-for="item in boardList" :key="item.id" @click="handleToggleList(item.id)")
+        li(:class="[$style.listsItem, item.id == tabId ? $style.active : null]" :tips="item.name" v-for="item in boardList" :key="item.id" @click="handleToggleList(item.id)")
          span(:class="$style.listsLabel") {{item.name}}
    div(:class="$style.list")
      material-song-list(v-model="selectedData" :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")
--- a/src/renderer/views/List.vue
+++ b/src/renderer/views/List.vue
@@ -3,15 +3,15 @@
    div(:class="$style.lists" ref="dom_lists")
      div(:class="$style.listHeader")
        h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
-        button(:class="$style.listsAdd" @click="handleShowNewList" :title="$t('view.list.lists_new_list_btn')")
+        button(:class="$style.listsAdd" @click="handleShowNewList" :tips="$t('view.list.lists_new_list_btn')")
          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
            use(xlink:href='#icon-list-add')
      ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
-        li(:class="[$style.listsItem, defaultList.id == listId ? $style.active : null]" :title="defaultList.name" @click="handleListToggle(defaultList.id)")
+        li(:class="[$style.listsItem, defaultList.id == listId ? $style.active : null]" :tips="defaultList.name" @click="handleListToggle(defaultList.id)")
          span(:class="$style.listsLabel") {{defaultList.name}}
-        li(:class="[$style.listsItem, loveList.id == listId ? $style.active : null]" :title="loveList.name" @click="handleListToggle(loveList.id)")
+        li(:class="[$style.listsItem, loveList.id == listId ? $style.active : null]" :tips="loveList.name" @click="handleListToggle(loveList.id)")
          span(:class="$style.listsLabel") {{loveList.name}}
-        li.user-list(:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null]" @contextmenu="handleListsItemRigthClick($event, index)" :title="item.name" v-for="(item, index) in userList" :key="item.id")
+        li.user-list(:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null]" @contextmenu="handleListsItemRigthClick($event, index)" :tips="item.name" v-for="(item, index) in userList" :key="item.id")
          span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}}
          input.key-bind(:class="$style.listsInput" @contextmenu.stop type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
        transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave")
@@ -86,7 +86,6 @@ export default {
      // isShowEditBtn: false,
      isShowDownloadMultiple: false,
      delayShow: false,
-      routeLeaveLocation: null,
      isShowListAdd: false,
      isShowListAddMultiple: false,
      delayTimeout: null,
@@ -289,18 +288,14 @@ export default {
  // },
  beforeRouteLeave(to, from, next) {
    this.clearDelayTimeout()
-    this.routeLeaveLocation = (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 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.setPrevSelectListId(this.listId)
-    this.handleScroll = throttle(e => {
-      if (this.routeLeaveLocation) {
-        this.setListScroll({ id: this.listId, location: this.routeLeaveLocation })
-      } else {
-        this.setListScroll({ id: this.listId, location: e.target.scrollTop })
-      }
+    this.handleSaveScroll = throttle((listId, location) => {
+      this.setListScroll({ id: listId, location })
    }, 1000)
    this.listenEvent()
  },
@@ -310,6 +305,7 @@ export default {
  },
  beforeDestroy() {
    this.unlistenEvent()
+    this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
  },
  methods: {
    ...mapMutations(['setPrevSelectListId']),
@@ -369,6 +365,9 @@ export default {
        this.restoreScroll(this.$route.query.scrollIndex, false)
      }
    },
+    handleScroll(e) {
+      this.handleSaveScroll(this.listId, e.target.scrollTop)
+    },
    clearDelayTimeout() {
      if (this.delayTimeout) {
        clearTimeout(this.delayTimeout)
--- a/src/renderer/views/Search.vue
+++ b/src/renderer/views/Search.vue
@@ -45,10 +45,10 @@
        dl(:class="$style.noitemList" v-if="setting.search.isShowHistorySearch && historyList.length")
          dt(:class="$style.noitemListTitle")
            span {{$t('view.search.history_search')}}
-            span(:class="$style.historyClearBtn" @click="clearHistory" :title="$t('view.search.history_clear')")
+            span(:class="$style.historyClearBtn" @click="clearHistory" :tips="$t('view.search.history_clear')")
              svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
                use(xlink:href='#icon-eraser')
-          dd(:class="$style.noitemListItem" v-for="(item, index) in historyList" @contextmenu="removeHistory(index)" :key="index + item" @click="handleNoitemSearch(item)" :title="$t('view.search.history_remove')") {{item}}
+          dd(:class="$style.noitemListItem" v-for="(item, index) in historyList" @contextmenu="removeHistory(index)" :key="index + item" @click="handleNoitemSearch(item)" :tips="$t('view.search.history_remove')") {{item}}
      div(v-else :class="$style.noitem_list")
        p {{$t('view.search.no_item')}}
    material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
--- a/src/renderer/views/Setting.vue
+++ b/src/renderer/views/Setting.vue
@@ -1,89 +1,99 @@
 <template lang="pug">
-div.scroll(:class="$style.setting")
-  dl
-    dt {{$t('view.setting.basic')}}
+//- div(:class="$style.main")
+  div.scroll(:class="$style.toc")
+    ul(:class="$style.tocList")
+      li(:class="$style.tocListItem" v-for="h2 in toc" :key="h2.id")
+        h2(:class="$style.tocH2" :tips="h2.title")
+          a(:href="'#' + h2.id") {{h2.title}}
+        ul(:class="$style.tocList" v-if="h2.children.length")
+          li(:class="$style.tocSubListItem" v-for="h3 in h2.children" :key="h3.id")
+            h3(:class="$style.tocH3" :tips="h3.title")
+              a(:href="'#' + h3.id") {{h3.title}}
+div.scroll(:class="$style.setting" ref="dom_setting")
+  dl(ref="dom_setting_list")
+    dt#basic {{$t('view.setting.basic')}}
    dd
-      h3 {{$t('view.setting.basic_theme')}}
+      h3#basic_theme {{$t('view.setting.basic_theme')}}
      div
        ul(:class="$style.theme")
-          li(v-for="theme in themes.list" :key="theme.id" :title="$t('store.state.theme_' + theme.class)" @click="current_setting.themeId = theme.id" :class="[theme.class, themes.active == theme.id ? $style.active : '']")
+          li(v-for="theme in themes.list" :key="theme.id" :tips="$t('store.state.theme_' + theme.class)" @click="current_setting.themeId = theme.id" :class="[theme.class, themes.active == theme.id ? $style.active : '']")
            span
            label {{$t('store.state.theme_' + theme.class)}}

    dd
-      h3 {{$t('view.setting.basic_show_animation')}}
+      h3#basic_show_animation {{$t('view.setting.basic_show_animation')}}
      div
        material-checkbox(id="setting_show_animate" v-model="current_setting.isShowAnimation" :label="$t('view.setting.is_show')")

-    dd(:title="$t('view.setting.basic_animation_title')")
-      h3 {{$t('view.setting.basic_animation')}}
+    dd(:tips="$t('view.setting.basic_animation_title')")
+      h3#basic_animation {{$t('view.setting.basic_animation')}}
      div
        material-checkbox(id="setting_animate" v-model="current_setting.randomAnimate" :label="$t('view.setting.is_enable')")

-    dd(:title="$t('view.setting.basic_source_title')")
-      h3 {{$t('view.setting.basic_source')}}
+    dd(:tips="$t('view.setting.basic_source_title')")
+      h3#basic_source {{$t('view.setting.basic_source')}}
      div
        div(v-for="item in apiSources" :key="item.id" :class="$style.gapTop")
          material-checkbox(:id="`setting_api_source_${item.id}`" name="setting_api_source" @change="handleAPISourceChange(item.id)"
            need v-model="current_setting.apiSource" :disabled="item.disabled" :value="item.id" :label="item.label")

-    dd(:title="$t('view.setting.basic_to_tray_title')")
-      h3 {{$t('view.setting.basic_to_tray')}}
+    dd(:tips="$t('view.setting.basic_to_tray_title')")
+      h3#basic_to_tray {{$t('view.setting.basic_to_tray')}}
      div
        material-checkbox(id="setting_to_tray" v-model="current_setting.tray.isShow" @change="handleTrayShowChange" :label="$t('view.setting.is_enable')")

-    dd(:title="$t('view.setting.basic_window_size_title')")
-      h3 {{$t('view.setting.basic_window_size')}}
+    dd(:tips="$t('view.setting.basic_window_size_title')")
+      h3#basic_window_size {{$t('view.setting.basic_window_size')}}
      div
        material-checkbox(v-for="(item, index) in windowSizeList" :id="`setting_window_size_${item.id}`" name="setting_window_size" @change="handleWindowSizeChange" :class="$style.gapLeft"
          need v-model="current_setting.windowSizeId" :value="item.id" :label="$t('view.setting.basic_window_size_' + item.name)" :key="item.id")

-    dd(:title="$t('view.setting.basic_lang_title')")
-      h3 {{$t('view.setting.basic_lang')}}
+    dd(:tips="$t('view.setting.basic_lang_title')")
+      h3#basic_lang {{$t('view.setting.basic_lang')}}
      div
        material-checkbox(v-for="item in languageList" :key="item.locale" :id="`setting_lang_${item.locale}`" name="setting_lang"
          @change="handleLangChange(item.locale)" :class="$style.gapLeft"
          need v-model="current_setting.langId" :value="item.locale" :label="item.name")

-    dd(:title="$t('view.setting.basic_sourcename_title')")
-      h3 {{$t('view.setting.basic_sourcename')}}
+    dd(:tips="$t('view.setting.basic_sourcename_title')")
+      h3#basic_sourcename {{$t('view.setting.basic_sourcename')}}
      div
        material-checkbox(v-for="item in sourceNameTypes" :key="item.id" :class="$style.gapLeft" :id="`setting_abasic_sourcename_${item.id}`"
          name="setting_basic_sourcename" need v-model="current_setting.sourceNameType" :value="item.id" :label="item.label")

    dd
-      h3 {{$t('view.setting.basic_control_btn_position')}}
+      h3#basic_control_btn_position {{$t('view.setting.basic_control_btn_position')}}
      div
        material-checkbox(v-for="item in controlBtnPositionList" :key="item.id" :class="$style.gapLeft" :id="`setting_basic_control_btn_position_${item.id}`"
          name="setting_basic_control_btn_position" need v-model="current_setting.controlBtnPosition" :value="item.id" :label="item.name")

-    dt {{$t('view.setting.play')}}
-    dd(:title="$t('view.setting.play_toggle_title')")
-      h3 {{$t('view.setting.play_toggle')}}
+    dt#play {{$t('view.setting.play')}}
+    dd(:tips="$t('view.setting.play_toggle_title')")
+      h3#play_toggle {{$t('view.setting.play_toggle')}}
      div
        material-checkbox(:id="`setting_player_togglePlay_${item.value}`" :class="$style.gapLeft" :value="item.value" :key="item.value"
            v-model="current_setting.player.togglePlayMethod" v-for="item in togglePlayMethods" :label="item.name")
    dd
-      h3 {{$t('view.setting.play_lyric_transition')}}
+      h3#play_lyric_transition {{$t('view.setting.play_lyric_transition')}}
      div
        material-checkbox(id="setting_player_lyric_transition" v-model="current_setting.player.isShowLyricTransition" :label="$t('view.setting.is_show')")
-    dd(:title="$t('view.setting.play_quality_title')")
-      h3 {{$t('view.setting.play_quality')}}
+    dd(:tips="$t('view.setting.play_quality_title')")
+      h3#play_quality {{$t('view.setting.play_quality')}}
      div
        material-checkbox(id="setting_player_highQuality" v-model="current_setting.player.highQuality" :label="$t('view.setting.is_enable')")
-    dd(:title="$t('view.setting.play_task_bar_title')")
-      h3 {{$t('view.setting.play_task_bar')}}
+    dd(:tips="$t('view.setting.play_task_bar_title')")
+      h3#play_task_bar {{$t('view.setting.play_task_bar')}}
      div
        material-checkbox(id="setting_player_showTaskProgess" v-model="current_setting.player.isShowTaskProgess" :label="$t('view.setting.is_enable')")
-    dd(:title="$t('view.setting.play_mediaDevice_remove_stop_play_title')")
-      h3 {{$t('view.setting.play_mediaDevice_remove_stop_play')}}
+    dd(:tips="$t('view.setting.play_mediaDevice_remove_stop_play_title')")
+      h3#play_mediaDevice_remove_stop_play {{$t('view.setting.play_mediaDevice_remove_stop_play')}}
      div
        material-checkbox(id="setting_player_isMediaDeviceRemovedStopPlay" v-model="current_setting.player.isMediaDeviceRemovedStopPlay" :label="$t('view.setting.is_enable')")
-    dd(:title="$t('view.setting.play_mediaDevice_title')")
-      h3 {{$t('view.setting.play_mediaDevice')}}
+    dd(:tips="$t('view.setting.play_mediaDevice_title')")
+      h3#play_mediaDevice {{$t('view.setting.play_mediaDevice')}}
      div
        material-selection(:list="mediaDevices" :class="$style.gapLeft" v-model="current_setting.player.mediaDeviceId" item-key="deviceId" item-name="label")
-    dt {{$t('view.setting.desktop_lyric')}}
+    dt#desktop_lyric {{$t('view.setting.desktop_lyric')}}
    dd
      div(:class="$style.gapTop")
        material-checkbox(id="setting_desktop_lyric_enable" v-model="current_setting.desktopLyric.enable" :label="$t('view.setting.desktop_lyric_enable')")
@@ -93,63 +103,63 @@ div.scroll(:class="$style.setting")
        material-checkbox(id="setting_desktop_lyric_alwaysOnTop" v-model="current_setting.desktopLyric.isAlwaysOnTop" :label="$t('view.setting.desktop_lyric_always_on_top')")
      div(:class="$style.gapTop")
        material-checkbox(id="setting_desktop_lyric_lockScreen" v-model="current_setting.desktopLyric.isLockScreen" :label="$t('view.setting.desktop_lyric_lock_screen')")
-    dt {{$t('view.setting.search')}}
-    dd(:title="$t('view.setting.search_hot_title')")
-      h3 {{$t('view.setting.search_hot')}}
+    dt#search {{$t('view.setting.search')}}
+    dd(:tips="$t('view.setting.search_hot_title')")
+      h3#search_hot {{$t('view.setting.search_hot')}}
      div
        material-checkbox(id="setting_search_showHot_enable" v-model="current_setting.search.isShowHotSearch" :label="$t('view.setting.is_show')")
-    dd(:title="$t('view.setting.search_history_title')")
-      h3 {{$t('view.setting.search_history')}}
+    dd(:tips="$t('view.setting.search_history_title')")
+      h3#search_history {{$t('view.setting.search_history')}}
      div
        material-checkbox(id="setting_search_showHistory_enable" v-model="current_setting.search.isShowHistorySearch" :label="$t('view.setting.is_show')")
-    dd(:title="$t('view.setting.search_focus_search_box_title')")
-      h3 {{$t('view.setting.search_focus_search_box')}}
+    dd(:tips="$t('view.setting.search_focus_search_box_title')")
+      h3#search_focus_search_box {{$t('view.setting.search_focus_search_box')}}
      div
        material-checkbox(id="setting_search_focusSearchBox_enable" v-model="current_setting.search.isFocusSearchBox" :label="$t('view.setting.is_enable')")

-    dt {{$t('view.setting.list')}}
-    dd(:title="$t('view.setting.list_source_title')")
-      h3 {{$t('view.setting.list_source')}}
+    dt#list {{$t('view.setting.list')}}
+    dd(:tips="$t('view.setting.list_source_title')")
+      h3#list_source {{$t('view.setting.list_source')}}
      div
        material-checkbox(id="setting_list_showSource_enable" v-model="current_setting.list.isShowSource" :label="$t('view.setting.is_show')")
-    dd(:title="$t('view.setting.list_scroll_title')")
-      h3 {{$t('view.setting.list_scroll')}}
+    dd(:tips="$t('view.setting.list_scroll_title')")
+      h3#list_scroll {{$t('view.setting.list_scroll')}}
      div
        material-checkbox(id="setting_list_scroll_enable" v-model="current_setting.list.isSaveScrollLocation" :label="$t('view.setting.is_enable')")
-    //- dd(:title="播放列表是否显示专辑栏")
+    //- dd(:tips="播放列表是否显示专辑栏")
      h3 专辑栏
      div
        material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName" label="是否显示专辑栏")
-    dt {{$t('view.setting.download')}}
+    dt#download {{$t('view.setting.download')}}
    dd
      material-checkbox(id="setting_download_enable" v-model="current_setting.download.enable" :label="$t('view.setting.download_enable')")
-    dd(:title="$t('view.setting.download_path_title')")
-      h3 {{$t('view.setting.download_path')}}
+    dd(:tips="$t('view.setting.download_path_title')")
+      h3#download_path {{$t('view.setting.download_path')}}
      div
        p
          | {{$t('view.setting.download_path_label')}}
-          span.auto-hidden.hover(:title="$t('view.setting.download_path_open_label')" :class="$style.savePath" @click="handleOpenDir(current_setting.download.savePath)") {{current_setting.download.savePath}}
+          span.auto-hidden.hover(:tips="$t('view.setting.download_path_open_label')" :class="$style.savePath" @click="handleOpenDir(current_setting.download.savePath)") {{current_setting.download.savePath}}
        p
          material-btn(:class="$style.btn" min @click="handleChangeSavePath") {{$t('view.setting.download_path_change_btn')}}
-    dd(:title="$t('view.setting.download_name_title')")
-      h3 {{$t('view.setting.download_name')}}
+    dd(:tips="$t('view.setting.download_name_title')")
+      h3#download_name {{$t('view.setting.download_name')}}
      div
        material-checkbox(:id="`setting_download_musicName_${item.value}`" :class="$style.gapLeft" name="setting_download_musicName" :value="item.value" :key="item.value" need
            v-model="current_setting.download.fileName" v-for="item in musicNames" :label="item.name")
    dd
-      h3 {{$t('view.setting.download_data_embed')}}
+      h3#download_data_embed {{$t('view.setting.download_data_embed')}}
      div(:class="$style.gapTop")
        material-checkbox(id="setting_download_isEmbedPic" v-model="current_setting.download.isEmbedPic" :label="$t('view.setting.download_embed_pic')")
      div(:class="$style.gapTop")
        material-checkbox(id="setting_download_isEmbedLyric" v-model="current_setting.download.isEmbedLyric" :label="$t('view.setting.download_embed_lyric')")
-    dd(:title="$t('view.setting.download_lyric_title')")
-      h3 {{$t('view.setting.download_lyric')}}
+    dd(:tips="$t('view.setting.download_lyric_title')")
+      h3#download_lyric {{$t('view.setting.download_lyric')}}
      div
        material-checkbox(id="setting_download_isDownloadLrc" v-model="current_setting.download.isDownloadLrc" :label="$t('view.setting.is_enable')")

-    dt {{$t('view.setting.hot_key')}}
+    dt#hot_key {{$t('view.setting.hot_key')}}
    dd
-      h3 {{$t('view.setting.hot_key_local_title')}}
+      h3#hot_key_local_title {{$t('view.setting.hot_key_local_title')}}
      div
        material-checkbox(id="setting_download_hotKeyLocal" v-model="current_hot_key.local.enable" :label="$t('view.setting.is_enable')" @change="handleHotKeySaveConfig")
      div(:class="$style.hotKeyContainer" :style="{ opacity: current_hot_key.local.enable ? 1 : .6 }")
@@ -160,7 +170,7 @@ div.scroll(:class="$style.setting")
            @focus="handleHotKeyFocus($event, item, 'local')"
            @blur="handleHotKeyBlur($event, item, 'local')")

-      h3 {{$t('view.setting.hot_key_global_title')}}
+      h3#hot_key_global_title {{$t('view.setting.hot_key_global_title')}}
      div
        material-checkbox(id="setting_download_hotKeyGlobal" v-model="current_hot_key.global.enable" :label="$t('view.setting.is_enable')" @change="handleEnableHotKey")
      div(:class="$style.hotKeyContainer" :style="{ opacity: current_hot_key.global.enable ? 1 : .6 }")
@@ -171,9 +181,9 @@ div.scroll(:class="$style.setting")
            @focus="handleHotKeyFocus($event, item, 'global')"
            @blur="handleHotKeyBlur($event, item, 'global')")

-    dt {{$t('view.setting.network')}}
+    dt#network {{$t('view.setting.network')}}
    dd
-      h3 {{$t('view.setting.network_proxy_title')}}
+      h3#network_proxy_title {{$t('view.setting.network_proxy_title')}}
      div
        p
          material-checkbox(id="setting_network_proxy_enable" v-model="current_setting.network.proxy.enable" @change="handleProxyChange('enable')" :label="$t('view.setting.is_enable')")
@@ -183,43 +193,43 @@ div.scroll(:class="$style.setting")
        p
          material-input(:class="$style.gapLeft" v-model="current_setting.network.proxy.username" @change="handleProxyChange('username')" :placeholder="$t('view.setting.network_proxy_username')")
          material-input(:class="$style.gapLeft" v-model="current_setting.network.proxy.password" @change="handleProxyChange('password')" type="password" :placeholder="$t('view.setting.network_proxy_password')")
-    dt {{$t('view.setting.odc')}}
+    dt#odc {{$t('view.setting.odc')}}
    dd
-      h3 {{$t('view.setting.odc_clear_search_input')}}
+      h3#odc_clear_search_input {{$t('view.setting.odc_clear_search_input')}}
      div
        material-checkbox(id="setting_odc_isAutoClearSearchInput" v-model="current_setting.odc.isAutoClearSearchInput" :label="$t('view.setting.is_enable')")
    dd
-      h3 {{$t('view.setting.odc_clear_search_list')}}
+      h3#odc_clear_search_list {{$t('view.setting.odc_clear_search_list')}}
      div
        material-checkbox(id="setting_odc_isAutoClearSearchList" v-model="current_setting.odc.isAutoClearSearchList" :label="$t('view.setting.is_enable')")
-    dt {{$t('view.setting.backup')}}
+    dt#backup {{$t('view.setting.backup')}}
    dd
-      h3 {{$t('view.setting.backup_part')}}
+      h3#backup_part {{$t('view.setting.backup_part')}}
      div
        material-btn(:class="[$style.btn, $style.gapLeft]" min @click="handleImportPlayList") {{$t('view.setting.backup_part_import_list')}}
        material-btn(:class="[$style.btn, $style.gapLeft]" min @click="handleExportPlayList") {{$t('view.setting.backup_part_export_list')}}
        material-btn(:class="[$style.btn, $style.gapLeft]" min @click="handleImportSetting") {{$t('view.setting.backup_part_import_setting')}}
        material-btn(:class="[$style.btn, $style.gapLeft]" min @click="handleExportSetting") {{$t('view.setting.backup_part_export_setting')}}
    dd
-      h3 {{$t('view.setting.backup_all')}}
+      h3#backup_all {{$t('view.setting.backup_all')}}
      div
        material-btn(:class="[$style.btn, $style.gapLeft]" min @click="handleImportAllData") {{$t('view.setting.backup_all_import')}}
        material-btn(:class="[$style.btn, $style.gapLeft]" min @click="handleExportAllData") {{$t('view.setting.backup_all_export')}}
-    dt {{$t('view.setting.other')}}
+    dt#other {{$t('view.setting.other')}}
    dd
-      h3 {{$t('view.setting.other_tray_theme')}}
+      h3#other_tray_theme {{$t('view.setting.other_tray_theme')}}
      div
        material-checkbox(:id="'setting_tray_theme_' + item.id" v-model="current_setting.tray.themeId" name="setting_tray_theme" need :class="$style.gapLeft"
          :label="$t('view.setting.other_tray_theme_' + item.name)" :key="item.id" :value="item.id" v-for="item in trayThemeList")
    dd
-      h3 {{$t('view.setting.other_cache')}}
+      h3#other_cache {{$t('view.setting.other_cache')}}
      div
        p
          | {{$t('view.setting.other_cache_label')}}
-          span.auto-hidden(:title="$t('view.setting.other_cache_label_title')") {{cacheSize}}
+          span.auto-hidden(:tips="$t('view.setting.other_cache_label_title')") {{cacheSize}}
        p
          material-btn(:class="$style.btn" min @click="clearCache") {{$t('view.setting.other_cache_clear_btn')}}
-    dt {{$t('view.setting.update')}}
+    dt#update {{$t('view.setting.update')}}
    dd
      p.small
        | {{$t('view.setting.update_latest_label')}}{{version.newVersion ? version.newVersion.version : $t('view.setting.update_unknown')}}
@@ -232,29 +242,29 @@ div.scroll(:class="$style.setting")
        span(v-if="version.isLatestVer") {{$t('view.setting.update_latest')}}
        material-btn(v-else :class="[$style.btn, $style.gapLeft]" min @click="showUpdateModal") {{$t('view.setting.update_open_version_modal_btn')}}
      p.small(v-else) {{$t('view.setting.update_checking')}}
-    dt {{$t('view.setting.about')}}
+    dt#about {{$t('view.setting.about')}}
    dd
      p.small
        | 本软件完全免费，代码已开源，开源地址：
-        span.hover.underline(:title="$t('view.setting.click_open')" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop#readme')") https://github.com/lyswhut/lx-music-desktop
+        span.hover.underline(:tips="$t('view.setting.click_open')" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop#readme')") https://github.com/lyswhut/lx-music-desktop
      p.small
        | 最新版网盘下载地址（网盘内有Windows、MAC版）：
-        span.hover.underline(:title="$t('view.setting.click_open')" @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')") 网盘地址
+        span.hover.underline(:tips="$t('view.setting.click_open')" @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')") 网盘地址
        | &nbsp;&nbsp;密码：
-        span.hover(:title="$t('view.setting.click_copy')" @click="clipboardWriteText('glqw')") glqw
+        span.hover(:tips="$t('view.setting.click_copy')" @click="clipboardWriteText('glqw')") glqw
      p.small
        | 软件的常见问题可转至：
-        span.hover.underline(:title="$t('view.setting.click_open')" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md')") 常见问题
+        span.hover.underline(:tips="$t('view.setting.click_open')" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md')") 常见问题
      p.small
        strong 仔细 仔细 仔细
        | 地阅读常见问题后，
      p.small
        | 仍有问题可加企鹅群&nbsp;
-        span.hover(:title="$t('view.setting.click_open')" @click="handleOpenUrl('https://jq.qq.com/?_wv=1027&k=51ECeq2')") 830125506
+        span.hover(:tips="$t('view.setting.click_open')" @click="handleOpenUrl('https://jq.qq.com/?_wv=1027&k=51ECeq2')") 830125506
        | &nbsp;反馈
        strong (为免满人，无事勿加，入群先看群公告)
        | ，或到 GitHub 提交&nbsp;
-        span.hover.underline(:title="$t('view.setting.click_open')" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/issues')") issue
+        span.hover.underline(:tips="$t('view.setting.click_open')" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/issues')") issue

      br
      p.small 感谢以前捐赠过的人❤️，现在软件不再接受捐赠，建议把你们的爱心用来支持正版音乐，
@@ -264,7 +274,7 @@ div.scroll(:class="$style.setting")
        | 你已签署本软件的&nbsp;
        material-btn(min @click="handleShowPact") 许可协议
        | ，协议的在线版本在&nbsp;
-        strong.hover.underline(:title="$t('view.setting.click_open')" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop#%E9%A1%B9%E7%9B%AE%E5%8D%8F%E8%AE%AE')") 这里
+        strong.hover.underline(:tips="$t('view.setting.click_open')" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop#%E9%A1%B9%E7%9B%AE%E5%8D%8F%E8%AE%AE')") 这里
        | &nbsp;。
      br

@@ -582,6 +592,7 @@ export default {

      },
      isEditHotKey: false,
+      toc: [],
    }
  },
  watch: {
@@ -605,6 +616,9 @@ export default {
    'setting.desktopLyric.enable'(n) {
      this.current_setting.desktopLyric.enable = n
    },
+    'setting.desktopLyric.isLock'(n) {
+      this.current_setting.desktopLyric.isLock = n
+    },
    'setting.player.togglePlayMethod'(n) {
      this.current_setting.player.togglePlayMethod = n
    },
@@ -638,12 +652,43 @@ export default {
    init() {
      this.current_setting = JSON.parse(JSON.stringify(this.setting))
      if (!window.currentWindowSizeId) window.currentWindowSizeId = this.setting.windowSizeId
+      // this.initTOC()
      this.getCacheSize()
      this.getMediaDevice()
      this.current_hot_key = window.appHotKeyConfig
      this.initHotKeyConfig()
      this.getHotKeyStatus()
    },
+    // initTOC() {
+    //   const list = this.$refs.dom_setting_list.children
+    //   const toc = []
+    //   let prevTitle
+    //   for (const item of list) {
+    //     if (item.tagName == 'DT') {
+    //       prevTitle = {
+    //         title: item.innerText.replace(/[（(].+?[)）]/, ''),
+    //         id: item.getAttribute('id'),
+    //         dom: item,
+    //         children: [],
+    //       }
+    //       toc.push(prevTitle)
+    //       continue
+    //     }
+    //     const h3 = item.querySelector('h3')
+    //     if (h3) {
+    //       prevTitle.children.push({
+    //         title: h3.innerText.replace(/[（(].+?[)）]/, ''),
+    //         id: h3.getAttribute('id'),
+    //         dom: h3,
+    //       })
+    //     }
+    //   }
+    //   console.log(toc)
+    //   this.toc = toc
+    // },
+    // handleListScroll(event) {
+    //   // console.log(event.target.scrollTop)
+    // },
    handleChangeSavePath() {
      selectDir({
        title: this.$t('view.setting.download_select_save_path'),
@@ -848,6 +893,7 @@ export default {
    },
    handleLangChange(id) {
      this.$i18n.locale = id
+      // this.$nextTick(() => this.initTOC())
    },
    async getMediaDevice() {
      const devices = await navigator.mediaDevices.enumerateDevices()
@@ -1044,12 +1090,56 @@ export default {
 <style lang="less" module>
@import '../assets/styles/layout.less';

+// .main {
+//   display: flex;
+//   flex-flow: row nowrap;
+//   height: 100%;
+//   border-top: 1px solid rgba(0, 0, 0, 0.12);
+// }
+
+// .toc {
+//   flex: 0 0 15%;
+//   overflow-y: scroll;
+//   padding: 10px;
+//   a {
+//     text-decoration: none;
+//     display: block;
+//     line-height: 1.5;
+//     .mixin-ellipsis-1;
+//   }
+// }
+// .tocH2 {
+//   font-size: 14px;
+//   a {
+//     color: @color-theme;
+//   }
+// }
+// .tocH3 {
+//   font-size: 13px;
+//   opacity: .8;
+// }
+
+// .tocList {
+//   .tocList {
+//     padding-left: 15px;
+//   }
+// }
+// .tocListItem {
+//   +.tocListItem {
+//     padding-top: 10px;
+//   }
+// }
+// .tocSubListItem {
+//   padding-top: 10px;
+// }
+
 .setting {
  padding: 0 15px 30px 15px;
  font-size: 14px;
  box-sizing: border-box;
  overflow-y: auto;
  height: 100%;
+  position: relative;

  dt {
    border-left: 5px solid @color-theme;
@@ -1240,8 +1330,22 @@ export default {
  }
 }

+// :global(dt):target, :global(h3):target {
+//   animation: highlight 1s ease;
+// }
+
+// @keyframes highlight {
+//   from { background: yellow; }
+//   to { background: transparent; }
+// }
+
 each(@themes, {
  :global(#container.@{value}) {
+    // .tocH2 {
+    //   a {
+    //     color: ~'@{color-@{value}-theme}';
+    //   }
+    // }
    .tbody {
      tr {
        &.active {
--- a/src/renderer/views/SongList.vue
+++ b/src/renderer/views/SongList.vue
@@ -31,7 +31,7 @@
                      div(:class="$style.left" :style="{ backgroundImage: 'url('+item.img+')' }")
                        //- img(:src="item.img")
                      div(:class="$style.right" :src="item.img")
-                        h4(:title="item.name") {{item.name}}
+                        h4 {{item.name}}
                        p(:class="$style.play_count") {{item.play_count}}
                        p(:class="$style.author") {{item.author}}
                    li(:class="$style.item" style="cursor: default;" v-for="i in spaceNum")
Author	SHA1	Message	Date
lyswhut	6d1ddece92	Merge branch 'dev'	2020-11-01 18:18:15 +08:00
lyswhut	897107ca23	发布v1.3.0版本	2020-11-01 18:17:34 +08:00
lyswhut	0baaffdad8	修复小芸源评论的翻页加载问题	2020-11-01 18:01:04 +08:00
lyswhut	784d2fda6d	修复小芸源音乐搜索结果最多只有20条搜索结果的问题	2020-11-01 14:36:53 +08:00
lyswhut	19817249db	更新依赖	2020-11-01 01:23:04 +08:00
lyswhut	240260e598	修正用户名英文字母的行高问题	2020-11-01 00:59:50 +08:00
lyswhut	fcf92f06ef	修复tx源某些评论的换行问题	2020-11-01 00:50:49 +08:00
lyswhut	fe1c2a1896	添加目录	2020-10-30 08:37:32 +08:00
lyswhut	d55c65e275	更新依赖	2020-10-29 09:08:39 +08:00
lyswhut	93064bb18b	完善评论功能	2020-10-29 09:07:25 +08:00
lyswhut	dec1b24c86	修正错别字	2020-10-28 11:02:21 +08:00
lyswhut	8c76c3d81c	播放详情页新增歌曲评论加载显示	2020-10-27 18:09:17 +08:00
lyswhut	8d8cabd5b3	完善评论功能	2020-10-24 02:08:31 +08:00
lyswhut	aa948b0149	添加评论界面	2020-10-23 22:40:23 +08:00
lyswhut	a25ef6e2a0	修改播放详情页的歌曲图片的显示效果	2020-10-22 21:00:12 +08:00
lyswhut	c404d3ac8d	Merge branch 'dev'	2020-10-18 12:01:12 +08:00
lyswhut	8eb71495a1	发布v1.2.2版本	2020-10-18 12:00:28 +08:00
lyswhut	db824c4601	更新版本号	2020-10-18 11:48:46 +08:00
lyswhut	029886cc87	降级 Electron 到 9.x.x 版本修复 Linux 版桌面歌词窗口变白的问题	2020-10-18 11:47:38 +08:00
lyswhut	42604ec737	Merge branch 'dev'	2020-10-18 09:23:57 +08:00
lyswhut	caaa62db30	发布v1.2.1版本	2020-10-18 09:22:34 +08:00
lyswhut	0f135e0587	更新依赖	2020-10-17 16:09:29 +08:00
lyswhut	dae6826cc1	Linux版的软件界面默认使用圆角与阴影，顺便修复了桌面歌词窗口变白的问题	2020-10-14 18:20:03 +08:00
lyswhut	ddf2ac7ece	更新FAQ	2020-10-08 22:22:11 +08:00
lyswhut	5e011356f2	更新依赖	2020-10-08 17:15:19 +08:00
lyswhut	82e047dc66	修复输入框组件bug	2020-10-08 17:09:26 +08:00
lyswhut	7720b416d5	更新依赖	2020-10-07 21:37:02 +08:00
lyswhut	c40dc0fa50	修复聚合搜索的分页问题	2020-10-02 12:59:41 +08:00
lyswhut	36ed7bca66	Merge branch 'dev'	2020-09-30 01:15:41 +08:00
lyswhut	1fa015704a	发布 v1.2.0 版本	2020-09-30 01:15:08 +08:00
lyswhut	7e2097ba6d	更新 Electron 到 v10.1.3	2020-09-29 22:05:20 +08:00
lyswhut	3a630edaa5	优化提示查找逻辑	2020-09-29 14:41:41 +08:00
lyswhut	1b561bbf4c	优化提示出现的位置	2020-09-29 11:14:29 +08:00
lyswhut	37de0b59c3	优化软件内文本悬浮提示	2020-09-29 10:37:41 +08:00
lyswhut	2f528d2a03	Merge branch 'dev' of github.com:lyswhut/lx-music-desktop into dev	2020-09-29 08:46:23 +08:00
lyswhut	686d55a672	优化特征匹配	2020-09-29 00:34:39 +08:00
lyswhut	07c58e2ce7	修复关闭切换动画时从搜索候选列表点击内容无效的问题	2020-09-28 23:00:53 +08:00
lyswhut	6fe794fdf5	修复酷狗歌词格式问题	2020-09-28 22:53:20 +08:00
lyswhut	d0ec90130c	修复歌曲封面无法嵌入的Bug	2020-09-28 22:52:50 +08:00
lyswhut	f7806d9781	播放控制栏开启/关闭桌面歌词按钮新增右击按钮时锁定/解锁桌面歌词功能	2020-09-28 16:40:51 +08:00
lyswhut	63219b49f2	修复搜索历史列表的保存问题	2020-09-28 10:04:17 +08:00
lyswhut	320e84627c	更新依赖到最新	2020-09-28 09:56:48 +08:00
lyswhut	fc9e697249	修复迁移列表滚动位置设置时的bug	2020-09-28 09:54:36 +08:00
lyswhut	a68c626fa2	Merge branch 'dev' of github.com:lyswhut/lx-music-desktop into dev	2020-09-28 08:35:53 +08:00
lyswhut	66f17cf05b	更新log	2020-09-28 01:33:15 +08:00
lyswhut	5949e8fb3f	优化我的列表滚动条位置的保存逻辑	2020-09-28 01:33:06 +08:00
lyswhut	3bb0fcc4cd	修复重启软件后试听列表与收藏列表无法恢复上次的滚动位置的问题	2020-09-28 01:32:53 +08:00
lyswhut	d32d5d0eb8	修复初始化搜索历史列表功能	2020-09-28 01:32:45 +08:00
lyswhut	5ee2c030ec	更新设置-备份与恢复功能的描述	2020-09-23 17:00:16 +08:00
lyswhut	58ca7df105	修复网易云KTV嗨榜无法加载的问题	2020-09-20 12:17:47 +08:00
lyswhut	fc77dbc73b	优化代码	2020-09-19 16:18:13 +08:00
lyswhut	8aedde2422	修复桌面歌词窗口不允许拖出桌面之外的位置计算偏移Bug	2020-09-19 16:00:03 +08:00