🔖 V1.2.0

CHANGELOG.md

@@ -6,6 +6,34 @@ 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.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
 
 ### 修复

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lx-music-desktop",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "一个免费的音乐下载助手",
   "main": "./dist/electron/main.js",
   "productName": "洛雪音乐助手(五音版)",
@@ -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"
@@ -175,23 +175,23 @@
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
     "css-loader": "^4.3.0",
-    "del": "^5.1.0",
+    "del": "^6.0.0",
-    "electron": "^10.1.2",
+    "electron": "^10.1.3",
     "electron-builder": "^22.8.1",
     "electron-debug": "^3.1.0",
     "electron-devtools-installer": "^3.1.1",
-    "eslint": "^7.9.0",
+    "eslint": "^7.10.0",
     "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",
     "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",
     "markdown-it": "^11.0.1",
@@ -207,7 +207,7 @@
     "spinnies": "^0.5.1",
     "stylus": "^0.54.8",
     "stylus-loader": "^3.0.2",
-    "terser-webpack-plugin": "^4.2.1",
+    "terser-webpack-plugin": "^4.2.2",
     "url-loader": "^4.1.0",
     "vue-loader": "^15.9.3",
     "vue-template-compiler": "^2.6.12",
@@ -228,11 +228,11 @@
     "js-htmlencode": "^0.3.0",
     "lrc-file-parser": "^1.0.5",
     "needle": "^2.5.2",
-    "node-id3": "^0.1.18",
+    "node-id3": "^0.1.19",
     "request": "^2.88.2",
     "vue": "^2.6.12",
     "vue-i18n": "^8.21.1",
-    "vue-router": "^3.4.3",
+    "vue-router": "^3.4.5",
     "vuex": "^3.5.1",
     "vuex-router-sync": "^5.0.0"
   }

publish/changeLog.md

@@ -1,3 +1,25 @@
+提前祝大家中秋&国庆快乐~
+
+### 新增
+
+- 播放控制栏开启/关闭桌面歌词按钮 新增右击按钮时锁定/解锁桌面歌词功能
+
+### 优化
+
+- 优化我的列表滚动条位置的保存逻辑
+- 更新设置-备份与恢复功能的描述
+- 优化软件内鼠标悬停的提示界面
+
 ### 修复
 
-- 修复某些情况下桌面歌词不会播放的问题
+- 修复桌面歌词窗口不允许拖出桌面之外的位置计算偏移Bug
+- 修复网易云KTV嗨榜无法加载的问题
+- 修复初始化搜索历史列表功能
+- 修复重启软件后试听列表与收藏列表无法恢复上次的滚动位置的问题
+- 修复歌曲封面无法嵌入的Bug
+- 修复酷狗歌词格式问题
+- 修复关闭切换动画时从搜索候选列表点击内容无效的问题
+
+### 其他
+
+- 更新 Electron 到 v10.1.3

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

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('defaultList.location', scroll.locations.default || 0)
-      electronStore_list.set('loveList.location', scroll.locations.loveList || 0)
+      electronStore_list.set('loveList.location', scroll.locations.love || 0)
       electronStore_config.delete('setting.list.scroll')
       electronStore_config.set('setting.list.isSaveScrollLocation', scroll.enable)
+      delete setting.list.scroll
     }
   }
 

src/main/modules/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

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
+    x = screenWidth - width
-    y = screenHeight - height - offset
+    y = screenHeight - height
   }
   if (global.appSetting.desktopLyric.isLockScreen) {
-    x = Math.max(-offset, screenWidth < (width + x) ? screenWidth - width : x)
+    let bounds = getLyricWindowBounds({ x, y, width, height }, { x: null, y: null, w: width, h: height })
-    y = Math.max(-offset, screenHeight < (height + y) ? screenHeight - height : y)
+    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),
+    height,
-    width: Math.max(width > screenWidth ? screenWidth : width, 380),
+    width,
     x,
     y,
     minWidth: 380,

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

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 }) => {
+let minWidth = 380
-  if (!global.modules.lyricWindow) return
+let minHeight = 80
-  bounds = global.modules.lyricWindow.getBounds()
+exports.getLyricWindowBounds = (bounds, { x = 0, y = 0, w = 0, h = 0 }) => {
-  wasW = global.envParams.workAreaSize.width
+  if (w < minWidth) w = minWidth
-  wasY = global.envParams.workAreaSize.height + offset
+  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.x = x
-    bounds.width = wasW - offset
+  bounds.y = y
-  } else if (bounds.width < 380) {
+  // console.log('util bounds', bounds)
-    bounds.width = 380
+  return bounds
-  }
-  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)
 }

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

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

