新增快捷键设置

2020-06-24 01:20:56 +08:00 · 2020-06-24 01:20:56 +08:00 · 9b82cdfe53
parent 2424c76c50
commit 9b82cdfe53
58 changed files with 2254 additions and 1450 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -38,15 +38,15 @@
    "publish:linux:deb": "npm run publish:linux:deb:x64 && npm run publish:linux:deb:x86",
    "publish:linux:deb:x64": "cross-env ARCH=x64 electron-builder -l=deb --x64 -p onTagOrDraft",
    "publish:linux:deb:x86": "cross-env ARCH=x86 electron-builder -l=deb --ia32 -p onTagOrDraft",
-    "publish:linux:rpm": "cross-env ARCH=x64 electron-builder -l=rpm -p onTagOrDraft",
-    "publish:linux:pacman": "cross-env ARCH=x64 electron-builder -l=pacman -p onTagOrDraft",
+    "publish:linux:rpm": "cross-env ARCH=x64 electron-builder -l=rpm --x64 -p onTagOrDraft",
+    "publish:linux:pacman": "cross-env ARCH=x64 electron-builder -l=pacman --x64 -p onTagOrDraft",
    "pack:linux": "node build-config/pack.js && npm run pack:linux:deb && npm run pack:linux:appImage && npm run pack:linux:rpm && npm run pack:linux:pacman",
    "pack:linux:appImage": "cross-env ARCH=x64 electron-builder -l=AppImage",
    "pack:linux:deb": "npm run pack:linux:deb:x64 && npm run pack:linux:deb:x86",
    "pack:linux:deb:x64": "cross-env ARCH=x64 electron-builder -l=deb --x64",
    "pack:linux:deb:x86": "cross-env ARCH=x86 electron-builder -l=deb --ia32",
-    "pack:linux:rpm": "cross-env ARCH=x64 electron-builder -l=rpm",
-    "pack:linux:pacman": "cross-env ARCH=x64 electron-builder -l=pacman",
+    "pack:linux:rpm": "cross-env ARCH=x64 electron-builder -l=rpm --x64",
+    "pack:linux:pacman": "cross-env ARCH=x64 electron-builder -l=pacman --x64",
    "pack:mac": "node build-config/pack.js && electron-builder -m=dmg",
    "pack:dir": "node build-config/pack.js && electron-builder --dir",
    "dev": "node build-config/runner-dev.js",