src/renderer-lyric/App.vue

@@ -4,7 +4,7 @@
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
       .control-bar(v-show="!lrcConfig.isLock")
         core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
-    core-lyric(:lrcConfig="lrcConfig")
+    core-lyric(:lrcConfig="lrcConfig" :isShowLyricTransition="isShowLyricTransition")
   div.resize-left(@mousedown.self="handleMouseDown('left', $event)")
   div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
   div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
@@ -44,6 +44,7 @@ export default {
           isZoomActiveLrc: true,
         },
       },
+      isShowLyricTransition: true,
       themeList: [
         {
           id: 0,
@@ -117,8 +118,9 @@ export default {
     document.removeEventListener('mouseup', this.handleMouseUp)
   },
   methods: {
-    handleUpdateConfig({ config, languageId }) {
+    handleUpdateConfig({ config, languageId, isShowLyricTransition }) {
       this.lrcConfig = config
+      this.isShowLyricTransition = isShowLyricTransition
       if (this.$i18n.locale !== languageId && languageId != null) this.$i18n.locale = languageId
     },
     handleMouseDown(origin, event) {

src/renderer-lyric/components/core/Lyric.vue

@@ -27,6 +27,10 @@ export default {
         }
       },
     },
+    isShowLyricTransition: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -58,6 +62,10 @@ export default {
       lyricLines: [],
       isSetedLines: false,
       isPlay: false,
+      lyrics: {
+        lyric: '',
+        tlyric: '',
+      },
     }
   },
   computed: {
@@ -112,6 +120,11 @@ export default {
       },
       immediate: true,
     },
+    isShowLyricTransition(n) {
+      console.log(n)
+      this.setLyric()
+      rendererSend(NAMES.winLyric.get_lyric_info, 'status')
+    },
   },
   created() {
     rendererOn(NAMES.winLyric.set_lyric_info, (event, data) => this.handleSetInfo(data))
@@ -144,7 +157,9 @@ export default {
       // console.log(type, data)
       switch (type) {
         case 'lyric':
-          window.lrc.setLyric(data)
+          this.lyrics.lyric = data.lrc
+          this.lyrics.tlyric = data.tlrc
+          this.setLyric()
           break
         case 'play':
           this.isPlay = true
@@ -156,7 +171,9 @@ export default {
           break
         case 'info':
           // console.log('info', data)
-          window.lrc.setLyric(data.lyric)
+          this.lyrics.lyric = data.lyric
+          this.lyrics.tlyric = data.tlyric
+          this.setLyric()
           this.$nextTick(() => {
             this.lyric.line = data.line
             rendererSend(NAMES.winLyric.get_lyric_info, 'status')
@@ -261,6 +278,9 @@ export default {
     close() {
       rendererSend(NAMES.winLyric.close)
     },
+    setLyric() {
+      window.lrc.setLyric((this.isShowLyricTransition && this.lyrics.tlyric ? this.lyrics.tlyric + '\n' : '') + this.lyrics.lyric)
+    },
   },
 }
 </script>

src/renderer/App.vue

@@ -94,7 +94,7 @@ export default {
       })
     }, 1000)
     this.saveSearchHistoryList = throttle(n => {
-      rendererSend(NAMES.mainWindow.set_data, {
+      rendererSend(NAMES.mainWindow.save_data, {
         path: 'searchHistoryList',
         data: n,
       })
@@ -292,7 +292,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)
         }

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

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.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :tips="`${$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.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")
+            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,15 +49,15 @@ 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"
@@ -173,6 +173,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 +298,7 @@ export default {
       'setPlayedList',
       'removePlayedList',
     ]),
-    ...mapMutations(['setVolume', 'setPlayNextMode', 'setVisibleDesktopLyric']),
+    ...mapMutations(['setVolume', 'setPlayNextMode', 'setVisibleDesktopLyric', 'setLockDesktopLyric']),
     ...mapMutations('list', ['updateMusicInfo']),
     ...mapMutations(['setMediaDeviceId']),
     handleRegisterEvent(action) {
@@ -867,6 +878,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 +1161,7 @@ export default {
   display: flex;
   padding-top: 2px;
   // justify-content: space-between;
+  height: 16px;
   align-items: center;
 }
 

src/renderer/components/core/PlayerDetail.vue

@@ -4,15 +4,15 @@
     //- 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')
 
@@ -50,15 +50,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>

src/renderer/components/core/Toolbar.vue

@@ -6,14 +6,14 @@
       @event="handleEvent" :list="tipList" :visibleList="visibleList"
       v-model="searchText")
 
-    div(:class="$style.logo" v-if="setting.controlBtnPosition == 'left'") 
+    div(:class="$style.logo" v-if="setting.controlBtnPosition == 'left'")    
     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>

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>
 

src/renderer/components/material/Input.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  input(:class="$style.input" :type="type" :placeholder="placeholder" v-model.trim="text" :disabled="disabled"
+  input(:class="$style.input" :type="type" :placeholder="placeholder" :value="value" :disabled="disabled"
-    @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="$emit('input', text)" @change="$emit('change', text)"
+    @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="$emit('input', $event.trim())" @change="$emit('change', text)"
     @keyup.enter="$emit('submit', text)")
 </template>
 
@@ -24,21 +24,6 @@ export default {
       default: 'text',
     },
   },
-  data() {
-    return {
-      text: '',
-    }
-  },
-  watch: {
-    value(n) {
-      this.text = n
-    },
-  },
-  methods: {
-    handleInput() {
-
-    },
-  },
 }
 </script>
 

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

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

src/renderer/components/material/SearchInput.vue

@@ -101,8 +101,10 @@ export default {
       this.sendEvent('focus')
     },
     handleBlur() {
-      this.focus = false
+      setTimeout(() => {
-      this.sendEvent('blur')
+        this.focus = false
+        this.sendEvent('blur')
+      }, 80)
     },
     handleSearch() {
       this.hideList()

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>

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}`}}
       |  {{$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" :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)" :title="$t('view.list.lists_new_list_btn')")
+      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)")

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" :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)" :title="$t('view.list.lists_new_list_btn')")
+      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)")

src/renderer/lang/en-us/core/player.json

@@ -21,6 +21,8 @@
   "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",

src/renderer/lang/en-us/view/setting.json

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

src/renderer/lang/zh-cn/core/player.json

@@ -21,6 +21,8 @@
   "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": "顺序播放",

src/renderer/lang/zh-cn/view/setting.json

@@ -118,12 +118,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": "选择备份文件",

src/renderer/lang/zh-tw/core/player.json

@@ -21,6 +21,8 @@
   "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": "順序播放",

src/renderer/lang/zh-tw/view/setting.json

@@ -109,12 +109,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": "選擇備份文件",

src/renderer/main.js

@@ -57,3 +57,4 @@ getSetting().then(({ setting, version }) => {
     render: h => h(App),
   })
 })
+

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

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>

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)

src/renderer/plugins/index.js

@@ -1 +1,2 @@
 // import './axios'
+import './Tips'

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

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 (defaultList != null) Object.assign(state.defaultList, { list: defaultList.list, location: defaultList.location })
-    if (loveList != null) state.loveList.list = loveList.list
+    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

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

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

src/renderer/utils/music/tx/lyric.js

@@ -12,7 +12,7 @@ export default {
       },
     })
     requestObj.promise = requestObj.promise.then(({ body }) => {
-      if (body.code != 0) return Promise.reject(new Error('»ñÈ¡¸è´Êʧ°Ü'))
+      if (body.code != 0) return Promise.reject(new Error('获取歌词失败'))
       return {
         lyric: decodeName(b64DecodeUnicode(body.lyric)),
         tlyric: decodeName(b64DecodeUnicode(body.trans)),

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周榜' },

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

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 => {
+    this.handleSaveScroll = throttle((listId, location) => {
-      if (this.routeLeaveLocation) {
+      this.setListScroll({ id: listId, location })
-        this.setListScroll({ id: this.listId, location: this.routeLeaveLocation })
-      } else {
-        this.setListScroll({ id: this.listId, location: e.target.scrollTop })
-      }
     }, 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)

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

src/renderer/views/Setting.vue

@@ -6,7 +6,7 @@ div.scroll(:class="$style.setting")
       h3 {{$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)}}
 
@@ -15,37 +15,37 @@ div.scroll(:class="$style.setting")
       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')")
+    dd(:tips="$t('view.setting.basic_animation_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.basic_source_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.basic_to_tray_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.basic_window_size_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.basic_lang_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.basic_sourcename_title')")
       h3 {{$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}`"
@@ -58,7 +58,7 @@ div.scroll(:class="$style.setting")
           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')")
+    dd(:tips="$t('view.setting.play_toggle_title')")
       h3 {{$t('view.setting.play_toggle')}}
       div
         material-checkbox(:id="`setting_player_togglePlay_${item.value}`" :class="$style.gapLeft" :value="item.value" :key="item.value"
@@ -67,19 +67,19 @@ div.scroll(:class="$style.setting")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.play_quality_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.play_task_bar_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.play_mediaDevice_remove_stop_play_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.play_mediaDevice_title')")
       h3 {{$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")
@@ -94,44 +94,44 @@ div.scroll(:class="$style.setting")
       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')")
+    dd(:tips="$t('view.setting.search_hot_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.search_history_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.search_focus_search_box_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.list_source_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.list_scroll_title')")
       h3 {{$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')}}
     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')")
+    dd(:tips="$t('view.setting.download_path_title')")
       h3 {{$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')")
+    dd(:tips="$t('view.setting.download_name_title')")
       h3 {{$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
@@ -142,7 +142,7 @@ div.scroll(:class="$style.setting")
         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')")
+    dd(:tips="$t('view.setting.download_lyric_title')")
       h3 {{$t('view.setting.download_lyric')}}
       div
         material-checkbox(id="setting_download_isDownloadLrc" v-model="current_setting.download.isDownloadLrc" :label="$t('view.setting.is_enable')")
@@ -216,7 +216,7 @@ div.scroll(:class="$style.setting")
       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')}}
@@ -240,17 +240,17 @@ div.scroll(:class="$style.setting")
         | , 此版本主要为五音助手APP用户制作，后续会跟进原版迭代更新，感谢五音助手用户的支持！
       p.small
         | 五音助手最新版本发布地址（包含Android、Windows、MAC、Linux版）： 
-        span.hover.underline(:title="$t('view.setting.click_open')" @click="handleOpenUrl('https://www.sixyin.com/42.html')") 点我前往下载
+        span.hover.underline(:tips="$t('view.setting.click_open')" @click="handleOpenUrl('https://www.sixyin.com/42.html')") 点我前往下载
       br
       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
         | 仍有问题可加五音不全QQ群 
-        span.hover(:title="$t('view.setting.click_open')" @click="handleOpenUrl('https://jq.qq.com/?_wv=1027&k=0NGcjsSt')") 604939182
+        span.hover(:tips="$t('view.setting.click_open')" @click="handleOpenUrl('https://jq.qq.com/?_wv=1027&k=0NGcjsSt')") 604939182
         |  反馈
 
       p.small
@@ -268,7 +268,7 @@ div.scroll(:class="$style.setting")
       
       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
 </template>
 
 <script>
@@ -603,6 +603,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
     },

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