@ -61,7 +61,7 @@
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-formatter-friendly --fix src"
  },
  "browserslist": [
-    "Electron 9.0.0"
+    "Electron 9.0.5"
  ],
  "engines": {
    "node": ">= 12"
@ -160,34 +160,33 @@
  },
  "homepage": "https://github.com/lyswhut/lx-music-desktop#readme",
  "devDependencies": {
-    "@babel/core": "^7.10.2",
+    "@babel/core": "^7.10.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/polyfill": "^7.10.1",
-    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-env": "^7.10.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "babel-minify-webpack-plugin": "^0.3.1",
    "babel-preset-minify": "^0.5.1",
    "browserslist": "^4.12.0",
-    "cfonts": "^2.8.2",
-    "chalk": "^4.0.0",
+    "cfonts": "^2.8.5",
+    "chalk": "^4.1.0",
    "changelog-parser": "^2.8.0",
    "copy-webpack-plugin": "^6.0.2",
    "core-js": "^3.6.5",
-    "cos-nodejs-sdk-v5": "^2.6.0",
    "cross-env": "^7.0.2",
-    "css-loader": "^3.5.3",
+    "css-loader": "^3.6.0",
    "del": "^5.1.0",
-    "electron": "^9.0.3",
+    "electron": "^9.0.5",
    "electron-builder": "^22.7.0",
    "electron-debug": "^3.1.0",
    "electron-devtools-installer": "^3.0.0",
-    "eslint": "^7.2.0",
+    "eslint": "^7.3.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-formatter-friendly": "^7.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.0.2",
-    "eslint-plugin-import": "^2.21.1",
+    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
@ -195,7 +194,7 @@
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.11.3",
-    "less-loader": "^6.1.0",
+    "less-loader": "^6.1.2",
    "markdown-it": "^11.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
@ -209,13 +208,13 @@
    "spinnies": "^0.5.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
-    "terser-webpack-plugin": "^3.0.3",
+    "terser-webpack-plugin": "^3.0.6",
    "url-loader": "^4.1.0",
-    "vue-loader": "^15.9.2",
+    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^4.2.2"
@ -223,7 +222,7 @@
  "dependencies": {
    "crypto-js": "^4.0.0",
    "dnscache": "^1.0.2",
-    "electron-log": "^4.2.1",
+    "electron-log": "^4.2.2",
    "electron-store": "^5.2.0",
    "electron-updater": "^4.3.1",
    "iconv-lite": "^0.6.0",
@ -235,7 +234,7 @@
    "request": "^2.88.2",
    "vue": "^2.6.11",
    "vue-i18n": "^8.18.2",
-    "vue-router": "^3.3.2",
+    "vue-router": "^3.3.4",
    "vuex": "^3.4.0",
    "vuex-router-sync": "^5.0.0"
  }
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@ -6,14 +6,15 @@
 - 新增自定义列表，创建列表的按钮在表头`#`左侧，鼠标移上去才会显示；编辑列表名字时，按`ESC`键可快速取消编辑，按回车键或使输入框失去焦点即可保存列表名字，右击列表可编辑已创建的列表，“试听列表”与“我的收藏”两个列表固定不可编辑
 - 改变排行榜布局，新增更多排行榜
 - 新增我的列表右键菜单复制歌曲名选项
- 新增桌面歌词，默认关闭，可到设置或者托盘菜单开启；调整字体大小、透明度时，鼠标左击按钮正常调整，右击微调；已知windows下贴边拖拽调整歌词窗口大小时可能会导致窗口变黑，这时只需将窗口拖屏幕离边缘再拖回去即可；Windows 7未开启Aero效果时桌面歌词会有问题，详情看常见问题解决；Linux版桌面歌词有问题，以后再尝试优化；
+- 新增桌面歌词，默认关闭，可到设置或者托盘菜单开启；调整字体大小、透明度时，鼠标左击按钮正常调整，右击微调；已知windows下贴边拖拽调整歌词窗口大小时可能会导致窗口变黑，这时只需将窗口拖离屏幕边缘再拖回去即可；Windows 7未开启Aero效果时桌面歌词会有问题，详情看常见问题解决；Linux版桌面歌词有问题，以后再尝试优化；
 - 新增“清热板蓝”皮肤
 - 新增软件最小化、关闭按钮位置设置，MAC版默认为左边，非MAC为右边，不想用默认的可到设置修改
+- 新增快捷键设置，软件内快捷键默认开启，全局快捷键默认关闭

 ### 优化

 - 改进歌曲切换时的歌词滚动效果
- 优化批量添加、删除播放列表的歌曲操作逻辑，大幅提升流畅度
+- 优化批量添加、删除播放列表的歌曲操作逻辑，大幅提升批量添加、删除列表歌曲的流畅度
 - 改进歌单列表展示

 ### 修复
@ -27,6 +28,8 @@
 - 修复网易音乐源歌单、排行榜歌曲列表加载显示的数量与实际不对的问题
 - 修复歌曲图片链接没有扩展名的情况下无法嵌入图片的问题
 - 修复无法检测最新版本时弹窗提示的显示
+- 修复某些情况下从托盘还原窗口后无法操作的问题
+- 修复Linux下无法`ctrl+a`全选的问题

 ### 更变

@ -35,4 +38,4 @@

 ### 其他

- 更新 Electron 到 9.0.0
+- 更新 Electron 到 9.0.5
--- a/src/common/defaultHotKey.js
+++ b/src/common/defaultHotKey.js
@ -0,0 +1,109 @@
+const { player: hotKeyPlayer, common: hotKeyCommon, desktop_lyric: hotKeyDesktopLyric } = require('./hotKey')
+
+module.exports = {
+  local: {
+    enable: true,
+    keys: {
+      'mod+f5': {
+        type: hotKeyPlayer.toggle_play.type,
+        name: hotKeyPlayer.toggle_play.name,
+        action: hotKeyPlayer.toggle_play.action,
+      },
+      'mod+left': {
+        type: hotKeyPlayer.prev.type,
+        name: hotKeyPlayer.prev.name,
+        action: hotKeyPlayer.prev.action,
+      },
+      'mod+right': {
+        type: hotKeyPlayer.next.type,
+        name: hotKeyPlayer.next.name,
+        action: hotKeyPlayer.next.action,
+      },
+      f1: {
+        type: hotKeyCommon.focusSearchInput.type,
+        name: hotKeyCommon.focusSearchInput.name,
+        action: hotKeyCommon.focusSearchInput.action,
+      },
+      'mod+w': {
+        type: hotKeyCommon.min.type,
+        name: hotKeyCommon.min.name,
+        action: hotKeyCommon.min.action,
+      },
+    },
+  },
+  global: {
+    enable: false,
+    keys: {
+      MediaPlayPause: {
+        type: hotKeyPlayer.toggle_play.type,
+        name: null,
+        action: hotKeyPlayer.toggle_play.action,
+      },
+      MediaPreviousTrack: {
+        type: hotKeyPlayer.prev.type,
+        name: null,
+        action: hotKeyPlayer.prev.action,
+      },
+      MediaNextTrack: {
+        type: hotKeyPlayer.next.type,
+        name: null,
+        action: hotKeyPlayer.next.action,
+      },
+      VolumeUp: {
+        type: hotKeyPlayer.volume_up.type,
+        name: null,
+        action: hotKeyPlayer.volume_up.action,
+      },
+      VolumeDown: {
+        type: hotKeyPlayer.volume_down.type,
+        name: null,
+        action: hotKeyPlayer.volume_down.action,
+      },
+      VolumeMute: {
+        type: hotKeyPlayer.volume_mute.type,
+        name: null,
+        action: hotKeyPlayer.volume_mute.action,
+      },
+      'mod+alt+f5': {
+        type: hotKeyPlayer.toggle_play.type,
+        name: hotKeyPlayer.toggle_play.name,
+        action: hotKeyPlayer.toggle_play.action,
+      },
+      'mod+alt+left': {
+        type: hotKeyPlayer.prev.type,
+        name: hotKeyPlayer.prev.name,
+        action: hotKeyPlayer.prev.action,
+      },
+      'mod+alt+right': {
+        type: hotKeyPlayer.next.type,
+        name: hotKeyPlayer.next.name,
+        action: hotKeyPlayer.next.action,
+      },
+      'mod+alt+up': {
+        type: hotKeyPlayer.volume_up.type,
+        name: hotKeyPlayer.volume_up.name,
+        action: hotKeyPlayer.volume_up.action,
+      },
+      'mod+alt+down': {
+        type: hotKeyPlayer.volume_down.type,
+        name: hotKeyPlayer.volume_down.name,
+        action: hotKeyPlayer.volume_down.action,
+      },
+      'mod+alt+0': {
+        type: hotKeyDesktopLyric.toggle_visible.type,
+        name: hotKeyDesktopLyric.toggle_visible.name,
+        action: hotKeyDesktopLyric.toggle_visible.action,
+      },
+      'mod+alt+-': {
+        type: hotKeyDesktopLyric.toggle_lock.type,
+        name: hotKeyDesktopLyric.toggle_lock.name,
+        action: hotKeyDesktopLyric.toggle_lock.action,
+      },
+      'mod+alt+=': {
+        type: hotKeyDesktopLyric.toggle_always_top.type,
+        name: hotKeyDesktopLyric.toggle_always_top.name,
+        action: hotKeyDesktopLyric.toggle_always_top.action,
+      },
+    },
+  },
+}
--- a/src/common/defaultSetting.js
+++ b/src/common/defaultSetting.js
@ -3,12 +3,13 @@ const os = require('os')
 const { isMac } = require('./utils')

 const defaultSetting = {
-  version: '1.0.30',
+  version: '1.0.31',
  player: {
    togglePlayMethod: 'listLoop',
    highQuality: false,
    isShowTaskProgess: true,
    volume: 1,
+    isMute: false,
    mediaDeviceId: 'default',
    isMediaDeviceRemovedStopPlay: false,
  },
--- a/src/common/hotKey.js
+++ b/src/common/hotKey.js
@ -0,0 +1,83 @@
+const names = require('../main/events/_name')
+const hotKey = {
+  common: {
+    min: {
+      name: 'min',
+      action: 'min',
+    },
+    min_toggle: {
+      name: 'toggle_min',
+      action: 'toggle_min',
+    },
+    hide_toggle: {
+      name: 'toggle_hide',
+      action: 'toggle_hide',
+    },
+    close: {
+      name: 'toggle_close',
+      action: 'toggle_close',
+    },
+    focusSearchInput: {
+      name: 'focus_search_input',
+      action: 'focus_search_input',
+    },
+  },
+  player: {
+    toggle_play: {
+      name: 'toggle_play',
+      action: 'toggle_play',
+    },
+    next: {
+      name: 'next',
+      action: 'next',
+    },
+    prev: {
+      name: 'prev',
+      action: 'prev',
+    },
+    volume_up: {
+      name: 'volume_up',
+      action: 'volume_up',
+    },
+    volume_down: {
+      name: 'volume_down',
+      action: 'volume_down',
+    },
+    volume_mute: {
+      name: 'volume_mute',
+      action: 'volume_mute',
+    },
+  },
+  desktop_lyric: {
+    toggle_visible: {
+      name: 'toggle_visible',
+      action: 'toggle_visible',
+    },
+    toggle_lock: {
+      name: 'toggle_lock',
+      action: 'toggle_lock',
+    },
+    toggle_always_top: {
+      name: 'toggle_always_top',
+      action: 'toggle_always_top',
+    },
+  },
+}
+
+const keyName = {
+  player: names.mainWindow.name,
+  desktop_lyric: names.winLyric.name,
+}
+
+for (const type of Object.keys(hotKey)) {
+  let item = hotKey[type]
+  for (const key of Object.keys(item)) {
+    item[key].action = `${type}_${item[key].action}`
+    item[key].name = `${type}_${item[key].name}`
+    item[key].type = keyName[type]
+  }
+}
+
+exports.common = hotKey.common
+exports.player = hotKey.player
+exports.desktop_lyric = hotKey.desktop_lyric
--- a/src/common/ipcNames.js
+++ b/src/common/ipcNames.js
@ -36,6 +36,11 @@ const names = {
    get_lyric_info: 'get_lyric_info',
    set_lyric_info: 'set_lyric_info',
    set_config: 'set_config',
+    set_hot_key_config: 'set_hot_key_config',
+    key_down: 'key_down',
+    quit: 'quit',
+    min_toggle: 'min_toggle',
+    hide_toggle: 'hide_toggle',
  },
  winLyric: {
    close: 'close',
@ -44,6 +49,12 @@ const names = {
    set_lyric_config: 'set_lyric_config',
    get_lyric_config: 'get_lyric_config',
    set_win_bounds: 'set_win_bounds',
+    key_down: 'key_down',
+  },
+  hotKey: {
+    enable: 'enable',
+    status: 'status',
+    set_config: 'set_config',
  },
 }

@ -56,3 +67,4 @@ for (const item of Object.keys(names)) {

 exports.mainWindow = names.mainWindow
 exports.winLyric = names.winLyric
+exports.hotKey = names.hotKey
--- a/src/common/utils.js
+++ b/src/common/utils.js
@ -2,6 +2,7 @@ const log = require('electron-log')
 const Store = require('electron-store')
 const { defaultSetting, overwriteSetting } = require('./defaultSetting')
 const apiSource = require('../renderer/utils/music/api-source-info')
+const defaultHotKey = require('./defaultHotKey')

 exports.isLinux = process.platform == 'linux'
 exports.isWin = process.platform == 'win32'
@ -169,3 +170,29 @@ exports.initSetting = () => {
  electronStore_config.set('setting', newSetting)
  return newSetting
 }
+
+/**
+ * 初始化快捷键设置
+ */
+exports.initHotKey = () => {
+  const electronStore_hotKey = new Store({
+    name: 'hotKey',
+  })
+
+  let localConfig = electronStore_hotKey.get('local')
+  if (!localConfig) {
+    localConfig = defaultHotKey.local
+    electronStore_hotKey.set('local', localConfig)
+  }
+
+  let globalConfig = electronStore_hotKey.get('global')
+  if (!globalConfig) {
+    globalConfig = defaultHotKey.global
+    electronStore_hotKey.set('global', globalConfig)
+  }
+
+  return {
+    global: globalConfig,
+    local: localConfig,
+  }
+}
--- a/src/main/event.js
+++ b/src/main/event.js
@ -1,9 +1,28 @@
 const { common: COMMON_EVENT_NAME, mainWindow: MAIN_WINDOW_EVENT_NAME } = require('./events/_name')
 const { mainSend, NAMES: { mainWindow: ipcMainWindowNames } } = require('./../common/ipc')
-
+const { getAppHotKeyConfig } = require('./utils')

 global.lx_event.common.on(COMMON_EVENT_NAME.config, name => {
  if (MAIN_WINDOW_EVENT_NAME.name === name) return
-  if (global.modals.mainWindow) mainSend(global.modals.mainWindow, ipcMainWindowNames.set_config, global.appSetting)
+  if (global.modules.mainWindow) mainSend(global.modules.mainWindow, ipcMainWindowNames.set_config, global.appSetting)
 })

+global.lx_event.common.on(COMMON_EVENT_NAME.initHotKey, () => {
+  global.appHotKey.config = getAppHotKeyConfig()
+})
+
+global.lx_event.mainWindow.on(MAIN_WINDOW_EVENT_NAME.quit, () => {
+  global.isTrafficLightClose = false
+  global.isQuitting = true
+  global.modules.mainWindow.close()
+})
+global.lx_event.mainWindow.on(MAIN_WINDOW_EVENT_NAME.toggle_minimize, () => {
+  global.modules.mainWindow.isMinimized()
+    ? global.modules.mainWindow.restore()
+    : global.modules.mainWindow.minimize()
+})
+global.lx_event.mainWindow.on(MAIN_WINDOW_EVENT_NAME.toggle_hide, () => {
+  global.modules.mainWindow.isVisible()
+    ? global.modules.mainWindow.hide()
+    : global.modules.mainWindow.show()
+})
--- a/src/main/events/HotKey.js
+++ b/src/main/events/HotKey.js
@ -0,0 +1,21 @@
+const { EventEmitter } = require('events')
+const { hotKey: HOT_KEY_EVENT_NAME } = require('./_name')
+const { saveAppHotKeyConfig } = require('../utils')
+
+class HotKey extends EventEmitter {
+  init() {
+    this.emit(HOT_KEY_EVENT_NAME.init)
+  }
+
+  saveConfig(config, source) {
+    if (config) saveAppHotKeyConfig(config)
+    this.emit(HOT_KEY_EVENT_NAME.config, config, source)
+  }
+
+  keyDown(info) {
+    this.emit(HOT_KEY_EVENT_NAME.keyDown, info)
+  }
+}
+
+module.exports = HotKey
+
--- a/src/main/events/MainWindow.js
+++ b/src/main/events/MainWindow.js
@ -5,6 +5,18 @@ class MainWindow extends EventEmitter {
  setLyricInfo(info) {
    this.emit(MAIN_WINDOW_EVENT_NAME.setLyricInfo, info)
  }
+
+  quit() {
+    this.emit(MAIN_WINDOW_EVENT_NAME.quit)
+  }
+
+  toggleMinimize() {
+    this.emit(MAIN_WINDOW_EVENT_NAME.toggle_minimize)
+  }
+
+  toggleHide() {
+    this.emit(MAIN_WINDOW_EVENT_NAME.toggle_hide)
+  }
 }

 module.exports = MainWindow
--- a/src/main/events/_name.js
+++ b/src/main/events/_name.js
@ -7,6 +7,9 @@ exports.mainWindow = {
  name: 'mainWindow',
  setLyricInfo: 'setLyricInfo',
  destroy: 'destroy',
+  quit: 'quit',
+  toggle_minimize: 'toggle_minimize',
+  toggle_hide: 'toggle_hide',
 }

 exports.tray = {
@ -21,3 +24,10 @@ exports.winLyric = {
  close: 'close',
  inited: 'inited',
 }
+
+exports.hotKey = {
+  name: 'hotKey',
+  init: 'init',
+  config: 'config',
+  keyDown: 'keyDown',
+}
--- a/src/main/events/index.js
+++ b/src/main/events/index.js
@ -4,8 +4,10 @@ const Common = require('./Common')
 const MainWindow = require('./MainWindow')
 const Tray = require('./Tray')
 const WinLyric = require('./WinLyric')
+const HotKey = require('./HotKey')

 if (!global.lx_event.common) global.lx_event.common = new Common()
 if (!global.lx_event.mainWindow) global.lx_event.mainWindow = new MainWindow()
 if (!global.lx_event.tray) global.lx_event.tray = new Tray()
 if (!global.lx_event.winLyric) global.lx_event.winLyric = new WinLyric()
+if (!global.lx_event.hotKey) global.lx_event.hotKey = new HotKey()
--- a/src/main/index.js
+++ b/src/main/index.js
@ -6,7 +6,7 @@ if (!app.requestSingleInstanceLock()) {
  app.quit()
  return
 }
-if (!global.modals) global.modals = {}
+if (!global.modules) global.modules = {}
 app.on('second-instance', (event, argv, cwd) => {
  if (global.modules.mainWindow) {
    if (global.modules.mainWindow.isMinimized()) {
@ -26,7 +26,7 @@ const isDev = global.isDev = process.env.NODE_ENV !== 'production'
 require('./env')
 const { navigationUrlWhiteList } = require('../common/config')
 const { getWindowSizeInfo } = require('./utils')
-const { isMac, isLinux, initSetting } = require('../common/utils')
+const { isMac, isLinux, initSetting, initHotKey } = require('../common/utils')


 // https://github.com/electron/electron/issues/22691
@ -90,7 +90,7 @@ function createWindow() {
  /**
   * Initial window options
   */
-  global.modals.mainWindow = new BrowserWindow({
+  global.modules.mainWindow = new BrowserWindow({
    height: windowSizeInfo.height,
    useContentSize: true,
    width: windowSizeInfo.width,
@ -109,32 +109,40 @@ function createWindow() {
    },
  })

-  global.modals.mainWindow.loadURL(winURL)
+  global.modules.mainWindow.loadURL(winURL)

-  winEvent(global.modals.mainWindow)
+  winEvent(global.modules.mainWindow)
  // mainWindow.webContents.openDevTools()

  if (!isDev) autoUpdate()
 }

+global.appHotKey = {
+  enable: true,
+  config: {},
+  state: null,
+}
+
 function init() {
  global.appSetting = initSetting()
+  global.appHotKey.config = initHotKey()
  global.lx_event.common.initSetting()
+  global.lx_event.hotKey.init()
  createWindow()
 }

 app.on('ready', init)

 app.on('activate', () => {
-  if (global.modals.mainWindow) {
-    if (global.modals.mainWindow.isMinimized()) {
-      global.modals.mainWindow.restore()
-    } else if (global.modals.mainWindow.isVisible()) {
-      global.modals.mainWindow.focus()
+  if (global.modules.mainWindow) {
+    if (global.modules.mainWindow.isMinimized()) {
+      global.modules.mainWindow.restore()
+    } else if (global.modules.mainWindow.isVisible()) {
+      global.modules.mainWindow.focus()
    } else {
-      global.modals.mainWindow.show()
+      global.modules.mainWindow.show()
    }
-  } else if (global.modals.mainWindow === null) {
+  } else if (global.modules.mainWindow === null) {
    init()
  }
 })
--- a/src/main/modules/hotKey/index.js
+++ b/src/main/modules/hotKey/index.js
@ -0,0 +1,12 @@
+const { app } = require('electron')
+const { init, unRegisterHotkeyAll } = require('./utils')
+const { hotKey: HOT_KEY_EVENT_NAME } = require('../../events/_name')
+
+global.appHotKey.state = {}
+
+app.on('will-quit', unRegisterHotkeyAll)
+
+global.lx_event.hotKey.on(HOT_KEY_EVENT_NAME.init, init)
+
+
+require('./rendererEvent')
--- a/src/main/modules/hotKey/rendererEvent.js
+++ b/src/main/modules/hotKey/rendererEvent.js
@ -0,0 +1,28 @@
+const {
+  mainHandle,
+  NAMES: {
+    hotKey: ipcHotKeyNames,
+  },
+} = require('../../../common/ipc')
+const { init, registerHotkey, unRegisterHotkey, unRegisterHotkeyAll } = require('./utils')
+
+mainHandle(ipcHotKeyNames.set_config, async(event, { action, data, source }) => {
+  switch (action) {
+    case 'config':
+      global.lx_event.hotKey.saveConfig(data, source)
+      return true
+    case 'enable':
+      data ? init(true) : unRegisterHotkeyAll()
+      return true
+    case 'register':
+      return registerHotkey(data)
+    case 'unregister':
+      return unRegisterHotkey(data)
+  }
+})
+
+mainHandle(ipcHotKeyNames.status, async() => global.appHotKey.state)
+
+mainHandle(ipcHotKeyNames.enable, async(event, flag) => {
+  flag ? init() : unRegisterHotkeyAll()
+})
--- a/src/main/modules/hotKey/utils.js
+++ b/src/main/modules/hotKey/utils.js
@ -0,0 +1,61 @@
+const { globalShortcut } = require('electron')
+const { log } = require('../../../common/utils')
+
+const handleKeyDown = key => {
+  if (!global.appHotKey.enable) return
+  global.lx_event.hotKey.keyDown({ type: 'global', key })
+}
+
+const transformedKeyRxp = /(^|\+)[a-z]/g
+
+const transformedKey = key => {
+  if (key.includes('arrow')) key = key.replace(/arrow/g, '')
+  return key.replace('mod', 'CommandOrControl').replace(transformedKeyRxp, l => l.toUpperCase())
+}
+exports.registerHotkey = ({ key, info }) => {
+  if (global.appHotKey.state[key] && global.appHotKey.state[key].status) return true
+  let transKey = transformedKey(key)
+  // console.log('Register key:', transKey)
+  if (!global.appHotKey.state[key]) {
+    global.appHotKey.state[key] = {
+      status: false,
+      info: null,
+    }
+  }
+  global.appHotKey.state[key].info = info
+  let status = global.appHotKey.state[key].status = globalShortcut.isRegistered(transKey) ? false : globalShortcut.register(transKey, () => {
+    handleKeyDown(key)
+  })
+  return status
+}
+
+exports.unRegisterHotkey = key => {
+  let transKey = transformedKey(key)
+  // console.log('Unregister key:', transKey)
+  globalShortcut.unregister(transKey)
+  delete global.appHotKey.state[key]
+}
+
+exports.unRegisterHotkeyAll = () => {
+  global.appHotKey.state = {}
+  globalShortcut.unregisterAll()
+}
+
+exports.handleKeyDown = handleKeyDown
+exports.transformedKey = transformedKey
+
+const handleRegisterHotkey = data => {
+  let ret = exports.registerHotkey(data)
+  if (!ret) log.info('Register hot key failed:', data.key)
+}
+
+
+exports.init = (isForce = false) => {
+  exports.unRegisterHotkeyAll()
+  if (!isForce && !global.appHotKey.config.global.enable) return
+  global.appHotKey.state = {}
+  // console.log(global.appHotKey.config.global.keys)
+  for (const key of Object.keys(global.appHotKey.config.global.keys)) {
+    handleRegisterHotkey({ key, info: global.appHotKey.config.global.keys[key] })
+  }
+}
--- a/src/main/modules/index.js
+++ b/src/main/modules/index.js
@ -1,3 +1,4 @@
 require('./appMenu')
 require('./winLyric')
 require('./tray')
+require('./hotKey')
--- a/src/main/modules/tray.js
+++ b/src/main/modules/tray.js
@ -9,22 +9,22 @@ global.lx_event.common.on(COMMON_EVENT_NAME.config, sourceName => {
    isEnableTray = global.appSetting.tray.isToTray
    global.appSetting.tray.isToTray ? createTray() : destroyTray()
  }
-  createMenu(global.modals.tray)
+  createMenu(global.modules.tray)
 })

 const createTray = () => {
-  if ((global.modals.tray && !global.modals.tray.isDestroyed()) || !global.appSetting.tray || !global.appSetting.tray.isShow) return
+  if ((global.modules.tray && !global.modules.tray.isDestroyed()) || !global.appSetting.tray || !global.appSetting.tray.isShow) return

  const iconPath = path.join(global.__static, 'images/tray', isWin ? 'trayTemplate@2x.ico' : 'trayTemplate.png')

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

-  global.modals.tray.setToolTip('洛雪音乐助手')
-  createMenu(global.modals.tray)
-  global.modals.tray.setIgnoreDoubleClickEvents(true)
-  global.modals.tray.on('click', () => {
-    const mainWindow = global.modals.mainWindow
+  global.modules.tray.setToolTip('洛雪音乐助手')
+  createMenu(global.modules.tray)
+  global.modules.tray.setIgnoreDoubleClickEvents(true)
+  global.modules.tray.on('click', () => {
+    const mainWindow = global.modules.mainWindow
    if (!mainWindow) return
    mainWindow.isVisible()
      ? mainWindow.focus()
@ -33,13 +33,13 @@ const createTray = () => {
 }

 const destroyTray = () => {
-  if (!global.modals.tray) return
-  global.modals.tray.destroy()
-  global.modals.tray = null
+  if (!global.modules.tray) return
+  global.modules.tray.destroy()
+  global.modules.tray = null
 }

 const createMenu = tray => {
-  if (!global.modals.tray || !isWin) return
+  if (!global.modules.tray || !isWin) return
  let menu = []
  menu.push(global.appSetting.desktopLyric.enable ? {
    label: '关闭桌面歌词',
--- a/src/main/modules/winLyric/event.js
+++ b/src/main/modules/winLyric/event.js
@ -1,5 +1,6 @@
-const { common: COMMON_EVENT_NAME, winLyric: WIN_LYRIC_EVENT_NAME, mainWindow: MAIN_WINDOW_EVENT_NAME } = require('../../events/_name')
+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')

 let isLock = null
 let isEnable = null
@ -14,19 +15,19 @@ const setLrcConfig = isForceSet => {
      global.lx_event.winLyric.close()
    }
  }
-  if (global.modals.lyricWindow) {
-    mainSend(global.modals.lyricWindow, ipcWinLyricNames.set_lyric_config, desktopLyric)
+  if (global.modules.lyricWindow) {
+    mainSend(global.modules.lyricWindow, ipcWinLyricNames.set_lyric_config, desktopLyric)
    if (isForceSet || isLock != desktopLyric.isLock) {
      isLock = desktopLyric.isLock
      if (desktopLyric.isLock) {
-        global.modals.lyricWindow.setIgnoreMouseEvents(true, { forward: false })
+        global.modules.lyricWindow.setIgnoreMouseEvents(true, { forward: false })
      } else {
-        global.modals.lyricWindow.setIgnoreMouseEvents(false)
+        global.modules.lyricWindow.setIgnoreMouseEvents(false)
      }
    }
    if (isForceSet || isAlwaysOnTop != desktopLyric.isAlwaysOnTop) {
      isAlwaysOnTop = desktopLyric.isAlwaysOnTop
-      global.modals.lyricWindow.setAlwaysOnTop(desktopLyric.isAlwaysOnTop, 'screen-saver')
+      global.modules.lyricWindow.setAlwaysOnTop(desktopLyric.isAlwaysOnTop, 'screen-saver')
    }
  }
 }
@ -37,6 +38,27 @@ global.lx_event.common.on(COMMON_EVENT_NAME.config, name => {
 global.lx_event.winLyric.on(WIN_LYRIC_EVENT_NAME.inited, () => setLrcConfig(true))

 global.lx_event.mainWindow.on(MAIN_WINDOW_EVENT_NAME.setLyricInfo, info => {
-  if (!global.modals.lyricWindow) return
-  mainSend(global.modals.lyricWindow, ipcWinLyricNames.set_lyric_info, info)
+  if (!global.modules.lyricWindow) return
+  mainSend(global.modules.lyricWindow, ipcWinLyricNames.set_lyric_info, info)
+})
+
+global.lx_event.hotKey.on(HOT_KEY_EVENT_NAME.keyDown, ({ type, key }) => {
+  let info = global.appHotKey.config.global.keys[key]
+  if (!info || info.type != WIN_LYRIC_EVENT_NAME.name) return
+  let desktopLyricSetting = JSON.parse(JSON.stringify(global.appSetting.desktopLyric))
+  let settingKey
+  switch (info.action) {
+    case desktop_lyric.toggle_visible.action:
+      settingKey = 'enable'
+      break
+    case desktop_lyric.toggle_lock.action:
+      settingKey = 'isLock'
+      break
+    case desktop_lyric.toggle_always_top.action:
+      settingKey = 'isAlwaysOnTop'
+      break
+  }
+  desktopLyricSetting[settingKey] = !desktopLyricSetting[settingKey]
+
+  global.lx_event.common.setAppConfig({ desktopLyric: desktopLyricSetting }, null)
 })
--- a/src/main/modules/winLyric/index.js
+++ b/src/main/modules/winLyric/index.js
@ -36,7 +36,7 @@ const winEvent = lyricWindow => {
  // })

  lyricWindow.on('closed', () => {
-    lyricWindow = global.modals.lyricWindow = null
+    lyricWindow = global.modules.lyricWindow = null
  })


@ -62,7 +62,7 @@ const winEvent = lyricWindow => {
  lyricWindow.once('ready-to-show', () => {
    lyricWindow.show()
    let config = global.appSetting.desktopLyric
-    global.modals.lyricWindow.setBounds({
+    global.modules.lyricWindow.setBounds({
      height: config.height,
      width: config.width,
      y: config.y,
@ -74,7 +74,7 @@ const winEvent = lyricWindow => {


 const createWindow = () => {
-  if (global.modals.lyricWindow) return
+  if (global.modules.lyricWindow) return
  if (!global.appSetting.desktopLyric.enable) return
  // const windowSizeInfo = getWindowSizeInfo(global.appSetting)
  const { x, y, width, height, isAlwaysOnTop } = global.appSetting.desktopLyric
@ -84,7 +84,7 @@ const createWindow = () => {
  /**
   * Initial window options
   */
-  global.modals.lyricWindow = new BrowserWindow({
+  global.modules.lyricWindow = new BrowserWindow({
    height: height > screenHeight ? screenHeight : height,
    width: width > screenWidth ? screenWidth : width,
    x: Math.max(-8, screenWidth < (width + x) ? screenWidth - width : x),
@ -110,13 +110,13 @@ const createWindow = () => {
    },
  })

-  global.modals.lyricWindow.loadURL(winURL)
+  global.modules.lyricWindow.loadURL(winURL)

-  winEvent(global.modals.lyricWindow)
+  winEvent(global.modules.lyricWindow)
  // mainWindow.webContents.openDevTools()
 }

 const closeWindow = () => {
-  if (!global.modals.lyricWindow) return
-  global.modals.lyricWindow.close()
+  if (!global.modules.lyricWindow) return
+  global.modules.lyricWindow.close()
 }
--- a/src/main/modules/winLyric/rendererEvent.js
+++ b/src/main/modules/winLyric/rendererEvent.js
@ -10,8 +10,8 @@ const {
 const { winLyric: WIN_LYRIC_EVENT_NAME } = require('../../events/_name')

 mainOn(ipcWinLyricNames.get_lyric_info, (event, action) => {
-  if (!global.modals.mainWindow) return
-  mainSend(global.modals.mainWindow, ipcMainWindowNames.get_lyric_info, {
+  if (!global.modules.mainWindow) return
+  mainSend(global.modules.mainWindow, ipcMainWindowNames.get_lyric_info, {
    name: ipcWinLyricNames.set_lyric_info,
    modal: 'lyricWindow',
    action,
@ -32,8 +32,8 @@ let winY
 let wasW
 let wasY
 mainOn(ipcWinLyricNames.set_win_bounds, (event, { x = 0, y = 0, w = 0, h = 0 }) => {
-  if (!global.modals.lyricWindow) return
-  bounds = global.modals.lyricWindow.getBounds()
+  if (!global.modules.lyricWindow) return
+  bounds = global.modules.lyricWindow.getBounds()
  wasW = global.envParams.workAreaSize.width
  wasY = global.envParams.workAreaSize.height + 8

@ -71,5 +71,5 @@ mainOn(ipcWinLyricNames.set_win_bounds, (event, { x = 0, y = 0, w = 0, h = 0 })
  }

  // console.log(bounds)
-  global.modals.lyricWindow.setBounds(bounds)
+  global.modules.lyricWindow.setBounds(bounds)
 })
--- a/src/main/rendererEvents/clearCache.js
+++ b/src/main/rendererEvents/clearCache.js
@ -1,8 +1,8 @@
 const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')

 mainHandle(ipcMainWindowNames.clear_cache, async(event, options) => {
-  if (!global.modals.mainWindow) throw new Error('mainWindow is undefined')
-  return global.modals.mainWindow.webContents.session.clearCache()
+  if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
+  return global.modules.mainWindow.webContents.session.clearCache()
 })


--- a/src/main/rendererEvents/getCacheSize.js
+++ b/src/main/rendererEvents/getCacheSize.js
@ -1,7 +1,7 @@
 const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')

 mainHandle(ipcMainWindowNames.get_cache_size, async(event, options) => {
-  if (!global.modals.mainWindow) throw new Error('mainWindow is undefined')
-  return global.modals.mainWindow.webContents.session.getCacheSize()
+  if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
+  return global.modules.mainWindow.webContents.session.getCacheSize()
 })

--- a/src/main/rendererEvents/hotKey.js
+++ b/src/main/rendererEvents/hotKey.js
@ -0,0 +1,31 @@
+const { mainSend, NAMES: { mainWindow: ipcMainWindowNames }, mainOn } = require('../../common/ipc')
+const { mainWindow: MAIN_WINDOW_EVENT_NAME, hotKey: HOT_KEY_EVENT_NAME } = require('../events/_name')
+// const { registerHotkey, unRegisterHotkey } = require('../modules/hotKey/utils')
+
+// mainHandle(ipcMainWindowNames.set_hot_key_config, async(event, { action, data }) => {
+//   switch (action) {
+//     case 'config':
+//       global.lx_event.hotKey.saveConfig(data.data, MAIN_WINDOW_EVENT_NAME.source)
+//       return
+//     case 'register':
+//       return registerHotkey(data)
+//     case 'unregister':
+//       return unRegisterHotkey(data)
+//   }
+// })
+
+mainOn(ipcMainWindowNames.quit, () => global.lx_event.mainWindow.quit())
+mainOn(ipcMainWindowNames.min_toggle, () => global.lx_event.mainWindow.toggleMinimize())
+mainOn(ipcMainWindowNames.hide_toggle, () => global.lx_event.mainWindow.toggleHide())
+
+
+global.lx_event.hotKey.on(HOT_KEY_EVENT_NAME.config, (config, source) => {
+  if (!global.modules.mainWindow || source === MAIN_WINDOW_EVENT_NAME.name) return
+  mainSend(global.modules.mainWindow, ipcMainWindowNames.set_hot_key_config, { config, source })
+})
+
+global.lx_event.hotKey.on(HOT_KEY_EVENT_NAME.keyDown, ({ type, key }) => {
+  let info = global.appHotKey.config.global.keys[key]
+  if (!info || info.type != MAIN_WINDOW_EVENT_NAME.name) return
+  mainSend(global.modules.mainWindow, ipcMainWindowNames.key_down, { type, key })
+})
--- a/src/main/rendererEvents/index.js
+++ b/src/main/rendererEvents/index.js
@ -13,6 +13,7 @@ require('./setIgnoreMouseEvent')
 require('./getEnvParams')
 require('./setAppSetting')
 require('./setLyricInfo')
+require('./hotKey')

 require('./xm_verify')

--- a/src/main/rendererEvents/kw_decodeLyric.js
+++ b/src/main/rendererEvents/kw_decodeLyric.js
@ -39,7 +39,7 @@ const decodeLyric = async(buf, isGetLyricx) => {
 }

 mainHandle(ipcMainWindowNames.handle_kw_decode_lyric, async(event, { lrcBase64, isGetLyricx }) => {
-  if (!global.modals.mainWindow) throw new Error('mainWindow is undefined')
+  if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
  const lrc = await decodeLyric(Buffer.from(lrcBase64, 'base64'), isGetLyricx)
  return Buffer.from(lrc).toString('base64')
 })
--- a/src/main/rendererEvents/progressBar.js
+++ b/src/main/rendererEvents/progressBar.js
@ -3,7 +3,7 @@ const { mainOn, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../com

 mainOn(ipcMainWindowNames.progress, (event, params) => {
  // console.log(params)
-  global.modals.mainWindow && global.modals.mainWindow.setProgressBar(params.status, {
+  global.modules.mainWindow && global.modules.mainWindow.setProgressBar(params.status, {
    mode: params.mode || 'normal',
  })
 })
--- a/src/main/rendererEvents/selectDir.js
+++ b/src/main/rendererEvents/selectDir.js
@ -2,7 +2,7 @@ const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../..
 const { dialog } = require('electron')

 mainHandle(ipcMainWindowNames.select_dir, async(event, options) => {
-  if (!global.modals.mainWindow) throw new Error('mainWindow is undefined')
-  return dialog.showOpenDialog(global.modals.mainWindow, options)
+  if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
+  return dialog.showOpenDialog(global.modules.mainWindow, options)
 })

--- a/src/main/rendererEvents/setIgnoreMouseEvent.js
+++ b/src/main/rendererEvents/setIgnoreMouseEvent.js
@ -1,8 +1,8 @@
 const { mainOn, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')

 mainOn(ipcMainWindowNames.set_ignore_mouse_events, (event, isIgnored) => {
-  if (!global.modals.mainWindow) return
+  if (!global.modules.mainWindow) return
  isIgnored
-    ? global.modals.mainWindow.setIgnoreMouseEvents(true, { forward: true })
-    : global.modals.mainWindow.setIgnoreMouseEvents(false)
+    ? global.modules.mainWindow.setIgnoreMouseEvents(true, { forward: true })
+    : global.modules.mainWindow.setIgnoreMouseEvents(false)
 })
--- a/src/main/rendererEvents/setLyricInfo.js
+++ b/src/main/rendererEvents/setLyricInfo.js
@ -6,5 +6,5 @@ mainOn(ipcMainWindowNames.set_lyric_info, (event, info) => {
    global.lx_event.mainWindow.setLyricInfo(info)
    return
  }
-  mainSend(global.modals[info.info.modal], info.info.name, info)
+  mainSend(global.modules[info.info.modal], info.info.name, info)
 })
--- a/src/main/rendererEvents/setWindowSize.js
+++ b/src/main/rendererEvents/setWindowSize.js
@ -1,7 +1,7 @@
 const { mainOn, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')

 mainOn(ipcMainWindowNames.set_window_size, (event, options) => {
-  if (!global.modals.mainWindow) return
-  global.modals.mainWindow.setBounds(options)
+  if (!global.modules.mainWindow) return
+  global.modules.mainWindow.setBounds(options)
 })

--- a/src/main/rendererEvents/showSaveDialog.js
+++ b/src/main/rendererEvents/showSaveDialog.js
@ -2,7 +2,7 @@ const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../..
 const { dialog } = require('electron')

 mainHandle(ipcMainWindowNames.show_save_dialog, async(event, options) => {
-  if (!global.modals.mainWindow) throw new Error('mainWindow is undefined')
-  return dialog.showSaveDialog(global.modals.mainWindow, options)
+  if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
+  return dialog.showSaveDialog(global.modules.mainWindow, options)
 })

--- a/src/main/rendererEvents/trafficLight.js
+++ b/src/main/rendererEvents/trafficLight.js
@ -2,17 +2,17 @@ const { app } = require('electron')
 const { mainOn, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')

 mainOn(ipcMainWindowNames.min, event => {
-  if (global.modals.mainWindow) {
-    global.modals.mainWindow.minimize()
+  if (global.modules.mainWindow) {
+    global.modules.mainWindow.minimize()
  }
 })
 mainOn(ipcMainWindowNames.max, event => {
-  if (global.modals.mainWindow) {
-    global.modals.mainWindow.maximize()
+  if (global.modules.mainWindow) {
+    global.modules.mainWindow.maximize()
  }
 })
 mainOn(ipcMainWindowNames.close, (event, isForce) => {
  if (isForce) return app.exit(0)
  global.isTrafficLightClose = true
-  if (global.modals.mainWindow) global.modals.mainWindow.close()
+  if (global.modules.mainWindow) global.modules.mainWindow.close()
 })
--- a/src/main/rendererEvents/winEvent.js
+++ b/src/main/rendererEvents/winEvent.js
@ -17,7 +17,7 @@ module.exports = mainWindow => {
  })

  mainWindow.on('closed', () => {
-    mainWindow = global.modals.mainWindow = null
+    mainWindow = global.modules.mainWindow = null
  })

  // mainWindow.on('restore', () => {
--- a/src/main/rendererEvents/xm_verify/xm_verify_view.js
+++ b/src/main/rendererEvents/xm_verify/xm_verify_view.js
@ -9,16 +9,16 @@ let rejectFn
 const closeView = async() => {
  if (!view) return
  // await view.webContents.session.clearCache()
-  if (global.modals.mainWindow) global.modals.mainWindow.removeBrowserView(view)
+  if (global.modules.mainWindow) global.modules.mainWindow.removeBrowserView(view)
  await view.webContents.session.clearStorageData()
  view.destroy()
  view = null
 }

 mainHandle(ipcMainWindowNames.handle_xm_verify_open, (event, url) => new Promise((resolve, reject) => {
-  if (!global.modals.mainWindow) return reject(new Error('mainWindow is undefined'))
+  if (!global.modules.mainWindow) return reject(new Error('mainWindow is undefined'))
  if (view) {
-    global.modals.mainWindow.removeBrowserView(view)
+    global.modules.mainWindow.removeBrowserView(view)
    view.destroy()
  }

@ -48,7 +48,7 @@ mainHandle(ipcMainWindowNames.handle_xm_verify_open, (event, url) => new Promise
      })
  })

-  global.modals.mainWindow.setBrowserView(view)
+  global.modules.mainWindow.setBrowserView(view)
  const windowSizeInfo = getWindowSizeInfo(global.appSetting)
  view.setBounds({ x: (windowSizeInfo.width - 380) / 2, y: ((windowSizeInfo.height - 320 + 52) / 2), width: 380, height: 320 })
  view.webContents.loadURL(url, {
--- a/src/main/rendererEvents/xm_verify/xm_verify_win.js
+++ b/src/main/rendererEvents/xm_verify/xm_verify_win.js
@ -7,7 +7,7 @@ let win
 const closeWin = async() => {
  if (!win) return
  // await win.webContents.session.clearCache()
-  // if (global.modals.mainWindow) global.modals.mainWindow.removeBrowserView(win)
+  // if (global.modules.mainWindow) global.modules.mainWindow.removeBrowserView(win)
  if (win.isDestroyed()) {
    win = null
    return
@ -18,15 +18,15 @@ const closeWin = async() => {
 }

 mainHandle(ipcMainWindowNames.handle_xm_verify_open, (event, url) => new Promise((resolve, reject) => {
-  if (!global.modals.mainWindow) return reject(new Error('mainWindow is undefined'))
+  if (!global.modules.mainWindow) return reject(new Error('mainWindow is undefined'))
  if (win) win.destroy()

  let isActioned = false

-  const mainWindowSizeInfo = global.modals.mainWindow.getBounds()
+  const mainWindowSizeInfo = global.modules.mainWindow.getBounds()
  const windowSizeInfo = getWindowSizeInfo(global.appSetting)
  win = new BrowserWindow({
-    parent: global.modals.mainWindow,
+    parent: global.modules.mainWindow,
    width: 460,
    height: 370,
    resizable: false,
--- a/src/main/utils/autoUpdate.js
+++ b/src/main/utils/autoUpdate.js
@ -61,10 +61,10 @@ function sendStatusToWindow(text) {

 let waitEvent = []
 const handleSendEvent = action => {
-  if (global.modals.mainWindow) {
+  if (global.modules.mainWindow) {
    setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还没启动完成
-      if (!global.modals.mainWindow) return
-      mainSend(global.modals.mainWindow, action.type, action.info)
+      if (!global.modules.mainWindow) return
+      mainSend(global.modules.mainWindow, action.type, action.info)
    }, 2000)
  } else {
    waitEvent.push(action)
@ -76,8 +76,8 @@ module.exports = () => {
    if (waitEvent.length) {
      waitEvent.forEach((event, index) => {
        setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还没启动完成
-          if (!global.modals.mainWindow) return
-          mainSend(global.modals.mainWindow, event.type, event.info)
+          if (!global.modules.mainWindow) return
+          mainSend(global.modules.mainWindow, event.type, event.info)
        }, 2000 * (index + 1))
      })
      waitEvent = []
--- a/src/main/utils/index.js
+++ b/src/main/utils/index.js
@ -1,19 +1,41 @@
 const Store = require('electron-store')
 const { windowSizeList } = require('../../common/config')
-const { objectDeepMerge } = require('../../common/utils')
+const { objectDeepMerge, throttle } = require('../../common/utils')

 exports.getWindowSizeInfo = ({ windowSizeId = 1 } = {}) => {
  return windowSizeList.find(i => i.id === windowSizeId) || windowSizeList[0]
 }

+const electronStore_config = new Store({
+  name: 'config',
+})
 exports.getAppSetting = () => {
-  const electronStore_config = new Store({
-    name: 'config',
-  })
  return electronStore_config.get('setting')
 }

+const electronStore_hotKey = new Store({
+  name: 'hotKey',
+})
+exports.getAppHotKeyConfig = () => {
+  return {
+    global: electronStore_hotKey.get('global'),
+    local: electronStore_hotKey.get('local'),
+  }
+}
+const saveHotKeyConfig = throttle(config => {
+  for (const key of Object.keys(config)) {
+    global.appHotKey.config[key] = config[key]
+    electronStore_hotKey.set(key, config[key])
+  }
+})
+exports.saveAppHotKeyConfig = config => {
+  saveHotKeyConfig(config)
+}

+const saveSetting = throttle(n => {
+  electronStore_config.set('setting', n)
+})
 exports.updateSetting = settings => {
  objectDeepMerge(global.appSetting, settings)
+  saveSetting(global.appSetting)
 }
--- a/src/renderer-lyric/components/core/ControlBar.vue
+++ b/src/renderer-lyric/components/core/ControlBar.vue
@ -51,7 +51,7 @@ div(:class="$style.container")
 </template>

 <script>
-import { rendererSend, NAMES } from '../../../common/ipc'
+import { rendererSend, rendererOn, NAMES } from '../../../common/ipc'

 export default {
  props: {
@ -107,6 +107,9 @@ export default {
  },
  mounted() {
    this.config = JSON.parse(JSON.stringify(this.lrcConfig))
+    rendererOn(NAMES.winLyric.key_down, (event, key) => {
+
+    })
  },
  methods: {
    sendEvent() {
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@ -73,9 +73,6 @@ export default {
    },
  },
  created() {
-    this.saveSetting = throttle(n => {
-      window.electronStore_config.set('setting', n)
-    })
    this.saveDefaultList = throttle(n => {
      window.electronStore_list.set('defaultList', n)
    }, 500)
@ -101,7 +98,6 @@ export default {
    setting: {
      handler(n, o) {
        rendererSend(NAMES.mainWindow.set_app_setting, n)
-        this.saveSetting(n)
      },
      deep: true,
    },
@ -282,7 +278,7 @@ export default {
        let len = Math.max(newVer.length, currentVer.length)
        newVer.padStart(len, '0')
        currentVer.padStart(len, '0')
-        if (result.version == '0.0.0') return this.setVersionModalVisible({ isUnknow: true })
+        if (result.version == '0.0.0') return this.setVersionModalVisible({ isUnknow: true, isShow: true })
        if (parseInt(newVer) <= parseInt(currentVer)) return this.setVersionModalVisible({ isLatestVer: true })

        if (result.version === this.setting.ignoreVersion) return
@ -384,6 +380,7 @@ body {
  display: flex;
  height: 100%;
  overflow: hidden;
+  color: @color-theme_2-font;
  background: @color-theme-bgimg @color-theme-bgposition no-repeat;
  background-size: @color-theme-bgsize;
  transition: background-color @transition-theme;
@ -416,6 +413,7 @@ body {

 each(@themes, {
  #container.@{value} {
+    color: ~'@{color-@{value}-theme_2-font}';
    background-color: ~'@{color-@{value}-theme}';
    background-image: ~'@{color-@{value}-theme-bgimg}';
    background-size: ~'@{color-@{value}-theme-bgsize}';
--- a/src/renderer/assets/styles/index.less
+++ b/src/renderer/assets/styles/index.less
@ -36,7 +36,7 @@ table {
  border-spacing: 0;
  border-collapse: collapse;
  overflow: hidden;
-  color: rgba(0, 0, 0, 0.95);
+  color: @color-theme_2-font;
  th {
    font-size: 12px;
    text-align: left;
@ -72,9 +72,6 @@ table {
  }
 }

-a {
-  color: #000;
-}

 .badge {
  display: inline-block;
@ -139,6 +136,10 @@ svg {
  transition-property: fill;
 }

+button, input, textarea, a {
+  color: @color-theme_2-font;
+}
+
 input, textarea {
  &::placeholder {
    color: @color-theme_2-font-label;
@ -188,6 +189,10 @@ input, textarea {

 each(@themes, {
  #container.@{value} {
+    button, input, textarea, a {
+      color: ~'@{color-@{value}-theme_2-font}';
+    }
+
    .hover, a {
      &:hover {
        color: ~'@{color-@{value}-theme}';
@ -211,6 +216,8 @@ each(@themes, {
      }
    }
    table {
+      color: ~'@{color-@{value}-theme_2-font}';
+
      tbody {
        tr {
          border-top-color: ~'@{color-@{value}-theme_2-line}';
--- a/src/renderer/assets/styles/variables.less
+++ b/src/renderer/assets/styles/variables.less
@ -19,8 +19,8 @@
@color-theme_2-background_2: fadeout(@color-theme_2-background_1, 2%);
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 80%);
@color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%);
-@color-theme_2-font: darken(@color-theme_2, 70%);
-@color-theme_2-font-label: fadeout(@color-theme_2-font, 40%);
+@color-theme_2-font:desaturate( darken(@color-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-theme;
@ -49,7 +49,7 @@
@color-player-progress: darken(@color-theme_2, 6%);
@color-player-progress-bar1: darken(@color-theme_2, 12%);
@color-player-progress-bar2: lighten(@color-theme, 12%);
-@color-player-status-text: lighten(@color-theme_2-font, 10%);
+@color-player-status-text: lighten(@color-theme_2-font, 32%);
@color-player-detail-play-btn: lighten(@color-theme, 7%);

@color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
@ -87,8 +87,8 @@
@color-green-theme_2-background_2: fadeout(@color-green-theme_2-background_1, 2%);
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 80%);
@color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%);
-@color-green-theme_2-font: darken(@color-green-theme_2, 70%);
-@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 40%);
+@color-green-theme_2-font: darken(desaturate(@color-green-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-green-theme;
@ -111,7 +111,7 @@
@color-green-player-progress: darken(@color-green-theme_2, 6%);
@color-green-player-progress-bar1: darken(@color-green-theme_2, 12%);
@color-green-player-progress-bar2: lighten(@color-green-theme, 12%);
-@color-green-player-status-text: lighten(@color-green-theme_2-font, 10%);
+@color-green-player-status-text: lighten(@color-green-theme_2-font, 32%);
@color-green-player-detail-play-btn: lighten(@color-green-theme, 7%);
@color-green-tab-btn-background: fadeout(lighten(@color-green-theme, 10%), 80%);
@color-green-tab-btn-background-hover: @color-green-theme_2-hover;
@ -144,8 +144,8 @@
@color-yellow-theme_2-background_2: fadeout(@color-yellow-theme_2-background_1, 2%);
@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
@color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%);
-@color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%);
-@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 40%);
+@color-yellow-theme_2-font: darken(desaturate(@color-yellow-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-yellow-theme;
@ -168,7 +168,7 @@
@color-yellow-player-progress: darken(@color-yellow-theme_2, 6%);
@color-yellow-player-progress-bar1: darken(@color-yellow-theme_2, 12%);
@color-yellow-player-progress-bar2: lighten(@color-yellow-theme, 2%);
-@color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 10%);
+@color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 32%);
@color-yellow-player-detail-play-btn: lighten(@color-yellow-theme, 7%);
@color-yellow-tab-btn-background: fadeout(lighten(@color-yellow-theme, 10%), 70%);
@color-yellow-tab-btn-background-hover: @color-yellow-theme_2-hover;
@ -200,8 +200,8 @@
@color-orange-theme_2-background_2: fadeout(@color-orange-theme_2-background_1, 2%);
@color-orange-theme_2-hover: fadeout(darken(@color-orange-theme, 5%), 80%);
@color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
-@color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
-@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 40%);
+@color-orange-theme_2-font: darken(desaturate(@color-orange-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-orange-theme;
@ -224,7 +224,7 @@
@color-orange-player-progress: darken(@color-orange-theme_2, 6%);
@color-orange-player-progress-bar1: darken(@color-orange-theme_2, 12%);
@color-orange-player-progress-bar2: lighten(@color-orange-theme, 12%);
-@color-orange-player-status-text: lighten(@color-orange-theme_2-font, 10%);
+@color-orange-player-status-text: lighten(@color-orange-theme_2-font, 32%);
@color-orange-player-detail-play-btn: lighten(@color-orange-theme, 7%);
@color-orange-tab-btn-background: fadeout(lighten(@color-orange-theme, 10%), 80%);
@color-orange-tab-btn-background-hover: @color-orange-theme_2-hover;
@ -256,8 +256,8 @@
@color-blue-theme_2-background_2: fadeout(@color-blue-theme_2-background_1, 2%);
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 80%);
@color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%);
-@color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
-@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 40%);
+@color-blue-theme_2-font: darken(desaturate(@color-blue-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-blue-theme;
@ -280,7 +280,7 @@
@color-blue-player-progress: darken(@color-blue-theme_2, 6%);
@color-blue-player-progress-bar1: darken(@color-blue-theme_2, 12%);
@color-blue-player-progress-bar2: lighten(@color-blue-theme, 12%);
-@color-blue-player-status-text: lighten(@color-blue-theme_2-font, 10%);
+@color-blue-player-status-text: lighten(@color-blue-theme_2-font, 32%);
@color-blue-player-detail-play-btn: lighten(@color-blue-theme, 7%);
@color-blue-tab-btn-background: fadeout(lighten(@color-blue-theme, 10%), 80%);
@color-blue-tab-btn-background-hover: @color-blue-theme_2-hover;
@ -312,8 +312,8 @@
@color-red-theme_2-active: fadeout(lighten(@color-red-theme, 10%), 70%);
@color-red-theme_2-background_1: #fff;
@color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
-@color-red-theme_2-font: darken(@color-red-theme_2, 70%);
-@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 40%);
+@color-red-theme_2-font: darken(desaturate(@color-red-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-red-theme;
@ -336,7 +336,7 @@
@color-red-player-progress: darken(@color-red-theme_2, 6%);
@color-red-player-progress-bar1: darken(@color-red-theme_2, 12%);
@color-red-player-progress-bar2: lighten(@color-red-theme, 12%);
-@color-red-player-status-text: lighten(@color-red-theme_2-font, 10%);
+@color-red-player-status-text: lighten(@color-red-theme_2-font, 32%);
@color-red-player-detail-play-btn: lighten(@color-red-theme, 7%);
@color-red-tab-border-top: fadeout(lighten(@color-red-theme, 25%), 70%);
@color-red-tab-border-bottom: lighten(@color-red-theme, 35%);
@ -370,8 +370,8 @@
@color-pink-theme_2-background_2: fadeout(@color-pink-theme_2-background_1, 2%);
@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 75%);
@color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%);
-@color-pink-theme_2-font: darken(@color-pink-theme_2, 70%);
-@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 40%);
+@color-pink-theme_2-font: darken(desaturate(@color-pink-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-pink-theme;
@ -394,7 +394,7 @@
@color-pink-player-progress: darken(@color-pink-theme_2, 6%);
@color-pink-player-progress-bar1: darken(@color-pink-theme_2, 12%);
@color-pink-player-progress-bar2: lighten(@color-pink-theme, 2%);
-@color-pink-player-status-text: lighten(@color-pink-theme_2-font, 10%);
+@color-pink-player-status-text: lighten(@color-pink-theme_2-font, 32%);
@color-pink-player-detail-play-btn: lighten(@color-pink-theme, 7%);
@color-pink-tab-btn-background: fadeout(lighten(@color-pink-theme, 10%), 70%);
@color-pink-tab-btn-background-hover: @color-pink-theme_2-hover;
@ -426,8 +426,8 @@
@color-purple-theme_2-background_2: fadeout(@color-purple-theme_2-background_1, 2%);
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 80%);
@color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%);
-@color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
-@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 40%);
+@color-purple-theme_2-font: darken(desaturate(@color-purple-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-purple-theme;
@ -450,7 +450,7 @@
@color-purple-player-progress: darken(@color-purple-theme_2, 6%);
@color-purple-player-progress-bar1: darken(@color-purple-theme_2, 12%);
@color-purple-player-progress-bar2: lighten(@color-purple-theme, 12%);
-@color-purple-player-status-text: lighten(@color-purple-theme_2-font, 10%);
+@color-purple-player-status-text: lighten(@color-purple-theme_2-font, 32%);
@color-purple-player-detail-play-btn: lighten(@color-purple-theme, 7%);
@color-purple-tab-btn-background: fadeout(lighten(@color-purple-theme, 10%), 80%);
@color-purple-tab-btn-background-hover: @color-purple-theme_2-hover;
@ -482,8 +482,8 @@
@color-grey-theme_2-background_2: fadeout(@color-grey-theme_2-background_1, 2%);
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 80%);
@color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%);
-@color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
-@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 40%);
+@color-grey-theme_2-font: darken(desaturate(@color-grey-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-grey-theme;
@ -506,7 +506,7 @@
@color-grey-player-progress: darken(@color-grey-theme_2, 6%);
@color-grey-player-progress-bar1: darken(@color-grey-theme_2, 12%);
@color-grey-player-progress-bar2: lighten(@color-grey-theme, 12%);
-@color-grey-player-status-text: lighten(@color-grey-theme_2-font, 10%);
+@color-grey-player-status-text: lighten(@color-grey-theme_2-font, 32%);
@color-grey-player-detail-play-btn: lighten(@color-grey-theme, 7%);
@color-grey-tab-btn-background: fadeout(lighten(@color-grey-theme, 10%), 80%);
@color-grey-tab-btn-background-hover: @color-grey-theme_2-hover;
@ -539,8 +539,8 @@
@color-ming-theme_2-active: fadeout(lighten(@color-ming-theme, 10%), 75%);
@color-ming-theme_2-background_1: #fff;
@color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%);
-@color-ming-theme_2-font: darken(@color-ming-theme_2, 70%);
-@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 40%);
+@color-ming-theme_2-font: darken(desaturate(@color-ming-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-ming-theme;
@ -563,7 +563,7 @@
@color-ming-player-progress: darken(@color-ming-theme_2, 6%);
@color-ming-player-progress-bar1: darken(@color-ming-theme_2, 12%);
@color-ming-player-progress-bar2: lighten(@color-ming-theme, 12%);
-@color-ming-player-status-text: lighten(@color-ming-theme_2-font, 10%);
+@color-ming-player-status-text: lighten(@color-ming-theme_2-font, 32%);
@color-ming-player-detail-play-btn: lighten(@color-ming-theme, 10%);
@color-ming-tab-border-top: fadeout(lighten(@color-ming-theme, 25%), 70%);
@color-ming-tab-border-bottom: lighten(@color-ming-theme, 35%);
@ -598,8 +598,8 @@
@color-blue2-theme_2-background_2: fadeout(@color-blue2-theme_2-background_1, 2%);
@color-blue2-theme_2-hover: fadeout(lighten(@color-blue2-theme, 10%), 80%);
@color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%);
-@color-blue2-theme_2-font: darken(@color-blue2-theme_2, 70%);
-@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 40%);
+@color-blue2-theme_2-font: darken(desaturate(@color-blue2-theme_2, 70%), 90%);
+@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-theme-sidebar: @color-blue2-theme;
@ -622,7 +622,7 @@
@color-blue2-player-progress: darken(@color-blue2-theme_2, 6%);
@color-blue2-player-progress-bar1: darken(@color-blue2-theme_2, 12%);
@color-blue2-player-progress-bar2: lighten(@color-blue2-theme, 12%);
-@color-blue2-player-status-text: lighten(@color-blue2-theme_2-font, 10%);
+@color-blue2-player-status-text: lighten(@color-blue2-theme_2-font, 32%);
@color-blue2-player-detail-play-btn: lighten(@color-blue2-theme, 7%);
@color-blue2-tab-btn-background: fadeout(lighten(@color-blue2-theme, 10%), 80%);
@color-blue2-tab-btn-background-hover: @color-blue2-theme_2-hover;
@ -651,14 +651,14 @@
@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: #eeedef;
+@color-mid_autumn-theme_2-background_1: #e7e7e9;
@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%);
-@color-mid_autumn-theme_2-font: darken(@color-mid_autumn-theme_2, 70%);
+@color-mid_autumn-theme_2-font: darken(desaturate(@color-mid_autumn-theme_2, 70%), 90%);
@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, 63%);
+@color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%);
@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%);
@ -679,7 +679,7 @@
@color-mid_autumn-player-progress: darken(@color-mid_autumn-theme_2, 10%);
@color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
@color-mid_autumn-player-progress-bar2: lighten(@color-mid_autumn-theme, 12%);
-@color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 10%);
+@color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
@color-mid_autumn-player-detail-play-btn: lighten(@color-mid_autumn-theme, 7%);
@color-mid_autumn-tab-btn-background: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
@color-mid_autumn-tab-btn-background-hover: @color-mid_autumn-theme_2-hover;
@ -698,6 +698,63 @@
@color-mid_autumn-badge-info: #af9479;
@color-mid_autumn-badge-info-font: #fff;

+/*
+@color-mid_autumn-theme: #312438;
+@color-mid_autumn-theme-bgimg: url(../images/jqbg.jpg);
+@color-mid_autumn-theme-bgposition: center;
+@color-mid_autumn-theme-bgsize: cover;
+@color-mid_autumn-theme-hover: fadeout(lighten(@color-mid_autumn-theme, 5%), 60%);
+@color-mid_autumn-theme-active: fadeout(lighten(@color-mid_autumn-theme, 10%), 70%);
+@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(0, 0, 0, .8);
+@color-mid_autumn-theme_2-background_1: #030107;
+@color-mid_autumn-theme_2-background_2: fadeout(darken(desaturate(@color-mid_autumn-theme, 10%), 7%), 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%);
+@color-mid_autumn-theme_2-font: lighten(@color-mid_autumn-theme_2, 90%);
+@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-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%);
+@color-mid_autumn-btn-hover: fadeout(lighten(@color-mid_autumn-theme, 5%), 70%);
+@color-mid_autumn-btn-active: fadeout(darken(@color-mid_autumn-theme, 5%), 70%);
+@color-mid_autumn-btn-select: fadeout(lighten(@color-mid_autumn-theme, 5%), 50%);
+@color-mid_autumn-pagination-background: fadeout(lighten(@color-mid_autumn-theme, 45%), 50%);
+@color-mid_autumn-pagination-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 70%);
+@color-mid_autumn-pagination-active: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
+@color-mid_autumn-pagination-select: fadeout(lighten(@color-mid_autumn-theme, 10%), 55%);
+@color-mid_autumn-search-form-background: fadeout(lighten(@color-mid_autumn-theme, 50%), 10%);
+@color-mid_autumn-search-list-hover: fadeout(darken(@color-mid_autumn-theme, 10%), 70%);
+@color-mid_autumn-scrollbar-track: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
+@color-mid_autumn-scrollbar-thumb: fadeout(lighten(@color-mid_autumn-theme, 10%), 60%);
+@color-mid_autumn-scrollbar-thumb-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 40%);
+@color-mid_autumn-player-pic-c1: fadeout(@color-mid_autumn-theme_2, 50%);
+@color-mid_autumn-player-pic-c2: darken(@color-mid_autumn-theme_2, 30%);
+@color-mid_autumn-player-progress: darken(@color-mid_autumn-theme_2, 10%);
+@color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
+@color-mid_autumn-player-progress-bar2: lighten(@color-mid_autumn-theme, 12%);
+@color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
+@color-mid_autumn-player-detail-play-btn: lighten(@color-mid_autumn-theme, 7%);
+@color-mid_autumn-tab-btn-background: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
+@color-mid_autumn-tab-btn-background-hover: @color-mid_autumn-theme_2-hover;
+@color-mid_autumn-tab-border-top: fadeout(lighten(@color-mid_autumn-theme, 5%), 50%);
+@color-mid_autumn-tab-border-bottom: lighten(@color-mid_autumn-theme, 5%);
+@color-mid_autumn-hideBtn: #3bc2b2;
+@color-mid_autumn-minBtn: #85c43b;
+@color-mid_autumn-maxBtn: #e7aa36;
+@color-mid_autumn-closeBtn: #ea6e4d;
+@color-mid_autumn-hideBtn-hover: fadeout(@color-hideBtn, 10%);
+@color-mid_autumn-minBtn-hover: fadeout(@color-mid_autumn-minBtn, 10%);
+@color-mid_autumn-maxBtn-hover: fadeout(@color-mid_autumn-maxBtn, 10%);
+@color-mid_autumn-closeBtn-hover: fadeout(@color-mid_autumn-closeBtn, 10%);
+@color-mid_autumn-badge-success: lighten(@color-mid_autumn-theme, 25%);
+@color-mid_autumn-badge-success-font: #fff;
+@color-mid_autumn-badge-info: #af9479;
+@color-mid_autumn-badge-info-font: #fff; */
+
@color-naruto-theme: rgb(87, 144, 167);
@color-naruto-theme-bgimg: url(../images/myzcbg.jpg);
@color-naruto-theme-bgposition: center;
@ -711,7 +768,7 @@
@color-naruto-theme_2-background_2: fadeout(@color-naruto-theme_2-background_1, 2%);
@color-naruto-theme_2-hover: fadeout(lighten(@color-naruto-theme, 10%), 75%);
@color-naruto-theme_2-active: fadeout(lighten(@color-naruto-theme, 10%), 65%);
-@color-naruto-theme_2-font: darken(@color-naruto-theme_2, 80%);
+@color-naruto-theme_2-font: darken(desaturate(@color-naruto-theme_2, 70%), 90%);
@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%);
@ -735,7 +792,7 @@
@color-naruto-player-progress: darken(@color-naruto-theme_2, 10%);
@color-naruto-player-progress-bar1: darken(@color-naruto-theme_2, 12%);
@color-naruto-player-progress-bar2: lighten(@color-naruto-theme, 12%);
-@color-naruto-player-status-text: lighten(@color-naruto-theme_2-font, 10%);
+@color-naruto-player-status-text: lighten(@color-naruto-theme_2-font, 32%);
@color-naruto-player-detail-play-btn: lighten(@color-naruto-theme, 7%);
@color-naruto-tab-btn-background: fadeout(lighten(@color-naruto-theme, 10%), 80%);
@color-naruto-tab-btn-background-hover: @color-naruto-theme_2-hover;
@ -791,7 +848,7 @@
@color-happy_new_year-player-progress: darken(@color-happy_new_year-theme_2, 10%);
@color-happy_new_year-player-progress-bar1: darken(@color-happy_new_year-theme_2, 12%);
@color-happy_new_year-player-progress-bar2: lighten(@color-happy_new_year-theme, 9%);
-@color-happy_new_year-player-status-text: lighten(@color-happy_new_year-theme_2-font, 10%);
+@color-happy_new_year-player-status-text: lighten(@color-happy_new_year-theme_2-font, 32%);
@color-happy_new_year-player-detail-play-btn: lighten(@color-happy_new_year-theme, 7%);
@color-happy_new_year-tab-btn-background: fadeout(lighten(@color-happy_new_year-theme, 10%), 80%);
@color-happy_new_year-tab-btn-background-hover: @color-happy_new_year-theme_2-hover;
--- a/src/renderer/components/core/Aside.vue
+++ b/src/renderer/components/core/Aside.vue
@ -18,18 +18,18 @@ div(:class="$style.aside")
      dd
        router-link(:active-class="$style.active" to="search" :title="$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 801.99 811.98' space='preserve')
+            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')")
          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 739.96 763.59' space='preserve')
+            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')")
          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 819.1 819.38' space='preserve')
+            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')
          //- span {{$t('core.aside.leaderboard')}}
    dl
@ -37,20 +37,20 @@ div(:class="$style.aside")
      dd
        router-link(:active-class="$style.active" :title="$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 830.33 740.22' space='preserve')
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 459.39 388.44' space='preserve')
              use(xlink:href='#icon-love')
    dl
      //- dt {{$t('core.aside.other')}}
      dd
        router-link(:active-class="$style.active" to="download" :title="$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 798.85 718.96' space='preserve')
+            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')")
          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 854.85 775.41' space='preserve')
+            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')
          //- span {{$t('core.aside.setting')}}
 </template>
@ -222,6 +222,7 @@ export default {
      cursor: pointer;
      font-size: 11.5px;
      text-align: center;
+      outline: none;

      transition: background-color 0.3s ease;
      // border-radius: @radius-border;
@ -257,6 +258,8 @@ each(@themes, {
    }
    .controlBtn {
      button {
+        color: ~'@{color-@{value}-theme_2}';
+
        &.min {
          background-color: ~'@{color-@{value}-minBtn}';
        }
--- a/src/renderer/components/core/Icons.vue
+++ b/src/renderer/components/core/Icons.vue
@ -83,27 +83,48 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19

    g#icon-search-2(fill='currentColor')
      // 0 0 801.99 811.98
-      path(d='M785.86,731.78,676.95,622.87c-20.06-20.06-51-21.64-68.61-3.31-17.16,17.91-14.55,48.28,5.15,68L721.79,795.85c19.86,19.86,50.31,21.62,68,3.93h0C807.48,782.09,805.72,751.65,785.86,731.78Z')
-      path(d='M702.07,351c0-193.87-157.16-351-351-351S0,157.16,0,351s157.16,351,351,351S702.07,544.91,702.07,351ZM351,611.46C207.21,611.46,90.61,494.86,90.61,351S207.21,90.61,351,90.61,611.46,207.21,611.46,351,494.86,611.46,351,611.46Z')
+      //- path(d='M785.86,731.78,676.95,622.87c-20.06-20.06-51-21.64-68.61-3.31-17.16,17.91-14.55,48.28,5.15,68L721.79,795.85c19.86,19.86,50.31,21.62,68,3.93h0C807.48,782.09,805.72,751.65,785.86,731.78Z')
+      //- path(d='M702.07,351c0-193.87-157.16-351-351-351S0,157.16,0,351s157.16,351,351,351S702.07,544.91,702.07,351ZM351,611.46C207.21,611.46,90.61,494.86,90.61,351S207.21,90.61,351,90.61,611.46,207.21,611.46,351,494.86,611.46,351,611.46Z')
+
+      //- 0 0 425.2 425.2
+      path(d='M308.92,54.32a180,180,0,1,0-3.16,254.6A179.48,179.48,0,0,0,308.92,54.32Zm-31.09,226A140,140,0,1,1,180,40h0a140,140,0,0,1,97.79,240.29Z')
+      path(d='M418.23,385.7,352,317.7a23,23,0,1,0-32.93,32.12l66.66,68.44A22.9,22.9,0,0,0,404.89,425a22.65,22.65,0,0,0,11.37-4.64,22.92,22.92,0,0,0,8.94-18.47A23.81,23.81,0,0,0,418.23,385.7Z')

    g#icon-album(fill='currentColor')
      // 0 0 739.96 763.59
-      path(d='M392.64,445.47a86.07,86.07,0,1,1-86.07,86.07,86.07,86.07,0,0,1,86.07-86.07Zm0,57.38a28.69,28.69,0,1,0,28.69,28.69,28.69,28.69,0,0,0-28.69-28.69Zm0,0')
-      path(d='M478.71,371.28l37.1,37.1a28.69,28.69,0,0,0,40.57-40.57l-86.07-86.07c-18.08-18.08-49-5.28-49,20.28V531.54a28.69,28.69,0,0,0,57.38,0Zm0,0')
-      path(d='M679.17,39.27A39.32,39.32,0,0,0,639.9,0H39.27A39.32,39.32,0,0,0,0,39.27V657.59a39.27,39.27,0,1,0,78.54,0v-579H639.9A39.32,39.32,0,0,0,679.17,39.27Z')
-      path(d='M700.69,136.32,398,136.25a39.27,39.27,0,0,0-39.3,39.27v0a39.27,39.27,0,0,0,39.24,39.27l263.47.05V685l-440.35-.35V440.26A39.27,39.27,0,0,0,181.79,401h0a39.27,39.27,0,0,0-39.27,39.27V724a39.32,39.32,0,0,0,39.27,39.27l518.89.35A39.32,39.32,0,0,0,740,724.32V175.59A39.32,39.32,0,0,0,700.69,136.32Z')
+      //- path(d='M392.64,445.47a86.07,86.07,0,1,1-86.07,86.07,86.07,86.07,0,0,1,86.07-86.07Zm0,57.38a28.69,28.69,0,1,0,28.69,28.69,28.69,28.69,0,0,0-28.69-28.69Zm0,0')
+      //- path(d='M478.71,371.28l37.1,37.1a28.69,28.69,0,0,0,40.57-40.57l-86.07-86.07c-18.08-18.08-49-5.28-49,20.28V531.54a28.69,28.69,0,0,0,57.38,0Zm0,0')
+      //- path(d='M679.17,39.27A39.32,39.32,0,0,0,639.9,0H39.27A39.32,39.32,0,0,0,0,39.27V657.59a39.27,39.27,0,1,0,78.54,0v-579H639.9A39.32,39.32,0,0,0,679.17,39.27Z')
+      //- path(d='M700.69,136.32,398,136.25a39.27,39.27,0,0,0-39.3,39.27v0a39.27,39.27,0,0,0,39.24,39.27l263.47.05V685l-440.35-.35V440.26A39.27,39.27,0,0,0,181.79,401h0a39.27,39.27,0,0,0-39.27,39.27V724a39.32,39.32,0,0,0,39.27,39.27l518.89.35A39.32,39.32,0,0,0,740,724.32V175.59A39.32,39.32,0,0,0,700.69,136.32Z')
+
+      // 0 0 425.2 425.2
+      path(d='M20,371.91a20,20,0,0,1-20-20V20A20,20,0,0,1,20,0H333.91a20,20,0,0,1,0,40H40V351.91A20,20,0,0,1,20,371.91Z')
+      path(d='M405.2,425.2h-306a20,20,0,0,1-20-20V258a20,20,0,0,1,40,0V385.2h266V122h-214a20,20,0,1,1,0-40h234a20,20,0,0,1,20,20V405.2A20,20,0,0,1,405.2,425.2Z')
+      path(d='M259,326.69a18,18,0,0,1-18-18V165A18,18,0,0,1,277,165v143.6A18,18,0,0,1,259,326.69Z')
+      path(d='M317.24,241.35a18,18,0,0,1-12.76-5.29l-58.26-58.26a18,18,0,0,1,25.52-25.52L330,210.55a18,18,0,0,1-12.76,30.81Z')
+      path(d='M223.08,360.18A53.95,53.95,0,1,1,277,306.23,54,54,0,0,1,223.08,360.18Zm0-71.8a17.85,17.85,0,1,0,17.85,17.85A17.87,17.87,0,0,0,223.08,288.38Z')

    g#icon-leaderboard(fill='currentColor')
      // 0 0 805.65 805.58
-      path(d='M757.71,709.68h-709C22.35,709.68.5,730.77,0,756.7a48,48,0,0,0,47.94,48.87H757.71a47.95,47.95,0,0,0,0-95.9Z')
-      path(d='M106.33,628.24a48,48,0,0,0,47.95-47.95V304.72c0-26.37-21.09-48.22-47-48.71a48,48,0,0,0-48.87,47.94V580.3A48,48,0,0,0,106.33,628.24Z')
-      path(d='M402.83,628.24a48,48,0,0,0,47.95-47.95V180.72c0-26.37-21.09-48.22-47-48.71a48,48,0,0,0-48.87,47.94V580.3A48,48,0,0,0,402.83,628.24Z')
-      path(d='M699.33,628.24a48,48,0,0,0,47.95-47.95V48.72c0-26.37-21.09-48.22-47-48.71a48,48,0,0,0-48.87,47.94V580.3A48,48,0,0,0,699.33,628.24Z')
+      //- path(d='M757.71,709.68h-709C22.35,709.68.5,730.77,0,756.7a48,48,0,0,0,47.94,48.87H757.71a47.95,47.95,0,0,0,0-95.9Z')
+      //- path(d='M106.33,628.24a48,48,0,0,0,47.95-47.95V304.72c0-26.37-21.09-48.22-47-48.71a48,48,0,0,0-48.87,47.94V580.3A48,48,0,0,0,106.33,628.24Z')
+      //- path(d='M402.83,628.24a48,48,0,0,0,47.95-47.95V180.72c0-26.37-21.09-48.22-47-48.71a48,48,0,0,0-48.87,47.94V580.3A48,48,0,0,0,402.83,628.24Z')
+      //- path(d='M699.33,628.24a48,48,0,0,0,47.95-47.95V48.72c0-26.37-21.09-48.22-47-48.71a48,48,0,0,0-48.87,47.94V580.3A48,48,0,0,0,699.33,628.24Z')
+
+      //- 0 0 425.22 425.2
+      path(d='M402.08,379.18H23a23,23,0,0,0,0,46H402.08a23,23,0,0,0,0-46Z')
+      path(d='M386.61,352.51a23,23,0,0,0,23-23V23a23,23,0,1,0-46,0V329.5A23,23,0,0,0,386.61,352.51Z')
+      path(d='M212.49,352.51a23,23,0,0,0,23-23V119.86a23,23,0,1,0-46,0V329.5A23,23,0,0,0,212.49,352.51Z')
+      path(d='M38.37,352.51a23,23,0,0,0,23-23V191.81a23,23,0,1,0-46,0V329.5A23,23,0,0,0,38.37,352.51Z')


    g#icon-love(fill='currentColor')
      // 0 0 830.33 740.22
-      path(d='M757.65,76.15A246,246,0,0,0,583.23,3h-1.16A245.74,245.74,0,0,0,416.81,66.39,247.78,247.78,0,0,0,184.66,8.28C98.6,31.19,31,99.18,8.22,185.72a251.29,251.29,0,0,0,47.27,221.2h-1.9L362.54,717.68a75.82,75.82,0,0,0,54.12,22.54h0a75.84,75.84,0,0,0,54.13-22.54l288.37-290.1.08-.08a250.61,250.61,0,0,0-1.59-351.36Zm-58,290-283,284.67L133.78,366.29c-63.11-64.54-62.68-169.12,1-233.14a164.18,164.18,0,0,1,231.5-1l50.41,50.66,50.41-50.66.08-.08a164.08,164.08,0,0,1,276.16,73.66A166.52,166.52,0,0,1,699.65,366.15Z')
+      //- path(d='M757.65,76.15A246,246,0,0,0,583.23,3h-1.16A245.74,245.74,0,0,0,416.81,66.39,247.78,247.78,0,0,0,184.66,8.28C98.6,31.19,31,99.18,8.22,185.72a251.29,251.29,0,0,0,47.27,221.2h-1.9L362.54,717.68a75.82,75.82,0,0,0,54.12,22.54h0a75.84,75.84,0,0,0,54.13-22.54l288.37-290.1.08-.08a250.61,250.61,0,0,0-1.59-351.36Zm-58,290-283,284.67L133.78,366.29c-63.11-64.54-62.68-169.12,1-233.14a164.18,164.18,0,0,1,231.5-1l50.41,50.66,50.41-50.66.08-.08a164.08,164.08,0,0,1,276.16,73.66A166.52,166.52,0,0,1,699.65,366.15Z')
+
+      //- 0 0 459.39 388.44
+      path(d='M229.63,388.44a20,20,0,0,1-10.54-3l-.15-.09c-14.6-7.76-127.16-69.14-187-146.92A153.82,153.82,0,0,1,1.5,123.56,145.67,145.67,0,0,1,60,25.67C96.54-1,139.56-7,184.43,8.27A194.15,194.15,0,0,1,229.7,31,194.15,194.15,0,0,1,275,8.27C319.84-7,362.85-1,399.37,25.67a145.66,145.66,0,0,1,58.53,97.89,153.81,153.81,0,0,1-30.4,114.87c-60.23,78.22-173.73,139.85-187.29,147a19.94,19.94,0,0,1-8.11,2.81A20.22,20.22,0,0,1,229.63,388.44ZM137.12,40.08c-17.13,0-35.5,4.73-53.49,17.88A106,106,0,0,0,41.1,129.21,113.59,113.59,0,0,0,63.59,214c48.69,63.23,137.31,115.61,166.11,131.64,28.8-16,117.42-68.41,166.11-131.64a113.59,113.59,0,0,0,22.49-84.82A106,106,0,0,0,375.76,58C313,12.08,245.54,68.69,242.7,71.12a20,20,0,0,1-26,0C214.66,69.39,179.75,40.08,137.12,40.08Z')
+

    //- g#icon-download-2(fill='currentColor')
    //-   // 0 0 512 512
@ -112,14 +133,22 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19

    g#icon-download-2(fill='currentColor')
      // 0 0 798.85 718.96
-      path(d='M755.47,343.91h0a43.37,43.37,0,0,0-43.37,43.37V632.21l-625.35-.38V387.28a43.37,43.37,0,0,0-43.37-43.37h0A43.37,43.37,0,0,0,0,387.28V675.2a43.42,43.42,0,0,0,43.37,43.37l712.1.39a43.42,43.42,0,0,0,43.37-43.37V387.28A43.37,43.37,0,0,0,755.47,343.91Z')
-      path(d='M367.06,478.66a45.48,45.48,0,0,0,64.24,0L594.72,315.47a45.43,45.43,0,0,0,0-64.27h0a45.43,45.43,0,0,0-64.23,0l-85,84.87V45.95a45.95,45.95,0,0,0-91.9,0V336.68l-85.24-85.24a45.43,45.43,0,0,0-64.25,64.25Z')
+      //- path(d='M755.47,343.91h0a43.37,43.37,0,0,0-43.37,43.37V632.21l-625.35-.38V387.28a43.37,43.37,0,0,0-43.37-43.37h0A43.37,43.37,0,0,0,0,387.28V675.2a43.42,43.42,0,0,0,43.37,43.37l712.1.39a43.42,43.42,0,0,0,43.37-43.37V387.28A43.37,43.37,0,0,0,755.47,343.91Z')
+      //- path(d='M367.06,478.66a45.48,45.48,0,0,0,64.24,0L594.72,315.47a45.43,45.43,0,0,0,0-64.27h0a45.43,45.43,0,0,0-64.23,0l-85,84.87V45.95a45.95,45.95,0,0,0-91.9,0V336.68l-85.24-85.24a45.43,45.43,0,0,0-64.25,64.25Z')
+
+      //- 0 0 425.2 425.2
+      path(d='M404.75,425.2H20.44A20.58,20.58,0,0,1,0,404.48V232.37a20.58,20.58,0,0,1,20.44-20.72,20.58,20.58,0,0,1,20.44,20.72V383.77H384.31V232a20.44,20.44,0,1,1,40.89,0V404.48a20.86,20.86,0,0,1-6,14.65A20.3,20.3,0,0,1,404.75,425.2Z')
+      path(d='M212.6,242a19.63,19.63,0,0,1-19.49-19.75V19.75a19.5,19.5,0,1,1,39,0V222.21A19.63,19.63,0,0,1,212.6,242Z')
+      path(d='M212.6,273.61a21.39,21.39,0,0,1-14.94-6.05l-80.29-77.44a19.94,19.94,0,0,1-.68-27.93,19.32,19.32,0,0,1,27.56-.69l68.34,65.92,68.34-65.92a19.32,19.32,0,0,1,27.56.69,19.94,19.94,0,0,1-.68,27.93l-80.3,77.45A21.4,21.4,0,0,1,212.6,273.61Zm11.94-34.68,0,0Z')

    g#icon-setting(fill='currentColor')
      //- 0 0 821.28 734.37
-      path.cls-1(d='M410.4,513.59a145.48,145.48,0,0,1-73.28-19.87c-69.77-40.54-93.55-130.29-53-200.06a146.35,146.35,0,1,1,253.07,147h0a145.39,145.39,0,0,1-89.05,67.94A147.22,147.22,0,0,1,410.4,513.59Zm.38-230.7a84.75,84.75,0,0,0-21.72,2.85,84.26,84.26,0,1,0,94.43,123.78h0a84.31,84.31,0,0,0-72.71-126.62Z')
-      path.cls-1(d='M573,734.37H248.32a86.27,86.27,0,0,1-74.5-43L11.49,410.2a86.27,86.27,0,0,1,0-86L173.81,43a86.27,86.27,0,0,1,74.5-43H573a86.27,86.27,0,0,1,74.5,43L809.79,324.17a86.27,86.27,0,0,1,0,86L647.47,691.35A86.27,86.27,0,0,1,573,734.37ZM248.32,74.51a11.55,11.55,0,0,0-10,5.76L76,361.42a11.56,11.56,0,0,0,0,11.52L238.34,654.1a11.56,11.56,0,0,0,10,5.76H573a11.55,11.55,0,0,0,10-5.76L745.27,372.94a11.55,11.55,0,0,0,0-11.52L582.94,80.27a11.56,11.56,0,0,0-10-5.76Z')
+      //- path(d='M410.4,513.59a145.48,145.48,0,0,1-73.28-19.87c-69.77-40.54-93.55-130.29-53-200.06a146.35,146.35,0,1,1,253.07,147h0a145.39,145.39,0,0,1-89.05,67.94A147.22,147.22,0,0,1,410.4,513.59Zm.38-230.7a84.75,84.75,0,0,0-21.72,2.85,84.26,84.26,0,1,0,94.43,123.78h0a84.31,84.31,0,0,0-72.71-126.62Z')
+      //- path(d='M573,734.37H248.32a86.27,86.27,0,0,1-74.5-43L11.49,410.2a86.27,86.27,0,0,1,0-86L173.81,43a86.27,86.27,0,0,1,74.5-43H573a86.27,86.27,0,0,1,74.5,43L809.79,324.17a86.27,86.27,0,0,1,0,86L647.47,691.35A86.27,86.27,0,0,1,573,734.37ZM248.32,74.51a11.55,11.55,0,0,0-10,5.76L76,361.42a11.56,11.56,0,0,0,0,11.52L238.34,654.1a11.56,11.56,0,0,0,10,5.76H573a11.55,11.55,0,0,0,10-5.76L745.27,372.94a11.55,11.55,0,0,0,0-11.52L582.94,80.27a11.56,11.56,0,0,0-10-5.76Z')

+      //- 0 0 497.23 440.47
+      path(d='M246.61,312.89a94.65,94.65,0,1,1,94.65-94.65A94.76,94.76,0,0,1,246.61,312.89Zm0-149.53a54.88,54.88,0,1,0,54.88,54.88A54.94,54.94,0,0,0,246.61,163.36Z')
+      path(d='M352.58,436.47H140.65a34.8,34.8,0,0,1-30.05-17.35L4.63,235.59a34.8,34.8,0,0,1,0-34.7l106-183.54A34.8,34.8,0,0,1,140.65,0H352.58a34.8,34.8,0,0,1,30.05,17.35l106,183.54a34.8,34.8,0,0,1,0,34.7l-106,183.54A34.8,34.8,0,0,1,352.58,436.47Zm-209-39.77H349.65l103-178.46-103-178.46H143.58l-103,178.46Zm209-356.93h0Z')

    g#icon-list-add(fill='currentColor')
      //- 0 0 24 24
--- a/src/renderer/components/core/Player.vue
+++ b/src/renderer/components/core/Player.vue
@ -60,6 +60,7 @@ import { formatPlayTime2, getRandom, checkPath, setTitle, clipboardWriteText, de
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import { requestMsg } from '../../utils/message'
 import { isMac } from '../../../common/utils'
+import { player as eventPlayerNames } from '../../../common/hotKey'
 import path from 'path'

 let audio
@ -172,6 +173,7 @@ export default {
    document.removeEventListener('mousemove', this.handleVolumeMsMove)
    document.removeEventListener('mouseup', this.handleVolumeMsUp)
    window.removeEventListener('resize', this.handleResize)
+    this.handleRegisterEvent('off')
  },
  watch: {
    changePlay(n) {
@ -186,6 +188,9 @@ export default {
    'setting.player.togglePlayMethod'(n) {
      audio.loop = n === 'singleLoop'
    },
+    'setting.player.isMute'(n) {
+      audio.muted = n
+    },
    'setting.player.mediaDeviceId'(n) {
      this.setMediaDevice()
    },
@ -230,6 +235,16 @@ export default {
    ...mapMutations(['setVolume']),
    ...mapMutations('list', ['updateMusicInfo']),
    ...mapMutations(['setMediaDeviceId']),
+    handleRegisterEvent(action) {
+      let eventHub = window.eventHub
+      let name = action == 'on' ? '$on' : '$off'
+      eventHub[name](eventPlayerNames.toggle_play.action, this.togglePlay)
+      eventHub[name](eventPlayerNames.next.action, this.handleNext)
+      eventHub[name](eventPlayerNames.prev.action, this.handlePrev)
+      eventHub[name](eventPlayerNames.volume_up.action, this.handleSetVolumeUp)
+      eventHub[name](eventPlayerNames.volume_down.action, this.handleSetVolumeDown)
+      eventHub[name](eventPlayerNames.volume_mute.action, this.handleSetVolumeMute)
+    },
    init() {
      audio = new window.Audio()
      this.setMediaDevice()
@ -238,6 +253,7 @@ export default {
      audio.autoplay = true
      audio.preload = 'auto'
      audio.loop = this.setting.player.togglePlayMethod === 'singleLoop'
+      audio.muted = this.setting.player.isMute

      audio.addEventListener('playing', () => {
        console.log('开始播放')
@ -258,7 +274,7 @@ export default {
        this.handleNext()
      })
      audio.addEventListener('error', () => {
-        // console.log('code', audio.error.code)
+        // console.log('code', audio.error)
        if (!this.musicInfo.songmid) return
        console.log('出错')
        this.stopPlay()
@ -339,6 +355,8 @@ export default {
        },
        offset: 100,
      })
+
+      this.handleRegisterEvent('on')
    },
    async play() {
      console.log('play', this.playIndex)
@ -606,10 +624,17 @@ export default {
    },
    handleVolumeMsMove(e) {
      if (!this.volumeEvent.isMsDown) return
-      let val = this.volumeEvent.msDownVolume + (e.clientX - this.volumeEvent.msDownX) / 70
-      this.volume = val < 0 ? 0 : val > 1 ? 1 : val
+      this.handleSetVolume(this.volumeEvent.msDownVolume + (e.clientX - this.volumeEvent.msDownX) / 70)
+    },
+    handleSetVolumeUp(step = 0.02) {
+      this.handleSetVolume(this.volume + step)
+    },
+    handleSetVolumeDown(step = 0.02) {
+      this.handleSetVolume(this.volume - step)
+    },
+    handleSetVolume(num) {
+      this.volume = num < 0 ? 0 : num > 1 ? 1 : num
      if (audio) audio.volume = this.volume
-      // console.log(val)
    },
    handleCopy(text) {
      clipboardWriteText(text)
--- a/src/renderer/components/core/PlayerDetail.vue
+++ b/src/renderer/components/core/PlayerDetail.vue
@ -333,7 +333,7 @@ export default {
  height: 100%;
  top: 0;
  left: 0;
-  background-color: #fff;
+  background-color: @color-theme_2-background_1;
  z-index: 10;
  // -webkit-app-region: drag;
  overflow: hidden;
@ -489,7 +489,7 @@ export default {
    content: ' ';
    height: 100px;
    width: 100%;
-    background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,#fff 95%);
+    background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
    pointer-events: none;
  }
  &:after {
@ -499,7 +499,7 @@ export default {
    content: ' ';
    height: 100px;
    width: 100%;
-    background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 95%);
+    background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
    pointer-events: none;
  }
 }
@ -645,6 +645,15 @@ each(@themes, {
  :global(#container.@{value}) {
    .container {
      border-left-color: ~'@{color-@{value}-theme}';
+      background-color: ~'@{color-@{value}-theme_2-background_1}';
+    }
+    .right {
+      &:before {
+        background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
+      }
+      &:after {
+        background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
+      }
    }
    .control {
      button {
--- a/src/renderer/components/core/Toolbar.vue
+++ b/src/renderer/components/core/Toolbar.vue
@ -220,6 +220,8 @@ each(@themes, {
  :global(#container.@{value}) {
    .control {
      button {
+        color: ~'@{color-@{value}-theme_2}';
+
        &.min {
          background-color: ~'@{color-@{value}-minBtn}';
        }
--- 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="submit")
+    @keyup.enter="$emit('submit', text)")
 </template>

 <script>
--- a/src/renderer/components/material/SearchInput.vue
+++ b/src/renderer/components/material/SearchInput.vue
@ -24,6 +24,7 @@ div(:class="$style.container")

 <script>
 import { clipboardReadText } from '../../utils'
+import { common as eventCommonNames } from '../../../common/hotKey'
 export default {
  props: {
    placeholder: {
@ -77,9 +78,21 @@ export default {
    },
  },
  mounted() {
-    if (this.$store.getters.setting.search.isFocusSearchBox) this.$refs.dom_input.focus()
+    if (this.$store.getters.setting.search.isFocusSearchBox) this.handleFocusInput()
+    this.handleRegisterEvent('on')
+  },
+  beforeDestroy() {
+    this.handleRegisterEvent('off')
  },
  methods: {
+    handleRegisterEvent(action) {
+      let eventHub = window.eventHub
+      let name = action == 'on' ? '$on' : '$off'
+      eventHub[name](eventCommonNames.focusSearchInput.action, this.handleFocusInput)
+    },
+    handleFocusInput() {
+      this.$refs.dom_input.focus()
+    },
    handleTemplistClick(index) {
      this.sendEvent('listClick', index)
    },
--- a/src/renderer/event/index.js
+++ b/src/renderer/event/index.js
@ -2,22 +2,77 @@ import Vue from 'vue'
 import keyBind from '../utils/keyBind'
 import { rendererOn, rendererSend, NAMES } from '../../common/ipc'
 import { base as baseName } from './names'
+import Store from 'electron-store'
+import { common as hotKeyNamesCommon } from '../../common/hotKey'

 const eventHub = window.eventHub = new Vue()

+const electronStore_hotKey = window.electronStore_hotKey = new Store({
+  name: 'hotKey',
+})
+
+window.isEditingHotKey = false
+const appHotKeyConfig = window.appHotKeyConfig = {
+  local: electronStore_hotKey.get('local'),
+  global: electronStore_hotKey.get('global'),
+}
+
 eventHub.$on(baseName.bindKey, () => {
  keyBind.bindKey((key, type, event, keys) => {
    // console.log(`key_${key}_${type}`)
-    eventHub.$emit(`key_${key}_${type}`, { event, keys, key })
+    eventHub.$emit(baseName.key_down, { event, keys, key, type })
+    // console.log(event, key)
+    if (!window.isEditingHotKey && appHotKeyConfig.local.enable && appHotKeyConfig.local.keys[key]) {
+      if (type == 'up') return
+      eventHub.$emit(appHotKeyConfig.local.keys[key].action)
+      return
+    }
+    eventHub.$emit(`key_${key}_${type}`, { event, keys, key, type })
  })
+  registerCommonEvents()
 })
-eventHub.$on(baseName.unbindKey, keyBind.unbindKey)
+eventHub.$on(baseName.unbindKey, () => {
+  keyBind.unbindKey()
+  unregisterCommonEvents()
+})
+const registerQuit = () => rendererSend(NAMES.mainWindow.quit)
+const registerMin = () => rendererSend(NAMES.mainWindow.min)
+const registerMinToggle = () => rendererSend(NAMES.mainWindow.min_toggle)
+const registerHideToggle = () => rendererSend(NAMES.mainWindow.hide_toggle)

-eventHub.$on(baseName.min, () => rendererSend(NAMES.mainWindow.min))
+eventHub.$on(baseName.min, registerMin)
 eventHub.$on(baseName.max, () => rendererSend(NAMES.mainWindow.max))
 eventHub.$on(baseName.close, () => rendererSend(NAMES.mainWindow.close))

+const registerCommonEvents = () => {
+  eventHub.$on(hotKeyNamesCommon.close.action, registerQuit)
+  eventHub.$on(hotKeyNamesCommon.min.action, registerMin)
+  eventHub.$on(hotKeyNamesCommon.min_toggle.action, registerMinToggle)
+  eventHub.$on(hotKeyNamesCommon.hide_toggle.action, registerHideToggle)
+}
+const unregisterCommonEvents = () => {
+  eventHub.$off(hotKeyNamesCommon.close.action, registerQuit)
+  eventHub.$off(hotKeyNamesCommon.min.action, registerMin)
+  eventHub.$off(hotKeyNamesCommon.min_toggle.action, registerMinToggle)
+  eventHub.$off(hotKeyNamesCommon.hide_toggle.action, registerHideToggle)
+}
+
 rendererOn(NAMES.mainWindow.focus, () => {
  keyBind.clearDownKeys()
  eventHub.$emit(baseName.focus)
 })
+rendererOn(NAMES.mainWindow.key_down, (event, { type, key }) => {
+  console.log(appHotKeyConfig.global.keys[key])
+  if (appHotKeyConfig.global.keys[key]) {
+    window.eventHub.$emit(appHotKeyConfig.global.keys[key].action)
+  }
+})
+rendererOn(NAMES.mainWindow.set_hot_key_config, (event, config) => {
+  // console.log(config)
+  // this.setDesktopLyricConfig(config)
+  // console.log('set_config', JSON.stringify(this.setting) === JSON.stringify(config))
+  for (const type of Object.keys(config)) {
+    window.appHotKeyConfig[type] = config[type]
+  }
+  window.eventHub.$emit(baseName.set_hot_key_config, config)
+})
--- a/src/renderer/event/names.js
+++ b/src/renderer/event/names.js
@ -1,5 +1,6 @@
 const names = {
  base: {
+    key_down: 'key_down',
    bindKey: 'bindKey',
    unbindKey: 'unbindKey',
    focus: 'focus',
@ -7,6 +8,7 @@ const names = {
    max: 'max',
    close: 'close',
    set_config: 'set_config',
+    set_hot_key_config: 'set_hot_key_config',
  },
 }

--- a/src/renderer/lang/cns/view/setting.json
+++ b/src/renderer/lang/cns/view/setting.json
@ -80,6 +80,26 @@
  "download_name3": "歌名",
  "download_select_save_path": "选择歌曲保存路径",

+  "hot_key": "快捷键设置",
+  "hot_key_local_title": "软件内快捷键",
+  "hot_key_global_title": "全局快捷键",
+  "hot_key_tip_input": "请输入新的按键",
+  "hot_key_unset_input": "未设置",
+  "hot_key_common_toggle_close": "退出程序",
+  "hot_key_common_toggle_min": "最小化/还原程序",
+  "hot_key_common_min": "最小化程序",
+  "hot_key_common_toggle_hide": "显示/隐藏程序",
+  "hot_key_common_focus_search_input": "聚焦搜索框",
+  "hot_key_player_toggle_play": "播放/暂停控制",
+  "hot_key_player_prev": "上一首歌曲",
+  "hot_key_player_next": "下一首歌曲",
+  "hot_key_player_volume_up": "增加音量",
+  "hot_key_player_volume_down": "减少音量",
+  "hot_key_player_volume_mute": "静音切换",
+  "hot_key_desktop_lyric_toggle_visible": "开/关桌面歌词",
+  "hot_key_desktop_lyric_toggle_lock": "桌面歌词锁定切换",
+  "hot_key_desktop_lyric_toggle_always_top": "桌面歌词置顶切换",
+
  "network": "网络设置",
  "network_proxy_title": "代理设置（乱设置软件将无法联网）",
  "network_proxy_host": "主机",
--- a/src/renderer/lang/cnt/view/setting.json
+++ b/src/renderer/lang/cnt/view/setting.json
@ -74,6 +74,25 @@
  "download_name2": "歌手 - 歌名",
  "download_name3": "歌名",
  "download_select_save_path": "選擇歌曲保存路徑",
+  "hot_key": "快捷鍵設置",
+  "hot_key_local_title": "軟件內快捷鍵",
+  "hot_key_global_title": "全局快捷鍵",
+  "hot_key_tip_input": "請輸入新的按鍵",
+  "hot_key_unset_input": "未設置",
+  "hot_key_common_toggle_close": "退出程序",
+  "hot_key_common_toggle_min": "最小化/還原程序",
+  "hot_key_common_min": "最小化程序",
+  "hot_key_common_toggle_hide": "顯示/隱藏程序",
+  "hot_key_common_focus_search_input": "聚焦搜索框",
+  "hot_key_player_toggle_play": "播放/暫停控制",
+  "hot_key_player_prev": "上一首歌曲",
+  "hot_key_player_next": "下一首歌曲",
+  "hot_key_player_volume_up": "增加音量",
+  "hot_key_player_volume_down": "減少音量",
+  "hot_key_player_volume_mute": "靜音切換",
+  "hot_key_desktop_lyric_toggle_visible": "開/關桌面歌詞",
+  "hot_key_desktop_lyric_toggle_lock": "桌面歌詞鎖定切換",
+  "hot_key_desktop_lyric_toggle_always_top": "桌面歌詞置頂切換",
  "network": "網絡設置",
  "network_proxy_title": "代理設置（亂設置軟件將無法聯網）",
  "network_proxy_host": "主機",
--- a/src/renderer/lang/en/view/setting.json
+++ b/src/renderer/lang/en/view/setting.json
@ -80,6 +80,26 @@
  "download_name3": "Title only",
  "download_select_save_path": "Select the save path",

+  "hot_key": "Shortcut Key Settings",
+  "hot_key_local_title": "Shortcut Keys in Software",
+  "hot_key_global_title": "Global Shortcut Key",
+  "hot_key_tip_input": "Please enter a new key",
+  "hot_key_unset_input": "Not Set",
+  "hot_key_common_toggle_close": "Quit Program",
+  "hot_key_common_toggle_min": "Minimize/Restore Program",
+  "hot_key_common_min": "Minimize the program",
+  "hot_key_common_toggle_hide": "Show/Hide Program",
+  "hot_key_common_focus_search_input": "Focus Search Box",
+  "hot_key_player_toggle_play": "Play/Pause Control",
+  "hot_key_player_prev": "Previous Song",
+  "hot_key_player_next": "Next Song",
+  "hot_key_player_volume_up": "Increase Volume",
+  "hot_key_player_volume_down": "Reduce Volume",
+  "hot_key_player_volume_mute": "Mute Switch",
+  "hot_key_desktop_lyric_toggle_visible": "Turn on/off desktop lyrics",
+  "hot_key_desktop_lyric_toggle_lock": "Desktop Lyric Lock Switch",
+  "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_host": "Host",
--- a/src/renderer/utils/keyBind.js
+++ b/src/renderer/utils/keyBind.js
@ -60,8 +60,11 @@ const handleKeyDown = event => {
    case 'Meta':
    case 'Shift':
      break
+    case ' ':
+      keys.push('space')
+      break
    default:
-      keys.push(event.key.toLowerCase())
+      keys.push((event.code.includes('Numpad') ? event.code.replace(/^Numpad(\w{1,3})\w*$/i, 'num$1') : event.key).toLowerCase())
      break
  }
  handleEvent('down', event, keys)
@ -75,8 +78,11 @@ const handleKeyUp = event => {
    case 'Control':
      keys.push('ctrl')
      break
+    case ' ':
+      keys.push('space')
+      break
    default:
-      keys.push(event.key.toLowerCase())
+      keys.push((event.code.includes('Numpad') ? event.code.replace(/^Numpad(\w{1,3})\w*$/i, 'num$1') : event.key).toLowerCase())
      break
  }
  handleEvent('up', event, keys)
@ -96,8 +102,9 @@ const unbindKey = () => {
 }

 const clearDownKeys = () => {
-  for (const key of downKeys) {
-    handleSendEvent(key, 'up')
+  let keys = Array.from(downKeys)
+  for (let i = keys.length - 1; i > -1; i--) {
+    handleSendEvent(keys[i], 'up')
  }
  downKeys.clear()
 }
--- a/src/renderer/views/Leaderboard.vue
+++ b/src/renderer/views/Leaderboard.vue
@ -276,7 +276,7 @@ export default {
    }
  }
  :global(.label) {
-    color: rgba(0, 0, 0, 0.95) !important;
+    color: @color-theme_2-font !important;
  }
  :global(.icon) {
    opacity: .6;
@ -364,6 +364,9 @@ export default {
 each(@themes, {
  :global(#container.@{value}) {
    .listsSelect {
+      :global(.label) {
+        color: ~'@{color-@{value}-theme_2-font}' !important;
+      }
      :global(.list) {
        li {
          background-color: ~'@{color-@{value}-theme_2-background_2}';
--- a/src/renderer/views/Setting.vue
+++ b/src/renderer/views/Setting.vue
@ -131,6 +131,31 @@ div.scroll(:class="$style.setting")
      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')")
+
+    dt {{$t('view.setting.hot_key')}}
+    dd
+      h3 {{$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")
+        div(:class="$style.hotKeyItem" v-for="item in hotKeys.local")
+          h4(:class="$style.hotKeyItemTitle") {{$t('view.setting.hot_key_' + item.name)}}
+          material-input.key-bind(:class="$style.hotKeyItemInput" readonly @keyup.prevent :placeholder="$t('view.setting.hot_key_unset_input')"
+            :value="hotKeyConfig.local[item.name] && formatHotKeyName(hotKeyConfig.local[item.name].key)"
+            @focus="handleHotKeyFocus($event, item, 'local')"
+            @blur="handleHotKeyBlur($event, item, 'local')")
+
+      h3 {{$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")
+        div(:class="$style.hotKeyItem" v-for="item in hotKeys.global")
+          h4(:class="$style.hotKeyItemTitle") {{$t('view.setting.hot_key_' + item.name)}}
+          material-input.key-bind(:class="[$style.hotKeyItemInput, hotKeyConfig.global[item.name] && hotKeyStatus[hotKeyConfig.global[item.name].key] && hotKeyStatus[hotKeyConfig.global[item.name].key].status === false ? $style.hotKeyFailed : null]"
+            :value="hotKeyConfig.global[item.name] && formatHotKeyName(hotKeyConfig.global[item.name].key)" @input.prevent readonly :placeholder="$t('view.setting.hot_key_unset_input')"
+            @focus="handleHotKeyFocus($event, item, 'global')"
+            @blur="handleHotKeyBlur($event, item, 'global')")
+
    dt {{$t('view.setting.network')}}
    dd
      h3 {{$t('view.setting.network_proxy_title')}}
@ -241,12 +266,17 @@ import {
  sizeFormate,
  setWindowSize,
 } from '../utils'
-import { rendererSend, NAMES } from '../../common/ipc'
-import { mergeSetting } from '../../common/utils'
+import { rendererSend, rendererInvoke, NAMES } from '../../common/ipc'
+import { mergeSetting, isMac } from '../../common/utils'
 import apiSourceInfo from '../utils/music/api-source-info'
 import fs from 'fs'
 import languageList from '@/lang/languages.json'
 import { base as eventBaseName } from '../event/names'
+import * as hotKeys from '../../common/hotKey'
+import { mainWindow as eventsNameMainWindow, winLyric as eventsNameWinLyric } from '../../main/events/_name'
+
+let hotKeyTargetInput
+let newHotKey

 export default {
  name: 'Setting',
@ -398,9 +428,123 @@ export default {
        controlBtnPosition: 'left',
        apiSource: 'temp',
      },
+      current_hot_key: {
+        local: {
+          enable: false,
+          keys: {},
+        },
+        global: {
+          enable: false,
+          keys: {},
+        },
+      },
      languageList,
      cacheSize: '0 B',
      mediaDevices: [],
+      hotKeys: {
+        local: [
+          {
+            name: hotKeys.player.toggle_play.name,
+            action: hotKeys.player.toggle_play.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.player.prev.name,
+            action: hotKeys.player.prev.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.player.next.name,
+            action: hotKeys.player.next.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.common.focusSearchInput.name,
+            action: hotKeys.common.focusSearchInput.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.common.min.name,
+            action: hotKeys.common.min.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.common.close.name,
+            action: hotKeys.common.close.action,
+            type: eventsNameMainWindow.name,
+          },
+        ],
+        global: [
+          {
+            name: hotKeys.common.min_toggle.name,
+            action: hotKeys.common.min_toggle.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.common.hide_toggle.name,
+            action: hotKeys.common.hide_toggle.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.common.close.name,
+            action: hotKeys.common.close.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.player.toggle_play.name,
+            action: hotKeys.player.toggle_play.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.player.prev.name,
+            action: hotKeys.player.prev.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.player.next.name,
+            action: hotKeys.player.next.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.player.volume_up.name,
+            action: hotKeys.player.volume_up.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.player.volume_down.name,
+            action: hotKeys.player.volume_down.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.player.volume_mute.name,
+            action: hotKeys.player.volume_mute.action,
+            type: eventsNameMainWindow.name,
+          },
+          {
+            name: hotKeys.desktop_lyric.toggle_visible.name,
+            action: hotKeys.desktop_lyric.toggle_visible.action,
+            type: eventsNameWinLyric.name,
+          },
+          {
+            name: hotKeys.desktop_lyric.toggle_lock.name,
+            action: hotKeys.desktop_lyric.toggle_lock.action,
+            type: eventsNameWinLyric.name,
+          },
+          {
+            name: hotKeys.desktop_lyric.toggle_always_top.name,
+            action: hotKeys.desktop_lyric.toggle_always_top.action,
+            type: eventsNameWinLyric.name,
+          },
+        ],
+      },
+      hotKeyConfig: {
+        local: {},
+        global: {},
+      },
+      hotKeyStatus: {
+
+      },
+      isEditHotKey: false,
    }
  },
  watch: {
@ -431,11 +575,15 @@ export default {
  mounted() {
    navigator.mediaDevices.addEventListener('devicechange', this.getMediaDevice)
    window.eventHub.$on(eventBaseName.set_config, this.handleUpdateSetting)
+    window.eventHub.$on(eventBaseName.key_down, this.handleKeyDown)
+    window.eventHub.$on(eventBaseName.set_hot_key_config, this.handleUpdateHotKeyConfig)
    this.init()
  },
  beforeDestroy() {
    navigator.mediaDevices.removeEventListener('devicechange', this.getMediaDevice)
    window.eventHub.$off(eventBaseName.set_config, this.handleUpdateSetting)
+    window.eventHub.$off(eventBaseName.key_down, this.handleKeyDown)
+    window.eventHub.$off(eventBaseName.set_hot_key_config, this.handleUpdateHotKeyConfig)
  },
  methods: {
    ...mapMutations(['setSetting', 'setSettingVersion', 'setVersionModalVisible']),
@ -446,6 +594,9 @@ export default {
      if (!window.currentWindowSizeId) window.currentWindowSizeId = this.setting.windowSizeId
      this.getCacheSize()
      this.getMediaDevice()
+      this.current_hot_key = window.appHotKeyConfig
+      this.initHotKeyConfig()
+      this.getHotKeyStatus()
    },
    handleChangeSavePath() {
      selectDir({
@ -670,6 +821,150 @@ export default {
    handleUpdateSetting(config) {
      this.current_setting = JSON.parse(JSON.stringify(config))
    },
+    initHotKeyConfig() {
+      let config = {}
+      for (const type of Object.keys(this.current_hot_key)) {
+        let typeInfo = this.current_hot_key[type]
+        let configInfo = config[type] = {}
+        for (const key of Object.keys(typeInfo.keys)) {
+          let info = typeInfo.keys[key]
+          if (info.name == null) continue
+          configInfo[info.name] = {
+            key,
+            info,
+          }
+        }
+      }
+      this.hotKeyConfig = config
+    },
+    async handleHotKeyFocus(event, info, type) {
+      await rendererInvoke(NAMES.hotKey.enable, false)
+      window.isEditingHotKey = true
+      this.isEditHotKey = true
+      let config = this.hotKeyConfig[type][info.name]
+      newHotKey = config && config.key
+      hotKeyTargetInput = event.target
+      event.target.value = this.$t('view.setting.hot_key_tip_input')
+    },
+    async handleHotKeyBlur(event, info, type) {
+      await rendererInvoke(NAMES.hotKey.enable, true)
+      window.isEditingHotKey = false
+      this.isEditHotKey = false
+      hotKeyTargetInput = null
+      let config = this.hotKeyConfig[type][info.name]
+      let originKey
+      if (newHotKey) {
+        if (type == 'global' && newHotKey) {
+          try {
+            await rendererInvoke(NAMES.hotKey.set_config, {
+              action: 'register',
+              data: {
+                key: newHotKey,
+                info,
+              },
+            })
+          } catch (error) {
+            console.log(error)
+            return
+          }
+        }
+      }
+      if (config) {
+        if (config.key == newHotKey) return
+        originKey = config.key
+        delete this.current_hot_key[type].keys[config.key]
+      } else if (!newHotKey) return
+
+      if (newHotKey) {
+        for (const tempType of Object.keys(this.current_hot_key)) {
+          if (tempType == type) continue
+          config = this.current_hot_key[tempType].keys[newHotKey]
+          if (config) {
+            console.log(newHotKey, info, config, info.name, config.name)
+            delete this.current_hot_key[tempType].keys[newHotKey]
+            break
+          }
+        }
+        this.current_hot_key[type].keys[newHotKey] = info
+      }
+
+      this.initHotKeyConfig()
+      // console.log(this.current_hot_key.global.keys)
+      if (originKey) {
+        try {
+          await rendererInvoke(NAMES.hotKey.set_config, {
+            action: 'unregister',
+            data: originKey,
+          })
+        } catch (error) {
+          console.log(error)
+        }
+      }
+      await this.handleHotKeySaveConfig()
+      await this.getHotKeyStatus()
+    },
+    formatHotKeyName(name) {
+      if (name.includes('arrow')) {
+        name = name.replace(/arrow(left|right|up|down)/, s => {
+          switch (s) {
+            case 'arrowleft': return '←'
+            case 'arrowright': return '→'
+            case 'arrowup': return '↑'
+            case 'arrowdown': return '↓'
+          }
+        })
+      }
+      if (name.includes('mod')) name = name.replace('mod', isMac ? 'Command' : 'Ctrl')
+      name = name.replace(/(\+|^)[a-z]/g, l => l.toUpperCase())
+      if (name.length > 1) name = name.replace(/\+/g, ' + ')
+      return name
+    },
+    handleKeyDown({ event, keys, key, type }) {
+      // if (!event || event.repeat) return
+      if (!event || event.repeat || type == 'up' || !this.isEditHotKey) return
+      event.preventDefault()
+      // console.log(event, key)
+      switch (key) {
+        case 'delete':
+        case 'backspace':
+          key = ''
+          break
+      }
+      hotKeyTargetInput.value = this.formatHotKeyName(key)
+      // console.log(keys, key, type)
+      newHotKey = key
+    },
+    handleUpdateHotKeyConfig(config) {
+      // console.log(config)
+      for (const type of Object.keys(config)) {
+        this.current_hot_key[type] = config[type]
+      }
+    },
+    async handleHotKeySaveConfig() {
+      // console.log(this.current_hot_key)
+      window.appHotKeyConfig = this.current_hot_key
+      await rendererInvoke(NAMES.hotKey.set_config, {
+        action: 'config',
+        data: this.current_hot_key,
+        source: eventsNameMainWindow.name,
+      })
+    },
+    async handleEnableHotKey() {
+      await rendererInvoke(NAMES.hotKey.set_config, {
+        action: 'enable',
+        data: this.current_hot_key.global.enable,
+        source: eventsNameMainWindow.name,
+      })
+      await this.handleHotKeySaveConfig()
+      await this.getHotKeyStatus()
+    },
+    getHotKeyStatus() {
+      return rendererInvoke(NAMES.hotKey.status).then(status => {
+        // console.log(status)
+        this.hotKeyStatus = status
+        return status
+      })
+    },
  },
 }
 </script>
@ -804,6 +1099,40 @@ export default {
  }
 }

+.hotKeyContainer {
+  display: flex;
+  flex-flow: row wrap;
+  // margin-top: -15px;
+  margin-bottom: 15px;
+}
+.hotKeyItem {
+  width: 30%;
+  padding-right: 35px;
+  margin-top: 15px;
+  box-sizing: border-box;
+}
+.hotKeyItemTitle {
+  .mixin-ellipsis-1;
+  padding-bottom: 5px;
+  color: @color-theme_2-font-label;
+  font-size: 12px;
+}
+.hotKeyItemInput {
+  width: 100%;
+  box-sizing: border-box;
+  // font-family: monospace;
+  &:focus {
+    background-color: @color-theme_2-active;
+    text-decoration: none;
+  }
+  &::placeholder {
+    color: rgba(197, 197, 197, 0.7)!important;
+  }
+}
+.hotKeyFailed {
+  text-decoration: line-through;
+}
+
 .save-path {
  font-size: 12px;
 }
@ -853,6 +1182,10 @@ each(@themes, {
      }
    }

+    .hotKeyItemTitle {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
+
    .theme {
      display: flex;
      li {