修复播放在空的歌单列表点击播放全部时报错的问题

Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4.
- [Release notes](https://github.com/faye/websocket-extensions-node/releases)
- [Changelog](https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md)
- [Commits](https://github.com/faye/websocket-extensions-node/compare/0.1.3...0.1.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.appveyor.yml

@@ -1,21 +0,0 @@
-platform:
-  - x64
-
-cache:
-  - node_modules
-  - '%APPDATA%\npm-cache'
-  - '%LOCALAPPDATA%\electron\Cache'
-  - '%LOCALAPPDATA%\electron-builder\Cache'
-
-install:
-  - ps: Install-Product node 12 x64
-  - npm install
-
-build_script:
-  - npm run publish:gh
-
-test: off
-
-branches:
-  only:
-    - master

.babelrc

@@ -17,6 +17,9 @@
     ]
   ],
   "plugins": [
-    "@babel/plugin-syntax-dynamic-import"
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-modules-umd",
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-proposal-class-properties"
   ]
 }

.github/ISSUE_TEMPLATE/----.md

@@ -13,10 +13,13 @@ assignees: ''
 - [ ] 我已搜索issue列表(<https://github.com/lyswhut/lx-music-desktop/issues?utf8=✓&q=>)
 
 **描述您想要的解决方案**
-简洁明了地描述您要发生的事情。
+<!-- 简洁明了地描述您要发生的事情。 -->
+
 
 **描述您考虑过的替代方案**
-对您考虑过的所有替代解决方案或功能的简洁明了的描述。
+<!-- 对您考虑过的所有替代解决方案或功能的简洁明了的描述。 -->
+
 
 **其他内容**
-在此处添加有关功能请求的任何其他上下文或屏幕截图（直接把图片拖到编辑框即可添加图片）。
+<!-- 在此处添加有关功能请求的任何其他上下文或屏幕截图（直接把图片拖到编辑框即可添加图片）。 -->
+

.github/ISSUE_TEMPLATE/--bug.md

@@ -13,7 +13,8 @@ assignees: ''
 - [ ] 我已搜索issue列表(<https://github.com/lyswhut/lx-music-desktop/issues?utf8=✓&q=>)
 
 **描述错误**
-清楚简洁地说明错误是什么。
+<!-- 清楚简洁地说明错误是什么。 -->
+
 
 **重现**
 重现行为的步骤：
@@ -22,15 +23,20 @@ assignees: ''
 3.向下滚动到“ ....”
 4.看到错误
 
+
 **预期行为**
-对您期望发生的事情的简洁明了的描述。
+<!-- 对您期望发生的事情的简洁明了的描述。 -->
+
 
 **截图**
-如果适用，请添加屏幕截图以帮助解释您的问题（直接把图片拖到编辑框即可添加图片）。
+<!-- 如果适用，请添加屏幕截图以帮助解释您的问题（直接把图片拖到编辑框即可添加图片）。 -->
+
 
 **环境：**
   -操作系统及版本：[例如：Windows 10 64位 18362.156]
-  -软件安装包及版本：[例如：Windows 64位绿色版 1.0.0]
+  -软件安装包及版本：[例如：1.0.0 安装版]
+
 
 **其他内容**
-在此处添加有关该问题的任何其他上下文。
+<!-- 在此处添加有关该问题的任何其他上下文。 -->
+

.github/workflows/beta-pack.yml

@@ -0,0 +1,225 @@
+name: Build Beta
+
+on:
+  push:
+    branches:
+      - beta
+
+jobs:
+  Windows:
+    name: Windows
+    runs-on: windows-latest
+    steps:
+      - name: Check out git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Cache file
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            %APPDATA%\npm-cache
+            %LOCALAPPDATA%\electron\Cache
+            %LOCALAPPDATA%\electron-builder\Cache
+          key: ${{ runner.os }}-build-caches-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build src code
+        run: npm run build:src
+
+      - name: Build Package Setup x64
+        run: npm run pack:win:setup:x64
+      - name: Upload Artifact Setup x64
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-x64-Setup
+          path: build/* x64 Setup.exe
+
+      - name: Build Package Setup x86
+        run: npm run pack:win:setup:x86
+      - name: Upload Artifact Setup x86
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-x86-Setup
+          path: build/* x86 Setup.exe
+
+      - name: Build Package Setup x86_64
+        run: npm run pack:win:setup:x86_64
+      - name: Upload Artifact Setup x86_64
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-x86_64-Setup
+          path: build/*x86_64 Setup.exe
+
+      - name: Build Package 7z x64
+        run: npm run pack:win:7z:x64
+      - name: Upload Artifact 7z x64
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-win_x64-green
+          path: build/*win_x64 green.7z
+
+      - name: Build Package 7z x86
+        run: npm run pack:win:7z:x86
+      - name: Upload Artifact 7z x86
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-win_x86-green
+          path: build/*win_x86 green.7z
+
+      - name: Build Package 7z arm64
+        run: npm run pack:win:7z:arm64
+      - name: Upload Artifact 7z arm64
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-win_arm64-green
+          path: build/*win_arm64 green.7z
+
+  Mac:
+    name: Mac
+    runs-on: macos-latest
+    steps:
+      - name: Check out git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Cache file
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            $HOME/.cache/electron
+            $HOME/.cache/electron-builder
+            $HOME/.npm/_prebuilds
+          key: ${{ runner.os }}-build-caches-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build src code
+        run: npm run build:src
+
+      - name: Build Package dmg
+        run: |
+          npm run publish:mac:dmg
+          npm run publish:mac:dmg:arm64
+        env:
+          ELECTRON_CACHE: $HOME/.cache/electron
+          ELECTRON_BUILDERCACHE: $HOME/.cache/electron-builder
+
+      - name: Upload Artifact dmg
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-mac-dmg
+          path: |
+            build/*.dmg
+            !build/*-arm64.dmg
+      - name: Upload Artifact dmg
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-mac-dmg-arm64
+          path: build/*-arm64.dmg
+
+  Linux:
+    name: Linux
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install package
+        run: sudo apt-get install -y rpm libarchive-tools
+
+      - name: Check out git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Cache file
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            $HOME/.cache/electron
+            $HOME/.cache/electron-builder
+            $HOME/.npm/_prebuilds
+          key: ${{ runner.os }}-build-caches-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build src code
+        run: npm run build:src
+
+      - name: Build Package deb x64
+        run: npm run pack:linux:deb:x64
+      - name: Upload Artifact deb x64
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-deb-x64
+          path: build/* x64.deb
+
+      - name: Build Package deb x86
+        run: npm run pack:linux:deb:x86
+      - name: Upload Artifact deb x86
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-deb-x86
+          path: build/* x86.deb
+
+      - name: Build Package deb arm64
+        run: npm run pack:linux:deb:arm64
+      - name: Upload Artifact deb arm64
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-deb-arm64
+          path: build/* arm64.deb
+
+      - name: Build Package deb armv7l
+        run: npm run pack:linux:deb:armv7l
+      - name: Upload Artifact deb armv7l
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-deb-armv7l
+          path: build/* armv7l.deb
+
+      - name: Build Package x64 appImage
+        run: npm run pack:linux:appImage
+      - name: Upload Artifact x64 appImage
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-x64-appImage
+          path: build/* x64.AppImage
+
+      - name: Build Package x64 rpm
+        run: npm run pack:linux:rpm
+      - name: Upload Artifact x64 rpm
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-x64-rpm
+          path: build/* x64.rpm
+
+      - name: Build Package x64 pacman
+        run: npm run pack:linux:pacman
+      - name: Upload Artifact x64 pacman
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-x64-pacman
+          path: build/* x64.pacman

.github/workflows/release.yml

@@ -0,0 +1,135 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  Windows:
+    name: Windows
+    runs-on: windows-latest
+    steps:
+      - name: Check out git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Cache file
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            %APPDATA%\npm-cache
+            %LOCALAPPDATA%\electron\Cache
+            %LOCALAPPDATA%\electron-builder\Cache
+          key: ${{ runner.os }}-build-caches-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build src code
+        run: npm run build:src
+
+      - name: Release package
+        run: |
+          npm run publish:win:setup:x64:always
+          npm run publish:win:setup:x86
+          npm run publish:win:setup:x86_64
+          npm run publish:win:7z:x64
+          npm run publish:win:7z:x86
+          npm run publish:win:7z:arm64
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BT_TOKEN: ${{ secrets.BT_TOKEN }}
+
+  Mac:
+    name: Mac
+    runs-on: macos-latest
+    steps:
+      - name: Check out git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Cache file
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            $HOME/.cache/electron
+            $HOME/.cache/electron-builder
+            $HOME/.npm/_prebuilds
+          key: ${{ runner.os }}-build-caches-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build src code
+        run: npm run build:src
+
+      - name: Release package
+        run: |
+          npm run publish:mac:dmg:always
+          npm run publish:mac:dmg:arm64
+        env:
+          ELECTRON_CACHE: $HOME/.cache/electron
+          ELECTRON_BUILDERCACHE: $HOME/.cache/electron-builder
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BT_TOKEN: ${{ secrets.BT_TOKEN }}
+
+  Linux:
+    name: Linux
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install package
+        run: sudo apt-get install -y rpm libarchive-tools
+
+      - name: Check out git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Cache file
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            $HOME/.cache/electron
+            $HOME/.cache/electron-builder
+            $HOME/.npm/_prebuilds
+          key: ${{ runner.os }}-build-caches-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build src code
+        run: npm run build:src
+
+      - name: Release package
+        run: |
+          npm run publish:linux:deb:x64:always
+          npm run publish:linux:deb:x86
+          npm run publish:linux:deb:arm64
+          npm run publish:linux:deb:armv7l
+          npm run publish:linux:appImage
+          npm run publish:linux:rpm
+          npm run publish:linux:pacman
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BT_TOKEN: ${{ secrets.BT_TOKEN }}

.travis.yml

@@ -1,49 +0,0 @@
-language: node_js
-node_js: 12
-
-matrix:
-  include:
-    - os: osx
-      osx_image: xcode10.2
-      env:
-        - ELECTRON_CACHE=$HOME/.cache/electron
-        - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
-
-    - os: linux
-      dist: trusty
-      sudo: required
-      addons:
-        apt:
-          packages:
-            - rpm
-            - bsdtar
-
-cache:
-  directories:
-    - node_modules
-    - $HOME/.cache/electron
-    - $HOME/.cache/electron-builder
-    - $HOME/.npm/_prebuilds
-
-notifications:
-  email: false
-
-script:
-  - node --version
-  - npm --version
-  - |
-    if [ "$TRAVIS_OS_NAME" == "linux" ]; then
-      npm install && npm run publish:gh:linux
-    else
-      npm run publish:gh:mac
-    fi
-
-before_cache:
-  - rm -rf $HOME/.cache/electron-builder/wine
-
-# only run this script on pull requests and merges into
-# the 'master' and 'prod' branches
-branches:
-  only:
-    - master
-    - dev

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "path-intellisense.mappings": {
+    "@main/*": "${workspaceFolder}/src/main/*",
+    "@renderer/*": "${workspaceFolder}/src/renderer/*",
+    "@lyric/*": "${workspaceFolder}/src/renderer-lyric/*",
+    "@static/*": "${workspaceFolder}/src/static/*",
+    "@common/*": "${workspaceFolder}/src/common/*",
+  }
+}

CHANGELOG.md

@@ -6,6 +6,379 @@ Project versioning adheres to [Semantic Versioning](http://semver.org/).
 Commit convention is based on [Conventional Commits](http://conventionalcommits.org).
 Change log format is based on [Keep a Changelog](http://keepachangelog.com/).
 
+## [1.10.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.9.0...v1.10.0) - 2021-05-19
+
+lx music移动端已经发布了，使用习惯仍跟桌面版一样，不过功能、界面仍比较简单，有兴趣的可以去体检一下，项目地址：
+https://github.com/lyswhut/lx-music-mobile#readme
+
+### 新增
+
+- 排行榜界面添加播放、收藏整个排行榜功能，可以右击排行榜名字后，在弹出的右键菜单中使用。注：收藏、播放存在分页的排行榜时需等待操作完成后才能切换排行榜，不然会导致操作中断。
+- 新增Mac arm64位dmg包的构建
+
+### 修复
+
+- 修复全局快捷键对桌面歌词无效的问题
+- 修复快捷键设置框内的提示问题
+- 修复在当前正常播放的列表中使用稍后播放功能时，播放完后稍后播放的歌曲后不会恢复原来播放位置播放的问题
+- 修复kw部分歌单无法打开的问题
+- 修复wy源的歌曲音质匹配问题
+- 修复mg源歌单标签、排行榜歌曲列表无法加载的问题
+- 修复了一个歌曲下载失败时不会跳过任务的问题
+
+### 其他
+
+- 更新 Electron 到 12.0.8
+
+## [1.9.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.8.2...v1.9.0) - 2021-04-24
+
+### 新增
+
+- 新增启动参数`-dhmkh`，此参数将禁用Chromium的Hardware Media Key Handling特性，用于解决漫步者部分型号耳机与本程序冲突导致耳机意外关机的问题
+- 新增Windows arm64位免安装版的构建
+- 新增黑色皮肤“黑灯瞎火”，有关于皮肤配色的建议欢迎反馈
+- 新增自动换源下载功能，默认关闭，当无法从歌曲的原始源下载时，将尝试切换到其他源下载，注：此功能不100%保证换源后的歌曲版本与原版一致
+
+### 优化
+
+- 程序启动时对数据文件做读取校验，数据出现损坏时自动备份损坏的数据，若出现数据读取错误的弹窗并出现我的列表丢失时可到GitHub或加群反馈
+- 当设置-代理启用，但主机地址为空的时，将不再使用代理配置进行网络连接，并且在离开设置界面时自动禁用代理
+- 优化歌曲自动换源匹配
+- 分离歌词与歌曲列表信息的保存，以减小列表列表文件损坏的几率
+- 兼容打开咪咕移动端分享的歌单链接，添加打开歌单的信息显示
+
+### 修复
+
+- 修复备份与恢复功能在恢复数据时某些设置不立即生效的问题
+- 修正设置页“搜索设置”部分内容的缩进显示问题
+- 修复正在播放“稍后播放”的歌曲时，对“稍后播放”前播放的列表进行添加、删除操作会导致切歌的问题
+
+## [1.8.2](https://github.com/lyswhut/lx-music-desktop/compare/v1.8.1...v1.8.2) - 2021-03-09
+
+### 修复
+
+- 修复歌曲ID存储变更导致酷狗图片获取失败的问题
+- 修复收藏的在线列表id迁移保存出错的问题
+
+## [1.8.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.8.0...v1.8.1) - 2021-03-07
+
+### 修复
+
+- 修复歌词翻译的主题颜色适配问题
+
+## [1.8.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.7.1...v1.8.0) - 2021-03-07
+
+### 新增
+
+- 新增设置-其他-列表缓存信息清理功能，注：此功能一般情况下不要使用
+- 新增启动参数`-play`，可以在启动软件时播放指定歌单，使用方法看Readme.md的"启动参数"部分
+- 新增逐字歌词播放，默认开启，可到设置界面关闭，注：本功能目前仅对酷狗源的歌曲有效
+- 新增自定义源功能，源编写规则可以去常见问题查看
+
+### 优化
+
+- 允许播放除了搜索列表以外的所有歌曲，即原来没有播放按钮或者灰色的歌曲都可以去尝试点击播放。注：该功能的原理是尝试自动切换到其他源播放，所以不一定会播放成功，特别是对于那些独家的资源
+- 优化单首歌曲的“添加到列表”弹窗歌曲列表状态的显示；现在在收藏单首歌曲时，若列表存在本歌曲则列表名字将变成灰色不可点击状态。总的来说，在添加单首歌曲时若列表名是灰色，则证明当前歌曲已在那个列表中
+- 将歌词翻译放到原文的下方，同时新增当前播放翻译的高亮功能
+
+### 移除
+
+- 移除虾米源。注：虽然已移除该源，但仍可尝试去播放之前添加的歌曲，虽然不一定会成功
+
+### 修复
+
+- 修复音乐搜索列表的稍后播放功能无效的问题
+- 修复搜索列表双击不支持播放的源时会导致切歌的问题
+- 修复歌单列表加载失败时无法进入歌单打开界面的问题
+- 修复mg源歌单列表无法加载的问题
+- 修复kg跳转到官方歌曲详情页的歌曲无法播放的问题
+- 修复我的列表的歌曲添加到其他列表时不排除当前列表的问题
+- 修复在下载列表右击未下载完成的歌曲弹出的右击菜单中没有开始下载选项的问题
+
+### 变更
+
+- 歌词翻译显示功能修改为默认关闭，注：此变更仅影响首次安装软件的用户
+
+### 其他
+
+- 更新electron到v9.4.4
+
+## [1.7.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.7.0...v1.7.1) - 2021-01-30
+
+### 修复
+
+- 修复非透明模式下右侧滚动条无法拖动的问题
+- 修复MAC下xm音乐滑块验证问题
+
+## [1.7.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.6.1...v1.7.0) - 2021-01-30
+
+### 新增
+
+- 搜索界面新增搜索状态的提示
+- 新增“稍后播放”功能，可在歌曲列表右键菜单使用
+- 新增“记住播放进度”功能的控制，该功能默认不再开启，可到播放设置-记住播放进度开启
+
+### 优化
+
+- 优化播放歌曲换源匹配
+- 优化设置界面设置项的展示
+
+### 修复
+
+- 修复快速切换歌曲时, 会出现播放的歌曲和界面展示的歌曲不一致的问题
+- 修复了一个由版本更新日志显示导致的潜在远程代码执行攻击漏洞，该漏洞影响v1.6.1及之前的所有版本，请务必更新到最新版本
+- 修复xm搜索源验证问题
+
+### 其他
+
+- 更新electron到9.4.2
+
+## [1.6.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.6.0...v1.6.1) - 2021-01-13
+
+### 优化
+
+- 改进自动换源时的歌曲匹配
+
+### 修复
+
+- 修复某些情况下自动换源的时间过长时会终止换源自动切歌的问题
+- 修复自动换源导致的搜索列表每页变成10条数据的问题
+- 降级electron到9.3.3修复部分系统没有声音的问题
+
+## [1.6.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.5.0...v1.6.0) - 2021-01-10
+
+### 新增
+
+- 我的列表右键菜单新增列表排序功能，可调整单曲、多选后的歌曲的顺序。注意：多选排序还将会按照选中歌曲时的顺序排序
+- 添加鼠标提示的自动关闭功能，鼠标长时间（目前是10秒）不动时鼠标提示将会自动关闭
+- 添加鼠标指向歌曲封面的提示（对于进度条左边的歌曲封面，你可能不知道的操作->右击在“我的列表”定位当前播放的歌曲）
+- 隐藏播放详情页按钮添加快速隐藏详情页提示（你可能不知道的操作->在播放详情页内的任意非窗口可拖动区域右键双击可以快速隐藏详情页）
+- 添加桌面歌词字体、透明度调整按钮微调提示（你可能不知道的操作->对于字体、透明度可右击微调）
+- 我的列表右键菜单添加搜索当前歌曲功能
+- 新增`-dha`参数，添加此启动参数将禁用硬件加速启动（Disable Hardware Acceleration），窗口显示有问题时可以尝试添加此参数启动，Linux系统的界面显示有问题时可尝试添加此参数启动，若不行可尝试添加`-dt`参数启动
+- 新增播放自动换源功能~
+
+### 变更
+
+- `-nt`参数更名为`-dt`（Disable Transparent），目前原来的`-nt`参数仍然可用，但将在后续的版本中移除
+
+### 修复
+
+- 修复恢复上次播放的歌曲时在随机播放模式下不把恢复播放的歌曲放入已播放队列的问题（该问题会导致随机模式下会导致未播放完整个列表前就会再次随机到该歌曲，以及无法通过上一曲切回该歌曲）
+- 修复音乐嵌入的封面在 Mac 系统无法显示的问题
+- 修复`-dt`（原来的`-nt`）启动参数不真正生效的问题
+
+## [1.5.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.4.1...v1.5.0) - 2020-12-13
+
+### 新增
+
+- 直接从歌单详情收藏的列表新增同步功能。注意：这将会覆盖本地的目标列表，歌曲将被替换成最新的在线列表
+
+### 优化
+
+- 优化软件启动时恢复上一次播放的歌曲进度功能
+
+### 修复
+
+- 修复MAC平台上下载歌曲封面嵌入无法显示的问题
+- 修复MAC平台首次运行软件最小化、关闭控制按钮默认在右边的问题
+- 修复酷狗源的某些歌曲没有专辑字段导致的列表加载失败问题
+- 修复某些酷狗源歌单链接无法打开的问题
+
+## [1.4.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.4.0...v1.4.1) - 2020-11-25
+
+
+### 修复
+
+- 修复有歌词翻译与无歌词的音乐间切换会导致歌词翻译残留显示的问题
+- 修复歌曲URL过期时，等待刷新URL的自动切换歌曲时间间隔太短的问题
+- 修复某些电脑上的某些歌曲没有声音的问题（升级Electron9.3.4导致的，现降级到9.3.3）
+
+## [1.4.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.3.0...v1.4.0) - 2020-11-21
+
+### 新增
+
+- 托盘菜单新增显示、隐藏主界面选项，为Linux、MAC版添加托盘菜单
+- 新增播放进度信息保存
+
+### 优化
+
+- 移除kg源的歌词文件开头的空白字符串
+
+### 修复
+
+- 修复专辑图片无法嵌入的问题
+- 修复播放状态栏切换“上一首”歌曲按钮提示错误的问题
+- 修复移动单首歌曲时，如果目标列表存在该歌曲，会导致将源列表与目标列表里的目标歌曲移除
+- 修复kg源歌曲信息带有单引号等特殊字符被转义的问题
+
+## [1.3.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.2...v1.3.0) - 2020-11-01
+
+### 新增
+
+- 播放详情页新增歌曲评论加载显示（某些平台暂不支持显示子评论）
+
+### 优化
+
+- 修改播放详情页的歌曲图片的显示效果
+
+### 修复
+
+- 修复小芸源音乐搜索结果最多只有20条搜索结果的问题
+
+## [1.2.2](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.1...v1.2.2) - 2020-10-18
+
+### 修复
+
+- 降级 Electron 到 9.x.x 版本修复 Linux 版桌面歌词窗口变白的问题
+
+## [1.2.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.0...v1.2.1) - 2020-10-18
+
+### 优化
+
+- Linux版的软件界面默认使用圆角与阴影，顺便修复了桌面歌词窗口变白的问题，已在Ubuntu 18.10测试正常，若显示异常可尝试添加`-nt`参数启动
+
+### 修复
+
+- 修复聚合搜索的分页问题
+- 修复代理输入框输入的内容不生效的问题
+
+## [1.2.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.1.1...v1.2.0) - 2020-09-30
+
+提前祝大家中秋&国庆快乐~
+
+### 新增
+
+- 播放控制栏开启/关闭桌面歌词按钮 新增右击按钮时锁定/解锁桌面歌词功能
+
+### 优化
+
+- 优化我的列表滚动条位置的保存逻辑
+- 更新设置-备份与恢复功能的描述
+- 优化软件内鼠标悬停的提示界面
+
+### 修复
+
+- 修复桌面歌词窗口不允许拖出桌面之外的位置计算偏移Bug
+- 修复网易云KTV嗨榜无法加载的问题
+- 修复初始化搜索历史列表功能
+- 修复重启软件后试听列表与收藏列表无法恢复上次的滚动位置的问题
+- 修复歌曲封面无法嵌入的Bug
+- 修复酷狗歌词格式问题
+- 修复关闭切换动画时从搜索候选列表点击内容无效的问题
+
+### 其他
+
+- 更新 Electron 到 v10.1.3
+
+## [1.1.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.1.0...v1.1.1) - 2020-09-19
+
+### 修复
+
+- 修复某些情况下桌面歌词不会播放的问题
+
+## [1.1.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.0.1...v1.1.0) - 2020-09-18
+
+### 新增
+
+- 在歌单详情界面新增播放当前歌单按钮、收藏歌单按钮，注：播放歌单不会将歌曲添加到试听列表
+- 新增`不允许将歌词窗口拖出主屏幕之外`的设置项，默认开启，在连接多个屏幕时想要拖动到其他屏幕时可关闭此设置
+- 新增大部分平台的歌词翻译，感谢 @InoriHimea 提供的[krc解码算法](https://github.com/lyswhut/lx-music-desktop/issues/296#issuecomment-683285784)
+- 新增`显示歌词翻译`设置，默认开启，仅支持某些平台，注：无论该设置是否开启，嵌入或下载歌词时都不会带上翻译
+- 新增`显示切换动画`设置，默认开启，关闭时将基本禁用软件内的所有切换动画
+- 播放状态栏新增桌面歌词的开关、播放模式的切换、歌曲的收藏按钮，Thanks to @andylow for the [icon](https://github.com/lyswhut/lx-music-desktop/pull/309)!
+
+### 修复
+
+- 修复使用全局快捷键还原窗口时，窗口没有获取焦点的问题
+- 修复我的列表搜索对最后一个字符的匹配问题
+- 修复窗口在`较小`模式下最小化/关闭按钮不居中的问题
+
+### 优化
+
+- 桌面歌词当前播放行改为上下居中
+- 为区分静音状态，静音时音量条会变淡，调整音量条时将会取消静音
+- 优化随机播放机制，现在通过`下一曲`切换歌曲时，直到播放完整个列表之前将不会再随机到之前播放过的歌曲，并且通过`上一曲`可以正确播放上一首歌曲
+- 当下载目录没有写入权限时将显示没有写入权限的提示
+
+### 移除
+
+- 移除默认的全局声音媒体快捷键接管
+- 移除对百度音乐的支持，因百度音乐原有的大部分API失效，而且该平台相对其他平台来说音乐太少了，可有可无，以后再看情况恢复
+
+### 其他
+
+- 更新electron到 10.1.2
+
+## [1.0.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.0.0...v1.0.1) - 2020-07-25
+
+### 优化
+
+- 对我的列表歌曲搜索结果进行相似度排序
+
+### 修复
+
+- 修复在 Windows 系统下缩放比非100%时，拖动桌面歌词会自动加大桌面歌词窗口的问题
+
+## [1.0.0](https://github.com/lyswhut/lx-music-desktop/compare/v0.18.2...v1.0.0) - 2020-07-24
+
+### 新增
+
+- 新增`rpm`、`pacman`包的构建（未测试可用性）
+- 新增因系统音频设备列表改变导致的当前音频输出设备改变时是否暂停播放的设置，默认关闭
+- 新增歌曲列表右击菜单
+- 新增自定义列表，创建列表的按钮在表头`#`左侧，鼠标移上去才会显示；编辑列表名字时，按`ESC`键可快速取消编辑，按回车键或使输入框失去焦点即可保存列表名字，右击列表可编辑已创建的列表，“试听列表”与“我的收藏”两个列表固定不可编辑
+- 改变排行榜布局，新增更多排行榜
+- 新增我的列表右键菜单复制歌曲名选项
+- 新增桌面歌词，默认关闭，可到设置或者托盘菜单开启（建议使用全局快捷键控制）；调整字体大小、透明度时，鼠标左击按钮正常调整，右击微调；**Windows 7未开启Aero效果时桌面歌词会有问题**，详情看常见问题解决；Linux版桌面歌词有问题，以后再尝试优化；
+- 新增“清热板蓝”皮肤
+- 新增软件最小化、关闭按钮位置设置，MAC版默认为左边，非MAC为右边，不想用默认的可到设置修改
+- 新增快捷键设置，软件内快捷键默认开启，全局快捷键默认关闭（注：若想开启蓝牙耳机切歌需开启全局快捷键，当快捷键被中划线划掉时，表示当前快捷键被其他程序占用导致注册失败）
+- 新增首次运行时自动根据当前系统使用的语言设置软件显示的语言
+- 新增歌词区域的触摸板、鼠标滚轮等对歌词滚动的支持
+- 为了方便支持正版资源，歌曲列表右击菜单新增跳转到当前歌曲源官方详情页菜单（注意：在本版本之前添加的虾米源歌曲无法跳转详情页，需要移除后重新搜索添加）
+- 新增我的列表内歌曲搜索，在我的列表按`ctrl+f`将显示搜索框；鼠标滑过或键盘上下方向键选择搜索结果；鼠标点击或按回车键定位选中的歌曲；按`ctrl`键的情况下鼠标点击或按回车键确认定位歌曲时，将会在定位歌曲结束后播放该歌曲（搜索框激活的情况下按`esc`可快速清空搜索框/关闭搜索框）
+- 新增托盘图标样式设置，可到设置-其他切换
+- 新增开关下载功能控制，默认关闭，可到设置-下载设置开启
+- 新增将歌词嵌入音频文件中，默认关闭，可到设置-下载设置开启
+- 新增当列表文件损坏时对损坏文件的备份，若出现该情况可打开`%HOMEPATH%\AppData\Roaming\lx-music-desktop`找到`playList.json.bak`尝试手动修复列表文件，列表文件以`JSON`格式存储
+- 新增在歌单详情列表按退格（Backspace）键可快速返回歌单列表
+
+### 优化
+
+- 改进歌曲切换时的歌词滚动效果
+- 优化批量添加、删除播放列表的歌曲操作逻辑，大幅提升批量添加、删除列表歌曲的流畅度
+- 改进歌单列表展示
+- **改进聚合搜索的搜索结果排序**，修复当某些源搜索失败时导致其他源无法显示结果的问题，现在聚合搜索已达到最初的理想效果，为了使排序更精确，**建议同时输入 歌曲名 歌手名 搜索**（歌曲名在前歌手名在后），欢迎体验~！
+- 压缩备份数据文件大小
+
+### 修复
+
+- 修复按住`Ctrl`等键触发多选机制时不松开按键的情况下切换到其他窗口后再松开按键，这时切回软件不按按键都处在多选模式的问题
+- 修复Linux版开启托盘无法退出的问题
+- 修复某些情况下可能导致的音源输出问题
+- 修复某些情况下无法开始下载任务的问题
+- 修复 tab 组件边框溢出问题
+- 修复错误更新试听列表外的歌曲时间的问题
+- 修复网易音乐源歌单、排行榜歌曲列表加载显示的数量与实际不对的问题，同时支持加载大于1000首歌的歌单（歌曲大于1000首会分页），注意：目前软件一下子显示太多歌曲时会卡顿，不建议在同一列表内添加太多歌曲
+- 修复歌曲图片链接没有扩展名的情况下无法嵌入图片的问题
+- 修复无法检测最新版本时弹窗提示的显示
+- 修复某些情况下从托盘还原窗口后无法操作的问题
+- 修复Linux下无法`ctrl+a`全选的问题
+- 修复主题背景图片覆盖不全的问题
+- 修复聚合搜索音源标签的皮肤配色问题
+
+### 更变
+
+- 修改设置-列表-是否显示歌曲源的默认设置为选中（该变更不影响之前的设置）
+- 移除浮动按钮，现在在多选完成后可鼠标右击随意一项在弹出的右键菜单中进行原来悬浮按钮的操作
+- 为了避免出现误会，现在下载弹窗中不可用的音质将直接隐藏
+- 更改初始设置的搜索设置为聚合搜索（该变更不影响之前的设置）
+
+### 其他
+
+- 更新 Electron 到 9.1.1
+
 ## [0.18.2](https://github.com/lyswhut/lx-music-desktop/compare/v0.18.1...v0.18.2) - 2020-05-02
 
 ### 修复

FAQ.md

@@ -2,18 +2,35 @@
 
 在阅读本常见问题后，仍然无法解决你的问题，请提交issue或者加企鹅群`830125506`反馈（无事勿加，入群先看群公告），反馈时请**注明**已阅读常见问题！
 
-## 软件为什么没有桌面歌词与自定义列表功能
+## ~~软件为什么没有桌面歌词与自定义列表功能~~
 
-洛雪音乐的最初定位不是作为播放器开发的，它主要用于**查找歌曲**，软件的播放功能仅用于试听，不建议用作为常用播放器使用，因此无桌面、界面歌词，不可自定义列表等功能。
+洛雪音乐的最初定位不是作为播放器开发的，它主要用于**查找歌曲**，软件的播放功能仅用于试听，不建议用作为常用播放器使用。
 
 ## 歌曲无法试听与下载
 
-该问题解决顺序如下：
+### 所有歌曲都提示 `请求异常😮，可以多试几次，若还是不行就换一首吧。。。`
+
+尝试更换网络，如切换到移动网络，若移动网络还是不行则尝试开关下手机的飞行模式后再试，<br>
+若使用家庭网络的话，可尝试将光猫断电5分钟左右再通电联网后播放。
+
+### 提示`getaddrinfo EAI_AGAIN ...`
+
+尝试在在浏览器打开这个地址`http://ts.tempmusic.tk`，浏览器显示404是正常的，如果不是404那就证明所在网络无法访问接口服务器。
+若网页无法打开或打开来不是404，则可能是DNS的问题，可以尝试以下办法：
+
+1. 将DNS改成自动获取试试（注：改完可能需要清理下系统DNS缓存才生效）
+2. 手动把DNS改一下，不要用360的DNS，可以把DNS改成`114.114.114.114`、`8.8.8.8`（注：改完可能需要清理下系统DNS缓存才生效）
+
+改完DNS后可能需要重启软件才生效
+
+### 通用解决方法
+
+尝试按以下顺序解决：
 
 1. 尝试更新到最新版本
 2. 尝试切换其他歌曲（或直接搜索该歌曲），若全部歌曲都无法试听与下载则进行下一步
 3. 尝试到 设置-音乐来源 切换到其他接口
-4. 尝试切换网络，比如用手机开热点（目前存在某些网络无法访问接口服务器的情况）
+4. 尝试切换网络，比如用手机开热点（所有歌曲都提示请求异常时可通过此方法解决，或等一两天后再试）
 5. 若还不行请到这个链接查看详情：<https://github.com/lyswhut/lx-music-desktop/issues/5>
 6. 若没有在第5条链接中的第一条评论中看到接口无法使用的说明，则应该是你网络无法访问接口服务器的问题，如果接口有问题我会在那里说明。
 
@@ -23,6 +40,108 @@
 1. 将DNS改成自动获取试试
 2. 手动把DNS改一下，不要用360的DNS，可以把DNS改成`114.114.114.114`、`8.8.8.8`
 
+## 列表多选
+
+从v0.18.0起，列表多选需要键盘配合，想要多选前需按下`Shift`或`Ctrl`键然后再鼠标点击想要选中的内容即可触发多选机制，其中`Shift`键用于连续选择，`Ctrl`键用于不连续选择，`Ctrl+a`用于快速全选。
+
+- 例子一：想要选中1-5项，则先按下`Shift`键后，鼠标点击第一项，再点击第五项即可完成选择；
+- 例子二：想要选中1项与第3项，则先按下`Ctrl`键后，鼠标点击第一项，再点击第三项即可完成选择；
+- 例子三：想要选中当前列表的全部内容，键盘先按下`Ctrl`键不放，然后按`a`键，即可完成选择。
+
+用`Shift`或`Ctrl`选择时，鼠标点击未选中的内容会将其选中，点击已选择的内容会将其取消选择，若想全部取消选择，在不按`Shift`或`Alt`键的情况下，随意点击列表里的一项内容即可全部取消选择。(P.S：`Ctrl`键对应Mac OS上的`Command`键)
+
+注：选完后可用鼠标右击弹出右键菜单操作已选的内容
+
+## 播放整个歌单或排行榜
+
+播放在线列表内的歌曲需要将它们都添加到我的列表才能播放，你可以全选列表内的歌曲然后添加到现有列表或者新创建的列表，然后去播放该列表内的歌曲。
+
+## 无法打开外部歌单
+
+不支持垮源打开歌单，请**确认**你需要打开的歌单平台是否与软件标签所写的**歌单源**对应（不一样的话请通过右上角切换歌单源）；<br>
+对于分享出来的歌单，若打开失败，可尝试先在浏览器中打开后，再从浏览器地址栏复制URL地址到软件打开；<br>
+或者如果你知道歌单 id 也可以直接输入歌单 id 打开。<br>
+
+## 界面异常（界面显示不完整）
+
+### Windows 7 下界面异常
+
+由于软件默认使用了透明窗口，根据Electron官方文档的[说明](https://electronjs.org/docs/api/frameless-window#%E5%B1%80%E9%99%90%E6%80%A7)：
+> 在 windows 操作系统上, 当 DWM 被禁用时, 透明窗口将无法工作。
+
+因此，当 win7 没有使用**AERO**主题时界面将会显示异常，开启AERO的方法请自行百度：`win7开启aero效果`（开启后可看到任务栏变透明）。<br>
+从`0.14.0`版本起不再强制要求开启透明效果，若你实在不想开启（若非电脑配置太低，墙裂建议开启！），可通过添加运行参数`-dt`来运行程序即可，例如：`.\lx-music-desktop.exe -dt`，添加方法可自行百度“给快捷方式加参数”，该参数的作用是用来控制程序是否使用非透明窗口运行。
+
+注：启用**AERO**主题后，若软件出现黑边框，则重启软件即可恢复正常。
+
+对于一些完全无法正常显示界面、开启了AERO后问题仍未解决的情况，请阅读下面的 **软件启动后，界面无法显示** 解决。
+
+### Linux 下界面异常
+
+根据Electron里issue的[解决方案](https://github.com/electron/electron/issues/2170#issuecomment-736223269)，<br>
+若你遇到透明问题可尝试添加启动参数 `-dha` 来禁用硬件加速，例如：`.\lx-music-desktop.exe -dha`。
+
+注：v1.6.0及之后的版本才支持`-dha`参数
+
+## 软件启动后，界面无法显示
+
+对于软件启动后，可以在任务栏看到软件，但软件界面在桌面上无任何显示，或者整个界面偶尔闪烁的情况。<br>
+原始问题看：<https://github.com/electron/electron/issues/19569#issuecomment-522231083><br>
+解决办法：下载`.NET Framework 4.7.1`或**更高**版本安装即可(建议安装最新版，若安装过程中遇到问题可尝试自行百度解决)。<br>
+微软官方下载地址：<https://dotnet.microsoft.com/download/dotnet-framework><br>
+下载`Runtime(运行时)`版即可，安装完成后可能需要重启才生效。
+
+若还是不行可尝试以下操作：
+
+- 更新显卡驱动
+- 添加启动参数`-dha`运行（添加的方法请自行百度“给快捷方式加参数”）
+- 尝试将绿色版的软件放在**桌面**或**我的文档**运行
+
+## 安装版安装失败，提示安装程序并未成功地运行完成
+
+对于部分电脑出现安装失败的问题，可以做出以下尝试：
+
+- 若你之前可以安装成功，但现在安装失败，就去**控制面板-程序和功能**或用第三方卸载工具看下有没有之前的版本残留，若同时在不同路径下安装了多个版本就可能会出现该问题，这种情况卸载掉所有版本重新安装即可
+- 清理安装路径下的残留文件
+- 清理注册表（建议用清理工具清理）
+
+## 软件无法联网
+
+软件的排行榜、歌单、搜索列表**都**无法加载：
+
+- 检查是否在设置界面开启了代理（当代理乱设置时软件将无法联网）
+- 检查软件是否被第三方软件/防火墙阻止联网
+
+## 桌面歌词显示异常
+
+### Windows 7 系统桌面歌词显示异常
+
+Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看上面的 **Windows 7 下界面异常** 方法解决。
+
+### MAC OS 系统、桌面歌词有残留阴影
+
+此问题似乎是Electron的Bug，翻阅electron的issue列表发现该Bug以存在很久了，遗憾的是没有一直都没有修复，由于我没有装MAC平台的电脑，没法重现，就没再去electron提issue，更多信息看：
+
+- <https://github.com/electron/electron/issues/21173>
+- <https://github.com/electron/electron/issues/14304>
+
+### Linux 系统下桌面歌词窗口异常
+
+`v1.2.1`以前的版本在 Ubuntu 18.10 下第一次开启桌面歌词时歌词窗口会变白，需要关闭后再开启，
+`v1.2.1`及之后的版本已修复该问题。
+
+其他 Linux 系统未测试，如有异常也是意料之中，目前不打算去处理 Linux 平台的桌面歌词问题，但你可以尝试按照`Linux 下界面异常`的解决方案去解决。
+
+## 歌曲下载失败，提示 `ENOENT: no such file or directory, mkdir`
+
+更换下载歌曲目录即可解决（一般是设置的歌曲下载目录没有读写权限导致的）。
+
+## 使用软件时导致耳机意外关机
+
+据反馈，漫步者部分型号的耳机与本软件一起使用时将会导致耳机意外关机，
+详情看：<https://github.com/lyswhut/lx-music-desktop/issues/457>，
+若出现该问题可尝试添加`-dhmkh`启动参数解决，启动参数添加方法请自行百度“windows给快捷方式添加启动参数”。
+
 ## 软件安装包说明
 
 软件发布页及网盘中有多个类型的安装文件，以下是对这些类型文件的说明：
@@ -45,37 +164,11 @@
 注意：**绿色版**的软件自动更新功能**不可用**，建议使用安装版！！<br>
 注意：**Mac版**、**Linux deb**版不支持自动更新！
 
-## Windows 7 下界面异常（界面显示不完整）
+## 更新已收藏的在线歌单
 
-由于软件默认使用了透明窗口，根据Electron官方文档的[说明](https://electronjs.org/docs/api/frameless-window#%E5%B1%80%E9%99%90%E6%80%A7)：
+该功能仅对直接从歌单详情页点“收藏”按钮收藏的歌单有效，可右击已收藏的列表名从弹出的菜单中选择“同步”使用该功能，
-> 在 windows 操作系统上, 当 DWM 被禁用时, 透明窗口将无法工作。
 
-因此，当 win7 没有使用**AERO**主题时界面将会显示异常，开启AERO的方法请自行百度：`win7开启aero效果`（开启后可看到任务栏变透明）。<br>
+需要注意的是：这将会覆盖本地的目标列表，歌曲将被替换成最新的在线列表。
-从`0.14.0`版本起不再强制要求开启透明效果，若你实在不想开启（若非电脑配置太低，墙裂建议开启！），可通过添加运行参数`-nt`来运行程序即可，例如：`.\lx-music-desktop.exe -nt`，添加方法可自行百度“给快捷方式加参数”，该参数的作用是用来控制程序是否使用非透明窗口运行。
-
-对于一些完全无法正常显示界面的情况，请阅读下面的 **软件启动后，界面无法显示**
-
-## 软件启动后，界面无法显示
-
-软件启动后，可以在任务栏看到软件，但软件界面在桌面上无任何显示。<br>
-原始问题看：<https://github.com/electron/electron/issues/19569#issuecomment-522231083><br>
-解决办法：下载`.NET Framework 4.7.1`或**更高**版本安装即可(建议安装最新版，若安装过程中遇到问题可尝试自行百度解决)。<br>
-微软官方下载地址：<https://dotnet.microsoft.com/download/dotnet-framework><br>
-下载`Runtime(运行时)`版即可，安装完成后可能需要重启才生效。
-
-若还是不行可尝试以下操作：
-
-- 更新显卡驱动
-- 尝试将绿色版的软件放在**桌面**或**我的文档**运行
-
-## 安装版安装失败，提示安装程序并未成功地运行完成
-
-对于部分电脑出现安装失败的问题，可以做出以下尝试：
-
-- 若你之前可以安装成功，但现在安装失败，就去**控制面板-程序和功能**或用第三方卸载工具看下有没有之前的版本残留，若同时在不同路径下安装了多个版本就可能会出现该问题，这种情况卸载掉所有版本重新安装即可
-- 清理安装路径下的残留文件
-- 以管理员权限打开`cmd`，输入`sfc /scannow`回车等待检查完成重启电脑
-- 若还是不行我也没办法了。。
 
 ## 缺少`xxx.dll`
 
@@ -86,22 +179,172 @@
 
 ## 杀毒软件提示有病毒或恶意行为
 
-本人只能保证我写的代码不包含任何**恶意代码**、**收集用户信息**的行为，并且软件代码已开源，请自行查阅，软件安装包也是由CI拉取源代码构建，构建日志：[windows包](https://ci.appveyor.com/project/lyswhut/lx-music-desktop)、[Mac/Linux包](https://travis-ci.org/lyswhut/lx-music-desktop)<br>
+本人只能保证我写的代码不包含任何**恶意代码**、**收集用户信息**的行为，并且软件代码已开源，请自行查阅，软件安装包也是由CI拉取源代码构建，构建日志：[GitHub Actions](https://github.com/lyswhut/lx-music-desktop/actions)<br>
 尽管如此，但这不意味着软件是100%安全的，由于软件使用了第三方依赖，当这些依赖存在恶意行为时（[供应链攻击](https://docs.microsoft.com/zh-cn/windows/security/threat-protection/intelligence/supply-chain-malware)），软件也将会受到牵连，所以我只能尽量选择使用较多人用、信任度较高的依赖。<br>
 当然，以上说明建立的前提是在你所用的安装包是从**本项目主页上写的链接**下载的，或者有相关能力者还可以下载源代码自己构建安装包。
 
-从`0.17.0`起，由于加入了音频输出设备切换功能，该功能调用了 [MediaDevices.enumerateDevices()](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices)，可能导致安全软件提示洛雪要访问摄像头（目前发现卡巴斯基会提示），但实际上没有用到摄像头，并且摄像头的提示灯也不会亮，你可以选择阻止访问。
+从`v0.17.0`起，由于加入了音频输出设备切换功能，该功能调用了 [MediaDevices.enumerateDevices()](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices)，可能导致安全软件提示洛雪要访问摄像头（目前发现卡巴斯基会提示），但实际上没有用到摄像头，并且摄像头的提示灯也不会亮，你可以选择阻止访问。
 
 最后，若出现杀毒软件报毒、存在恶意行为，请自行判断选择是否继续使用本软件！
 
-## 软件无法联网
+## 自定义源脚本编写说明
 
-软件的排行榜、歌单、搜索列表**都**无法加载：
+文件请使用UTF-8编码格式编写，脚本所用编程语言为JavaScript，可以使用ES6+语法，脚本与应用的交互是使用类似事件收发的方式进行，这是一个基本的脚本例子：
 
-- 检查是否在设置界面开启了代理（当代理乱设置时软件将无法联网）
+```js
-- 检查软件是否被第三方软件/防火墙阻止联网
+/**
+ * @name 测试音乐源
+ * @description 我只是一个测试音乐源哦
+ * @version 1.0.0
+ * @author xxx
+ * @homepage http://xxx
+ */
 
-## 无法打开外部歌单
 
-对于分享出来的歌单，若打开失败，可尝试先在浏览器中打开后，再从浏览器地址栏复制URL地址到软件打开；<br>
+const { EVENT_NAMES, request, on, send } = window.lx
-或者如果你知道歌单 id 也可以直接输入歌单 id 打开。<br>
+
+const qualitys = {
+  kw: {
+    '128k': '128',
+    '320k': '320',
+    flac: 'flac',
+  },
+}
+const httpRequest = (url, options) => new Promise((resolve, reject) => {
+  request(url, options, (err, resp) => {
+    if (err) return reject(err)
+    resolve(resp.body)
+  })
+})
+
+const apis = {
+  kw: {
+    musicUrl({ songmid }, quality) {
+      return httpRequest('http://xxx').then(data => {
+        return data.url
+      })
+    },
+  },
+}
+
+// 注册应用API请求事件
+// source 音乐源，可能的值取决于初始化时传入的sources对象的源key值
+// info 请求附加信息，内容根据action变化
+// action 请求操作类型，目前只有musicUrl，即获取音乐URL链接，
+//    当action为musicUrl时info的结构：{type, musicInfo}，
+//        info.type：音乐质量，可能的值有128k / 320k / flac（取决于初始化时对应源传入的qualitys值中的一个），
+//        info.musicInfo：音乐信息对象，里面有音乐ID、名字等信息
+on(EVENT_NAMES.request, ({ source, action, info }) => {
+  // 回调必须返回 Promise 对象
+  switch (action) {
+    // action 为 musicUrl 时需要在 Promise 返回歌曲 url
+    case 'musicUrl':
+      return apis[source].musicUrl(info.musicInfo, qualitys[source][info.type]).catch(err => {
+        console.log(err)
+        return Promise.reject(err)
+      })
+  }
+})
+
+// 脚本初始化完成后需要发送inited事件告知应用
+send(EVENT_NAMES.inited, {
+  status: true, // 初始化成功 or 失败
+  openDevTools: false, // 是否打开开发者工具，方便用于调试脚本
+  sources: { // 当前脚本支持的源
+    kw: { // 支持的源对象，可用key值：kw/kg/tx/wy/mg
+      name: '酷我音乐',
+      type: 'music',  // 目前固定为 music
+      actions: ['musicUrl'], // 目前固定为 ['musicUrl']
+      qualitys: ['128k', '320k', 'flac'], // 当前脚本的该源所支持获取的Url音质，有效的值有：['128k', '320k', 'flac']
+    },
+  },
+})
+
+```
+
+### 自定义源信息
+
+文件的开头必须包含以下注释：
+
+```js
+/**
+ * @name 测试脚本
+ * @description 我只是一个测试脚本
+ * @version 1.0.0
+ * @author xxx
+ * @homepage http://xxx
+ */
+
+```
+
+- `@name `：源的名字，建议不要过长，10个字符以内
+- `@description `：源的描述，建议不要过长，20个字符以内，可不填，不填时必须保留 @description
+- `@version`：源的版本号，可不填，不填时可以删除 @version
+- `@author `：脚本作者名字，可不填，不填时可以删除 @author
+- `@homepage `：脚本主页，可不填，不填时可以删除 @homepage
+
+### `window.lx`
+
+应用为脚本暴露的API对象。
+
+#### `window.lx.EVENT_NAMES`
+
+常量事件名称对象，发送、注册事件时传入事件名时使用，可用值：
+
+| 事件名 | 描述
+| --- | ---
+| `inited` | 脚本初始化完成后发送给应用的事件名，发送该事件时需要传入以下信息：`{status, sources, openDevTools}`<br>`status`：初始化结果（`true`成功，`false`失败）<br>`openDevTools`：是否打开DevTools，此选项可用于开发脚本时的调试<br>`sources`：支持的源信息对象，<br>`sources[kw/kg/tx/wy/mg].name`：源的名字（目前非必须）<br>`sources[kw/kg/tx/wy/mg].type`：源类型，目前固定值需为`music`<br>`sources[kw/kg/tx/wy/mg].actions`：支持的actions，由于目前只支持`musicUrl`，所以固定传`['musicUrl']`即可<br>`sources[kw/kg/tx/wy/mg].qualitys`：该源支持的音质列表，有效的值为`['128k', '320k', 'flac']`，该字段用于控制应用可用的音质类型
+| `request` | 应用API请求事件名，回调入参：`handler({ source, action, info})`，回调必须返回`Promise`对象<br>`source`：音乐源，可能的值取决于初始化时传入的`sources`对象的源key值<br>`info`：请求附加信息，内容根据`action`变化<br>`action`：请求操作类型，目前只有`musicUrl`，即获取音乐URL链接，需要在 Promise 返回歌曲 url，`info`的结构：`{type, musicInfo}`，`info.type`：音乐质量，可能的值有`128k` / `320k` / `flac`（取决于初始化时对应源传入的`qualitys`值中的一个），`info.musicInfo`：音乐信息对象，里面有音乐ID、名字等信息
+
+
+#### `window.lx.on`
+
+事件注册方法，应用主动与脚本通信时使用：
+
+```js
+/**
+ * @param event_name 事件名
+ * @param handler 事件处理回调 -- 注意：注册的回调必须返回 Promise 对象
+ */
+window.lx.on(event_name, handler)
+```
+
+**注意：** 注册的回调必须返回 `Promise` 对象。
+
+#### `window.lx.send`
+
+事件发送方法，脚本主动与应用通信时使用：
+
+```js
+/**
+ * @param event_name 事件名
+ * @param datas 要传给应用的数据
+ */
+window.lx.send(event_name, datas)
+```
+
+#### `window.lx.request`
+
+HTTP请求方法，用于发送HTTP请求，此HTTP请求方法不受跨域规则限制：
+
+```js
+/**
+ * @param url 请求的URL
+ * @param options 请求选项，可用选项有 method / headers / body / form / formData / timeout
+ * @param callback 请求结果的回调 入参：err, resp, body
+ * @return 返回一个方法，调用此方法可以终止HTTP请求
+ */
+const cancelHttp = window.lx.request(url, options, callback)
+```
+
+#### `window.lx.utils`
+
+应用提供给脚本的工具方法：
+
+- `window.lx.utils.buffer.from`：对应Node.js的 `Buffer.from`
+- `window.lx.utils.crypto.aesEncrypt`：AES加密 `aesEncrypt(buffer, mode, key, iv)`
+- `window.lx.utils.crypto.md5`：MD5加密 `md5(str)`
+- `window.lx.utils.crypto.randomBytes`：生成随机字符串 `randomBytes(size)`
+- `window.lx.utils.crypto.rsaEncrypt`：RSA加密 `rsaEncrypt(buffer, key)`
+
+目前仅提供以上工具方法，如果需要其他方法可以开issue讨论。

README.md

@@ -2,8 +2,8 @@
 
 <p align="center">
   <a href="https://github.com/lyswhut/lx-music-desktop/releases"><img src="https://img.shields.io/github/release/lyswhut/lx-music-desktop" alt="Release version"></a>
-  <a href="https://ci.appveyor.com/project/lyswhut/lx-music-desktop"><img src="https://ci.appveyor.com/api/projects/status/flrsqd5ymp8fnte5?svg=true" alt="Build status"></a>
+  <a href="https://github.com/lyswhut/lx-music-desktop/actions/workflows/release.yml"><img src="https://github.com/lyswhut/lx-music-desktop/workflows/Build/badge.svg" alt="Build status"></a>
-  <a href="https://travis-ci.org/lyswhut/lx-music-desktop"><img src="https://travis-ci.org/lyswhut/lx-music-desktop.svg?branch=master" alt="Build status"></a>
+  <a href="https://github.com/lyswhut/lx-music-desktop/actions/workflows/beta-pack.yml"><img src="https://github.com/lyswhut/lx-music-desktop/workflows/Build%20Beta/badge.svg" alt="Build status"></a>
   <a href="https://electronjs.org/releases/stable"><img src="https://img.shields.io/github/package-json/dependency-version/lyswhut/lx-music-desktop/dev/electron/master" alt="Electron version"></a>
   <!-- <a href="https://github.com/lyswhut/lx-music-desktop/releases"><img src="https://img.shields.io/github/downloads/lyswhut/lx-music-desktop/latest/total" alt="Downloads"></a> -->
   <a href="https://github.com/lyswhut/lx-music-desktop/tree/dev"><img src="https://img.shields.io/github/package-json/v/lyswhut/lx-music-desktop/dev" alt="Dev branch version"></a>
@@ -36,7 +36,7 @@
 
 所用技术栈：
 
-- Electron 8
+- Electron 12
 - Vue 2
 
 已支持的平台：
@@ -47,12 +47,12 @@
 
 软件变化请查看：[更新日志](https://github.com/lyswhut/lx-music-desktop/blob/master/CHANGELOG.md)<br>
 软件下载请转到：[发布页面](https://github.com/lyswhut/lx-music-desktop/releases)<br>
-或者到网盘下载（网盘内有MAC、windows版）：`https://t-s.lanzous.com/b0bf2cfa/` 密码：`glqw`<br>
+或者到网盘下载（网盘内有MAC、windows版）：`https://www.lanzoui.com/b0bf2cfa/` 密码：`glqw`（若链接无法打开请百度：蓝奏云链接打不开）<br>
 使用常见问题请转至：[常见问题](https://github.com/lyswhut/lx-music-desktop/blob/master/FAQ.md)
 
 ### 源码使用方法
 
-环境要求：Node.js 12.x+
+环境要求：Node.js 14+
 
 ```bash
 # 开发模式
@@ -62,7 +62,7 @@ npm run dev
 npm run pack:dir
 
 # 构建安装包（Windows版）
-npm run pack
+npm run pack:win
 
 # 构建安装包（Mac版）
 npm run pack:mac
@@ -81,7 +81,16 @@ npm run pack:linux
 目前软件已支持的启动参数如下：
 
 - `-search`  启动软件时自动在搜索框搜索指定的内容，例如：`-search="突然的自我 - 伍佰"`
-- `-nt`  以非透明模式启动，对于未开启AERO效果的win7系统可加此参数启动以确保界面正常显示
+- `-dha`  禁用硬件加速启动（Disable Hardware Acceleration），窗口显示有问题时可以尝试添加此参数启动（v1.6.0起新增）
+- `-dt` 以非透明模式启动（Disable Transparent），对于未开启AERO效果的win7系统可加此参数启动以确保界面正常显示（注：该参数对桌面歌词无效），原来的`-nt`参数已重命名为`-dt`（v1.6.0起重命名）
+- `-dhmkh` 禁用硬件媒体密钥处理（Disable Hardware Media Key Handling），此选项将禁用Chromium的Hardware Media Key Handling特性（v1.9.0起新增）
+- `-play` 启动时播放指定列表的音乐，参数说明：
+  - `type`：播放类型，目前固定为`songList`
+  - `source`：播放源，可用值为`kw/kg/tx/wy/mg/myList`，其中`kw/kg/tx/wy/mg`对应各源的在线列表，`myList`为本地列表
+  - `link`：要播放的在线列表歌单链接、或ID，source为`kw/kg/tx/wy/mg`之一（在线列表）时必传，举例：`./lx-music-desktop -play="type=songList&source=kw&link=歌单URL or ID"`，注意：如果传入URL时必须对URL进行编码后再传入
+  - `name`：要播放的本地列表歌单名字，source为`myList`时必传，举例：`./lx-music-desktop -play="type=songList&source=myList&name=默认列表"`
+  - `index`：从列表的哪个位置开始播放，选传，若不传默认播放第一首歌曲，举例：`./lx-music-desktop -play="type=songList&source=myList&name=默认列表&index=2"`
+
 
 ### 常见问题
 
@@ -100,7 +109,7 @@ npm run pack:linux
 5. 由于使用本项目产生的包括由于本协议或由于使用或无法使用本项目而引起的任何性质的任何直接、间接、特殊、偶然或结果性损害（包括但不限于因商誉损失、停工、计算机故障或故障引起的损害赔偿，或任何及所有其他商业损害或损失）由使用者负责。
 6. 本项目完全免费，且开源发布于 GitHub 面向全世界人用作对技术的学习交流，本项目不对项目内的技术可能存在违反当地法律法规的行为作保证，**禁止在违反当地法律法规的情况下使用本项目**，对于使用者在明知或不知当地法律法规不允许的情况下使用本项目所造成的任何违法违规行为由使用者承担，本项目不承担由此造成的任何直接、间接、特殊、偶然或结果性责任。
 
-若你使用了本项目，将代表你接收以上协议。
+若你使用了本项目，将代表你接受以上协议。
 
 音乐平台不易，请尊重版权，支持正版。<br>
 若对此有疑问请 mail to: lyswhut+qq.com (请将`+`替换成`@`)

build-config/css-loader.config.js

@@ -3,6 +3,6 @@ const isDev = process.env.NODE_ENV === 'development'
 module.exports = {
   modules: {
     localIdentName: isDev ? '[folder]-[name]--[local]--[hash:base64:5]' : '[hash:base64:5]',
+    exportLocalsConvention: 'camelCase',
   },
-  localsConvention: 'camelCase',
 }

build-config/main/webpack.config.base.js

@@ -9,9 +9,10 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@': path.join(__dirname, '../../src/main'),
+      '@main': path.join(__dirname, '../../src/main'),
-      events: path.join(__dirname, '../../src/main/events'),
+      '@renderer': path.join(__dirname, '../../src/renderer'),
-      common: path.join(__dirname, '../../src/common'),
+      '@lyric': path.join(__dirname, '../../src/renderer-lyric'),
+      '@common': path.join(__dirname, '../../src/common'),
     },
     extensions: ['*', '.js', '.json', '.node'],
   },

build-config/main/webpack.config.dev.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const webpack = require('webpack')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 
@@ -17,13 +17,13 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"development"',
       },
       __static: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
+      __userApi: `"${path.join(__dirname, '../../src/main/modules/userApi').replace(/\\/g, '\\\\')}"`,
     }),
-    new webpack.NoEmitOnErrorsPlugin(),
     new FriendlyErrorsPlugin({
       onErrors(severity, errors) { // Silent warning from electron-debug
         if (severity != 'warning') return
 
-        for (let i = errors.length; i > -1; i--) {
+        for (let i = errors.length - 1; i > -1; i--) {
           const error = errors[i]
           if (error.file == './node_modules/electron-debug/index.js') errors.splice(i, 1)
         }

build-config/main/webpack.config.prod.js

@@ -1,6 +1,7 @@
 const path = require('path')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const webpack = require('webpack')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 const baseConfig = require('./webpack.config.base')
 
@@ -20,6 +21,18 @@ module.exports = merge(baseConfig, {
     __filename: false,
   },
   plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.join(__dirname, '../../src/main/modules/userApi/renderer'),
+          to: path.join(__dirname, '../../dist/electron/userApi/renderer'),
+        },
+        {
+          from: path.join(__dirname, '../../src/main/modules/userApi/rendererEvent/name.js'),
+          to: path.join(__dirname, '../../dist/electron/userApi/rendererEvent/name.js'),
+        },
+      ],
+    }),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"',

build-config/pack.js

@@ -14,7 +14,7 @@ const okayLog = chalk.bgGreen.white(' OKAY ') + ' '
 
 
 function build() {
-  del.sync(['dist/electron', 'build'])
+  del.sync(['dist/electron/**', 'build/**'])
 
   const spinners = new Spinnies({ color: 'blue' })
   spinners.add('main', { text: 'main building' })

build-config/renderer-lyric/webpack.config.base.js

@@ -1,9 +1,13 @@
 const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HTMLPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CleanCSSPlugin = require('less-plugin-clean-css')
 
 const vueLoaderConfig = require('../vue-loader.config')
+const { mergeCSSLoader } = require('../utils')
 
+const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {
   target: 'electron-renderer',
@@ -18,8 +22,11 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@': path.join(__dirname, '../../src/renderer'),
+      '@main': path.join(__dirname, '../../src/main'),
-      common: path.join(__dirname, '../../src/common'),
+      '@renderer': path.join(__dirname, '../../src/renderer'),
+      '@lyric': path.join(__dirname, '../../src/renderer-lyric'),
+      '@static': path.join(__dirname, '../../src/static'),
+      '@common': path.join(__dirname, '../../src/common'),
     },
     extensions: ['*', '.js', '.json', '.vue', '.node'],
   },
@@ -31,6 +38,7 @@ module.exports = {
           loader: 'eslint-loader',
           options: {
             formatter: require('eslint-formatter-friendly'),
+            emitWarning: isDev,
           },
         },
         exclude: /node_modules/,
@@ -46,6 +54,33 @@ module.exports = {
         loader: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/,
+        oneOf: mergeCSSLoader(),
+      },
+      {
+        test: /\.less$/,
+        oneOf: mergeCSSLoader({
+          loader: 'less-loader',
+          options: {
+            sourceMap: true,
+            lessOptions: {
+              plugins: [
+                new CleanCSSPlugin({ advanced: true }),
+              ],
+            },
+          },
+        }),
+      },
+      {
+        test: /\.styl(:?us)?$/,
+        oneOf: mergeCSSLoader({
+          loader: 'stylus-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
       {
         test: /\.pug$/,
         oneOf: [
@@ -95,8 +130,15 @@ module.exports = {
       template: path.join(__dirname, '../../src/renderer-lyric/index.pug'),
       isProd: process.env.NODE_ENV == 'production',
       browser: process.browser,
+      scriptLoading: 'blocking',
       __dirname,
     }),
     new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
+      chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css',
+    }),
   ],
 }

build-config/renderer-lyric/webpack.config.dev.js

@@ -2,44 +2,15 @@ const path = require('path')
 const webpack = require('webpack')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const { mergeCSSLoaderDev } = require('../utils')
-
 module.exports = merge(baseConfig, {
   mode: 'development',
   devtool: 'eval-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        oneOf: mergeCSSLoaderDev(),
-      },
-      {
-        test: /\.less$/,
-        oneOf: mergeCSSLoaderDev({
-          loader: 'less-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoaderDev({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-    ],
-  },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
     new FriendlyErrorsPlugin(),
     new webpack.DefinePlugin({
       'process.env': {

build-config/renderer-lyric/webpack.config.prod.js

@@ -1,14 +1,12 @@
 const path = require('path')
 const webpack = require('webpack')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const { mergeCSSLoaderProd } = require('../utils')
 const { dependencies } = require('../../package.json')
 
 let whiteListedModules = ['vue']
@@ -20,32 +18,6 @@ module.exports = merge(baseConfig, {
   externals: [
     ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
   ],
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        oneOf: mergeCSSLoaderProd(),
-      },
-      {
-        test: /\.less$/,
-        oneOf: mergeCSSLoaderProd({
-          loader: 'less-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoaderProd({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-    ],
-  },
   plugins: [
     new CopyWebpackPlugin({
       patterns: [
@@ -60,19 +32,11 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"production"',
       },
     }),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-    }),
-    new webpack.NamedChunksPlugin(),
   ],
   optimization: {
     minimizer: [
-      new TerserPlugin({
+      new TerserPlugin(),
-        cache: true,
+      new CssMinimizerPlugin(),
-        parallel: true,
-        sourceMap: false, // set to true if you want JS source maps
-      }),
-      new OptimizeCSSAssetsPlugin({}),
     ],
   },
   performance: {

build-config/renderer/webpack.config.base.js

@@ -1,9 +1,13 @@
 const path = require('path')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HTMLPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CleanCSSPlugin = require('less-plugin-clean-css')
 
 const vueLoaderConfig = require('../vue-loader.config')
+const { mergeCSSLoader } = require('../utils')
 
+const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {
   target: 'electron-renderer',
@@ -18,8 +22,11 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@': path.join(__dirname, '../../src/renderer'),
+      '@main': path.join(__dirname, '../../src/main'),
-      common: path.join(__dirname, '../../src/common'),
+      '@renderer': path.join(__dirname, '../../src/renderer'),
+      '@lyric': path.join(__dirname, '../../src/renderer-lyric'),
+      '@static': path.join(__dirname, '../../src/static'),
+      '@common': path.join(__dirname, '../../src/common'),
     },
     extensions: ['*', '.js', '.json', '.vue', '.node'],
   },
@@ -31,6 +38,7 @@ module.exports = {
           loader: 'eslint-loader',
           options: {
             formatter: require('eslint-formatter-friendly'),
+            emitWarning: isDev,
           },
         },
         exclude: /node_modules/,
@@ -46,6 +54,33 @@ module.exports = {
         loader: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/,
+        oneOf: mergeCSSLoader(),
+      },
+      {
+        test: /\.less$/,
+        oneOf: mergeCSSLoader({
+          loader: 'less-loader',
+          options: {
+            sourceMap: true,
+            lessOptions: {
+              plugins: [
+                new CleanCSSPlugin({ advanced: true }),
+              ],
+            },
+          },
+        }),
+      },
+      {
+        test: /\.styl(:?us)?$/,
+        oneOf: mergeCSSLoader({
+          loader: 'stylus-loader',
+          options: {
+            sourceMap: true,
+          },
+        }),
+      },
       {
         test: /\.pug$/,
         oneOf: [
@@ -95,8 +130,15 @@ module.exports = {
       template: path.join(__dirname, '../../src/renderer/index.pug'),
       isProd: process.env.NODE_ENV == 'production',
       browser: process.browser,
+      scriptLoading: 'blocking',
       __dirname,
     }),
     new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
+      chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css',
+    }),
   ],
 }

build-config/renderer/webpack.config.dev.js

@@ -2,44 +2,15 @@ const path = require('path')
 const webpack = require('webpack')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const { mergeCSSLoaderDev } = require('../utils')
-
 module.exports = merge(baseConfig, {
   mode: 'development',
   devtool: 'eval-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        oneOf: mergeCSSLoaderDev(),
-      },
-      {
-        test: /\.less$/,
-        oneOf: mergeCSSLoaderDev({
-          loader: 'less-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoaderDev({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-    ],
-  },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
     new FriendlyErrorsPlugin(),
     new webpack.DefinePlugin({
       'process.env': {

build-config/renderer/webpack.config.prod.js

@@ -1,14 +1,12 @@
 const path = require('path')
 const webpack = require('webpack')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
 
-const { mergeCSSLoaderProd } = require('../utils')
 const { dependencies } = require('../../package.json')
 
 let whiteListedModules = ['vue']
@@ -20,32 +18,6 @@ module.exports = merge(baseConfig, {
   externals: [
     ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
   ],
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        oneOf: mergeCSSLoaderProd(),
-      },
-      {
-        test: /\.less$/,
-        oneOf: mergeCSSLoaderProd({
-          loader: 'less-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoaderProd({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
-          },
-        }),
-      },
-    ],
-  },
   plugins: [
     new CopyWebpackPlugin({
       patterns: [
@@ -60,19 +32,11 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"production"',
       },
     }),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-    }),
-    new webpack.NamedChunksPlugin(),
   ],
   optimization: {
     minimizer: [
-      new TerserPlugin({
+      new TerserPlugin(),
-        cache: true,
+      new CssMinimizerPlugin(),
-        parallel: true,
-        sourceMap: false, // set to true if you want JS source maps
-      }),
-      new OptimizeCSSAssetsPlugin({}),
     ],
   },
   performance: {

build-config/runner-dev.js

@@ -179,6 +179,9 @@ function startElectron() {
 function electronLog(data, color) {
   let log = data.toString()
   if (/[0-9A-z]+/.test(log)) {
+    // 抑制 user api 窗口使用 data url 加载页面时 vue扩展 的报错日志刷屏的问题
+    if (color == 'red' && typeof log === 'string' && log.includes('"Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js')) return
+
     console.log(chalk[color](log))
   }
 }

build-config/utils.js

@@ -2,62 +2,19 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const cssLoaderConfig = require('./css-loader.config')
 const chalk = require('chalk')
 
-// merge css-loader in development
+// merge css-loader
-exports.mergeCSSLoaderDev = beforeLoader => {
+exports.mergeCSSLoader = beforeLoader => {
   const loader = [
     // 这里匹配 `<style module>`
     {
       resourceQuery: /module/,
       use: [
-        'vue-style-loader',
         {
-          loader: 'css-loader',
+          loader: MiniCssExtractPlugin.loader,
-          options: Object.assign({
-            sourceMap: true,
-          }, cssLoaderConfig),
-        },
-        {
-          loader: 'postcss-loader',
           options: {
-            sourceMap: true,
+            esModule: false,
           },
         },
-      ],
-    },
-    // 这里匹配普通的 `<style>` 或 `<style scoped>`
-    {
-      use: [
-        'vue-style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            sourceMap: true,
-          },
-        },
-        {
-          loader: 'postcss-loader',
-          options: {
-            sourceMap: true,
-          },
-        },
-      ],
-    },
-  ]
-  if (beforeLoader) {
-    loader[0].use.push(beforeLoader)
-    loader[1].use.push(beforeLoader)
-  }
-  return loader
-}
-
-// merge css-loader in production
-exports.mergeCSSLoaderProd = beforeLoader => {
-  const loader = [
-    // 这里匹配 `<style module>`
-    {
-      resourceQuery: /module/,
-      use: [
-        MiniCssExtractPlugin.loader,
         {
           loader: 'css-loader',
           options: cssLoaderConfig,
@@ -68,7 +25,12 @@ exports.mergeCSSLoaderProd = beforeLoader => {
     // 这里匹配普通的 `<style>` 或 `<style scoped>`
     {
       use: [
-        MiniCssExtractPlugin.loader,
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            esModule: false,
+          },
+        },
         'css-loader',
         'postcss-loader',
       ],

jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@main/*": ["src/main/*"],
+      "@renderer/*": ["src/renderer/*"],
+      "@lyric/*": ["src/renderer-lyric/*"],
+      "@static/*": ["src/static/*"],
+      "@common/*": ["src/common/*"],
+    }
+  },
+  "exclude": ["node_modules", "build", "dist"]
+}

package.json

@@ -1,67 +1,74 @@
 {
   "name": "lx-music-desktop",
-  "version": "1.0.0-beta",
+  "version": "1.10.0",
-  "description": "一个免费的音乐下载助手",
+  "description": "一个免费的音乐查找助手",
   "main": "./dist/electron/main.js",
   "productName": "lx-music-desktop",
   "scripts": {
-    "php": "babel file.php -o file.js",
+    "pack": "node build-config/pack.js && npm run pack:win:setup:x64",
-    "pack": "node build-config/pack.js && npm run pack:win",
+    "pack:win": "node build-config/pack.js && npm run pack:win:setup:x86_64 && npm run pack:win:setup:x64 && npm run pack:win:7z",
-    "pack:win": "npm run pack:win:setup:x86_64 && npm run pack:win:7z",
+    "pack:win:setup:x86_64": "cross-env TARGET=Setup ARCH=x86_64 electron-builder -w=nsis --x64 --ia32 -p never",
-    "pack:win:setup:x86_64": "cross-env TARGET=win_安装版 ARCH=x86_64 electron-builder -w=nsis --x64 --ia32",
+    "pack:win:setup:x64": "cross-env TARGET=Setup ARCH=x64 electron-builder -w=nsis --x64 -p never",
-    "pack:win:setup:x64": "cross-env TARGET=win_安装版 ARCH=x64 electron-builder -w=nsis --x64",
+    "pack:win:setup:x86": "cross-env TARGET=Setup ARCH=x86 electron-builder -w=nsis --ia32 -p never",
-    "pack:win:setup:x86": "cross-env TARGET=win_安装版 ARCH=x86 electron-builder -w=nsis --ia32",
     "pack:win:portable": "npm run pack:win:portable:x86_64 && npm run pack:win:portable:x64 && npm run pack:win:portable:x86",
-    "pack:win:portable:x86_64": "cross-env TARGET=便携版 ARCH=x86_64 electron-builder -w=portable --x64 --ia32",
+    "pack:win:portable:x86_64": "cross-env TARGET=portable ARCH=x86_64 electron-builder -w=portable --x64 --ia32 -p never",
-    "pack:win:portable:x64": "cross-env TARGET=便携版 ARCH=x64 electron-builder -w=portable --x64",
+    "pack:win:portable:x64": "cross-env TARGET=portable ARCH=x64 electron-builder -w=portable --x64 -p never",
-    "pack:win:portable:x86": "cross-env TARGET=便携版 ARCH=x86 electron-builder -w=portable --ia32",
+    "pack:win:portable:x86": "cross-env TARGET=portable ARCH=x86 electron-builder -w=portable --ia32 -p never",
     "pack:win:7z": "npm run pack:win:7z:x64 && npm run pack:win:7z:x86",
-    "pack:win:7z:x64": "cross-env TARGET=win_绿色版 ARCH=x64 electron-builder -w=7z --x64",
+    "pack:win:7z:x64": "cross-env TARGET=green ARCH=win_x64 electron-builder -w=7z --x64 -p never",
-    "pack:win:7z:x86": "cross-env TARGET=win_绿色版 ARCH=x86 electron-builder -w=7z --ia32",
+    "pack:win:7z:x86": "cross-env TARGET=green ARCH=win_x86 electron-builder -w=7z --ia32 -p never",
+    "pack:win:7z:arm64": "cross-env TARGET=green ARCH=win_arm64 electron-builder -w=7z --arm64 -p never",
+    "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 -p never",
+    "pack:linux:deb": "npm run pack:linux:deb:x64 && npm run pack:linux:deb:x86 && npm run pack:linux:deb:arm64 && npm run pack:linux:deb:armv7l",
+    "pack:linux:deb:x64": "cross-env ARCH=x64 electron-builder -l=deb --x64 -p never",
+    "pack:linux:deb:x86": "cross-env ARCH=x86 electron-builder -l=deb --ia32 -p never",
+    "pack:linux:deb:arm64": "cross-env ARCH=arm64 electron-builder -l=deb --arm64 -p never",
+    "pack:linux:deb:armv7l": "cross-env ARCH=armv7l electron-builder -l=deb --armv7l -p never",
+    "pack:linux:rpm": "cross-env ARCH=x64 electron-builder -l=rpm --x64 -p never",
+    "pack:linux:pacman": "cross-env ARCH=x64 electron-builder -l=pacman --x64 -p never",
+    "pack:mac": "node build-config/pack.js && npm run pack:mac:dmg && npm run pack:mac:dmg:arm64",
+    "pack:mac:dmg": "cross-env electron-builder -m=dmg -p never",
+    "pack:mac:dmg:arm64": "cross-env electron-builder -m=dmg --arm64 -p never",
+    "pack:dir": "node build-config/pack.js && electron-builder --dir",
     "publish": "node publish",
-    "publish:gh": "node build-config/pack.js && npm run publish:win",
+    "publish:win:setup:x64:always": "cross-env TARGET=Setup ARCH=x64 electron-builder -w=nsis --x64 -p always",
-    "publish:win": "npm run publish:win:7z && npm run publish:win:setup",
+    "publish:win:setup:x64": "cross-env TARGET=Setup ARCH=x64 electron-builder -w=nsis --x64 -p always",
-    "publish:win:setup": "cross-env TARGET=Setup ARCH=x86_64 electron-builder -w=nsis --x64 --ia32 -p onTagOrDraft",
+    "publish:win:setup:x86": "cross-env TARGET=Setup ARCH=x86 electron-builder -w=nsis --ia32 -p onTagOrDraft",
+    "publish:win:setup:x86_64": "cross-env TARGET=Setup ARCH=x86_64 electron-builder -w=nsis --x64 --ia32 -p onTagOrDraft",
     "publish:win:portable": "npm run publish:win:portable:x86_64 && npm run publish:win:portable:x64 && npm run publish:win:portable:x86",
     "publish:win:portable:x86_64": "cross-env TARGET=portable ARCH=x86_64 electron-builder -w=portable --x64 --ia32 -p onTagOrDraft",
     "publish:win:portable:x64": "cross-env TARGET=portable ARCH=x64 electron-builder -w=portable --x64 -p onTagOrDraft",
     "publish:win:portable:x86": "cross-env TARGET=portable ARCH=x86 electron-builder -w=portable --ia32 -p onTagOrDraft",
-    "publish:win:7z": "npm run publish:win:7z:x64 && npm run publish:win:7z:x86",
+    "publish:win:7z:x64": "cross-env TARGET=green ARCH=win_x64 electron-builder -w=7z --x64 -p onTagOrDraft",
-    "publish:win:7z:x64": "cross-env TARGET=green ARCH=win_x64 electron-builder -w=7z --x64 -p always",
     "publish:win:7z:x86": "cross-env TARGET=green ARCH=win_x86 electron-builder -w=7z --ia32 -p onTagOrDraft",
-    "publish:gh:mac": "node build-config/pack.js && npm run publish:mac",
+    "publish:win:7z:arm64": "cross-env TARGET=green ARCH=win_arm64 electron-builder -w=7z --arm64 -p onTagOrDraft",
-    "publish:mac": "npm run publish:mac:dmg",
+    "publish:mac:dmg:always": "electron-builder -m=dmg -p always",
     "publish:mac:dmg": "electron-builder -m=dmg -p onTagOrDraft",
-    "publish:gh:linux": "node build-config/pack.js && npm run publish:linux",
+    "publish:mac:dmg:arm64": "electron-builder -m=dmg --arm64 -p onTagOrDraft",
-    "publish:linux": "npm run publish:linux:deb && npm run publish:linux:appImage && npm run publish:linux:rpm && npm run publish:linux:pacman",
+    "publish:linux:deb:x64:always": "cross-env ARCH=x64 electron-builder -l=deb --x64 -p always",
-    "publish:linux:appImage": "cross-env ARCH=x64 electron-builder -l=AppImage -p onTagOrDraft",
-    "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:deb:arm64": "cross-env ARCH=arm64 electron-builder -l=deb --arm64 -p onTagOrDraft",
+    "publish:linux:deb:armv7l": "cross-env ARCH=armv7l electron-builder -l=deb --armv7l -p onTagOrDraft",
+    "publish:linux:appImage": "cross-env ARCH=x64 electron-builder -l=AppImage -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 --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",
     "clean:electron": "rimraf dist/electron",
-    "clean:web": "rimraf dist/web",
     "clean": "rimraf dist && rimraf build",
-    "build:main": "cross-env NODE_ENV=production webpack --config build-config/main/webpack.config.prod.js --progress --hide-modules",
+    "build:src": "node build-config/pack.js",
-    "build:renderer": "cross-env NODE_ENV=production webpack --config build-config/renderer/webpack.config.prod.js --progress --hide-modules",
+    "build:main": "cross-env NODE_ENV=production webpack --config build-config/main/webpack.config.prod.js --progress",
-    "build:renderer-lyric": "cross-env NODE_ENV=production webpack --config build-config/renderer-lyric/webpack.config.prod.js --progress --hide-modules",
+    "build:renderer": "cross-env NODE_ENV=production webpack --config build-config/renderer/webpack.config.prod.js --progress",
+    "build:renderer-lyric": "cross-env NODE_ENV=production webpack --config build-config/renderer-lyric/webpack.config.prod.js --progress",
     "build": "npm run clean:electron && npm run build:main && npm run build:renderer && npm run build:renderer-lyric",
     "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-formatter-friendly src",
-    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-formatter-friendly --fix src"
+    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-formatter-friendly --fix src",
+    "dp": "cross-env ELECTRON_GET_USE_PROXY=true GLOBAL_AGENT_HTTPS_PROXY=http://localhost:1081 npm run pack",
+    "up": "cross-env ELECTRON_GET_USE_PROXY=true GLOBAL_AGENT_HTTPS_PROXY=http://localhost:1081 npm update"
   },
   "browserslist": [
-    "Electron 9.0.5"
+    "Electron 12.0.8"
   ],
   "engines": {
     "node": ">= 12"
@@ -101,7 +108,7 @@
       "allowToChangeInstallationDirectory": true,
       "differentialPackage": true,
       "license": "./licenses/license.rtf",
-      "shortcutName": "lx-music"
+      "shortcutName": "LX Music"
     },
     "dmg": {
       "window": {
@@ -112,7 +119,7 @@
         {
           "x": 106,
           "y": 252,
-          "name": "lx-music"
+          "name": "LX Music"
         },
         {
           "x": 490,
@@ -132,12 +139,6 @@
         "provider": "github",
         "owner": "lyswhut",
         "repo": "lx-music-desktop"
-      },
-      {
-        "package": "lx-music-desktop",
-        "repo": "lx-music-desktop",
-        "user": "lyswhut",
-        "provider": "bintray"
       }
     ]
   },
@@ -160,82 +161,86 @@
   },
   "homepage": "https://github.com/lyswhut/lx-music-desktop#readme",
   "devDependencies": {
-    "@babel/core": "^7.10.3",
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/polyfill": "^7.10.1",
+    "@babel/plugin-transform-modules-umd": "^7.14.0",
-    "@babel/preset-env": "^7.10.3",
+    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.14.2",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-minify-webpack-plugin": "^0.3.1",
     "babel-preset-minify": "^0.5.1",
-    "browserslist": "^4.12.2",
+    "browserslist": "^4.16.6",
-    "cfonts": "^2.8.5",
+    "cfonts": "^2.9.2",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
     "changelog-parser": "^2.8.0",
-    "copy-webpack-plugin": "^6.0.2",
+    "copy-webpack-plugin": "^8.1.1",
-    "core-js": "^3.6.5",
+    "core-js": "^3.12.1",
-    "cross-env": "^7.0.2",
+    "cross-env": "^7.0.3",
-    "css-loader": "^3.6.0",
+    "css-loader": "^5.2.4",
-    "del": "^5.1.0",
+    "css-minimizer-webpack-plugin": "^3.0.0",
-    "electron": "^9.0.5",
+    "del": "^6.0.0",
-    "electron-builder": "^22.7.0",
+    "electron": "^12.0.8",
-    "electron-debug": "^3.1.0",
+    "electron-builder": "^22.11.4",
-    "electron-devtools-installer": "^3.1.0",
+    "electron-debug": "^3.2.0",
-    "eslint": "^7.3.1",
+    "electron-devtools-installer": "^3.2.0",
+    "eslint": "^7.26.0",
     "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-html": "^6.1.2",
-    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-import": "^2.23.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-standard": "^4.1.0",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^5.3.1",
-    "less": "^3.11.3",
+    "less": "^4.1.1",
-    "less-loader": "^6.1.2",
+    "less-loader": "^9.0.0",
-    "markdown-it": "^11.0.0",
+    "less-plugin-clean-css": "^1.5.1",
-    "mini-css-extract-plugin": "^0.9.0",
+    "markdown-it": "^12.0.6",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "mini-css-extract-plugin": "^1.6.0",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.2.15",
-    "postcss-pxtorem": "^5.1.1",
+    "postcss-loader": "^5.3.0",
-    "pug": "^3.0.0",
+    "postcss-pxtorem": "^6.0.0",
+    "pug": "^3.0.2",
     "pug-loader": "^2.4.0",
-    "pug-plain-loader": "^1.0.0",
+    "pug-plain-loader": "^1.1.0",
-    "raw-loader": "^4.0.1",
+    "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "spinnies": "^0.5.1",
-    "stylus": "^0.54.7",
+    "stylus": "^0.54.8",
-    "stylus-loader": "^3.0.2",
+    "stylus-loader": "^6.0.0",
-    "terser-webpack-plugin": "^3.0.6",
+    "terser-webpack-plugin": "^5.1.2",
-    "url-loader": "^4.1.0",
+    "url-loader": "^4.1.1",
-    "vue-loader": "^15.9.3",
+    "vue-loader": "^15.9.7",
-    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.12",
-    "vue-template-compiler": "^2.6.11",
+    "webpack": "^5.37.0",
-    "webpack": "^4.43.0",
+    "webpack-cli": "^4.7.0",
-    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.2",
-    "webpack-dev-server": "^3.11.0",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^5.7.3"
   },
   "dependencies": {
     "crypto-js": "^4.0.0",
     "dnscache": "^1.0.2",
-    "electron-log": "^4.2.2",
+    "electron-log": "^4.3.5",
-    "electron-store": "^5.2.0",
+    "electron-store": "^8.0.0",
-    "electron-updater": "^4.3.1",
+    "electron-updater": "^4.3.9",
-    "iconv-lite": "^0.6.0",
+    "iconv-lite": "^0.6.2",
-    "image-size": "^0.8.3",
+    "image-size": "^1.0.0",
     "js-htmlencode": "^0.3.0",
-    "lrc-file-parser": "^1.0.5",
+    "lrc-file-parser": "^1.0.7",
-    "needle": "^2.5.0",
+    "needle": "^2.6.0",
-    "node-id3": "^0.1.17",
+    "node-id3": "^0.2.3",
     "request": "^2.88.2",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
-    "vue-i18n": "^8.18.2",
+    "vue-i18n": "^8.24.4",
-    "vue-router": "^3.3.4",
+    "vue-router": "^3.5.1",
-    "vuex": "^3.4.0",
+    "vuex": "^3.6.2",
     "vuex-router-sync": "^5.0.0"
   }
 }

publish/changeLog.md

@@ -1,42 +1,21 @@
+lx music移动端已经发布了，使用习惯仍跟桌面版一样，不过功能、界面仍比较简单，有兴趣的可以去体检一下，项目地址：
+https://github.com/lyswhut/lx-music-mobile#readme
+
 ### 新增
 
-- 新增`rpm`、`pacman`包的构建
+- 排行榜界面添加播放、收藏整个排行榜功能，可以右击排行榜名字后，在弹出的右键菜单中使用。注：收藏、播放存在分页的排行榜时需等待操作完成后才能切换排行榜，不然会导致操作中断。
-- 新增当前音频输出设备改变时是否暂停播放的设置，默认关闭
+- 新增Mac arm64位dmg包的构建
-- 新增歌曲列表右键菜单
-- 新增自定义列表，创建列表的按钮在表头`#`左侧，鼠标移上去才会显示；编辑列表名字时，按`ESC`键可快速取消编辑，按回车键或使输入框失去焦点即可保存列表名字，右击列表可编辑已创建的列表，“试听列表”与“我的收藏”两个列表固定不可编辑
-- 改变排行榜布局，新增更多排行榜
-- 新增我的列表右键菜单复制歌曲名选项
-- 新增桌面歌词，默认关闭，可到设置或者托盘菜单开启；调整字体大小、透明度时，鼠标左击按钮正常调整，右击微调；已知windows下贴边拖拽调整歌词窗口大小时可能会导致窗口变黑，这时只需将窗口拖离屏幕边缘再拖回去即可；Windows 7未开启Aero效果时桌面歌词会有问题，详情看常见问题解决；Linux版桌面歌词有问题，以后再尝试优化；
-- 新增“清热板蓝”皮肤
-- 新增软件最小化、关闭按钮位置设置，MAC版默认为左边，非MAC为右边，不想用默认的可到设置修改
-- 新增快捷键设置，软件内快捷键默认开启，全局快捷键默认关闭
-- 新增首次运行时自动根据当前系统使用的语言设置软件显示的语言
-
-### 优化
-
-- 改进歌曲切换时的歌词滚动效果
-- 优化批量添加、删除播放列表的歌曲操作逻辑，大幅提升批量添加、删除列表歌曲的流畅度
-- 改进歌单列表展示
 
 ### 修复
 
-- 修复按住`Ctrl`等键触发多选机制时不松开按键的情况下切换到其他窗口后再松开按键，这时切回软件不按按键都处在多选模式的问题
+- 修复全局快捷键对桌面歌词无效的问题
-- 修复Linux版开启托盘无法退出的问题
+- 修复快捷键设置框内的提示问题
-- 修复某些情况下可能导致的音源输出问题
+- 修复在当前正常播放的列表中使用稍后播放功能时，播放完后稍后播放的歌曲后不会恢复原来播放位置播放的问题
-- 修复某些情况下无法开始下载任务的问题
+- 修复kw部分歌单无法打开的问题
-- 修复 tab 组件边框溢出问题
+- 修复wy源的歌曲音质匹配问题
-- 修复错误更新试听列表外的歌曲时间的问题
+- 修复mg源歌单标签、排行榜歌曲列表无法加载的问题
-- 修复网易音乐源歌单、排行榜歌曲列表加载显示的数量与实际不对的问题
+- 修复了一个歌曲下载失败时不会跳过任务的问题
-- 修复歌曲图片链接没有扩展名的情况下无法嵌入图片的问题
-- 修复无法检测最新版本时弹窗提示的显示
-- 修复某些情况下从托盘还原窗口后无法操作的问题
-- 修复Linux下无法`ctrl+a`全选的问题
-
-### 更变
-
-- 修改设置-列表-是否显示歌曲源的默认设置为选中（该变更不影响之前的设置）
-- 移除浮动按钮，现在在多选完成后可鼠标右击随意一项在弹出的右键菜单中进行原来悬浮按钮的操作
 
 ### 其他
 
-- 更新 Electron 到 9.0.5
+- 更新 Electron 到 12.0.8

publish/utils/updateChangeLog.js

@@ -44,7 +44,7 @@ module.exports = async newVerNum => {
     desc: version.desc,
   })
   version.version = newVerNum
-  version.desc = newChangeLog
+  version.desc = newMDChangeLog.replace(/(?:^|(\n))#{1,6} (.+)\n/g, '$1$2').trim()
   pkg.version = newVerNum
 
   console.log(chalk.blue('new version: ') + chalk.green(newVerNum))

src/common/config.js

@@ -51,6 +51,6 @@ module.exports = {
     },
   ],
   navigationUrlWhiteList: [
-    /^https:\/\/www\.xiami\.com/,
+
   ],
 }

src/common/defaultHotKey.js

@@ -44,21 +44,6 @@ module.exports = {
         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,

src/common/defaultSetting.js

@@ -1,9 +1,8 @@
 const path = require('path')
 const os = require('os')
-const { isMac } = require('./utils')
 
 const defaultSetting = {
-  version: '1.0.34',
+  version: '1.0.41',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -12,6 +11,9 @@ const defaultSetting = {
     isMute: false,
     mediaDeviceId: 'default',
     isMediaDeviceRemovedStopPlay: false,
+    isShowLyricTranslation: false,
+    isPlayLxlrc: true,
+    isSavePlayTime: false,
   },
   desktopLyric: {
     enable: false,
@@ -22,6 +24,7 @@ const defaultSetting = {
     x: null,
     y: null,
     theme: 0,
+    isLockScreen: true,
     style: {
       fontSize: 120,
       opacity: 95,
@@ -42,6 +45,7 @@ const defaultSetting = {
     isDownloadLrc: false,
     isEmbedPic: true,
     isEmbedLyric: false,
+    isUseOtherSource: false,
   },
   leaderboard: {
     source: 'kw',
@@ -86,10 +90,11 @@ const defaultSetting = {
   sourceId: 'kw',
   apiSource: 'temp',
   sourceNameType: 'alias',
+  isShowAnimation: true,
   randomAnimate: true,
   ignoreVersion: null,
   isAgreePact: false,
-  controlBtnPosition: isMac ? 'left' : 'right',
+  controlBtnPosition: process.platform === 'darwin' ? 'left' : 'right',
 }
 
 const overwriteSetting = {

src/common/hotKey.js

@@ -1,4 +1,4 @@
-const names = require('../main/events/_name')
+const names = require('@main/events/_name')
 const hotKey = {
   common: {
     min: {

src/common/ipc.js

@@ -2,11 +2,17 @@ const { ipcMain, ipcRenderer } = require('electron')
 const names = require('./ipcNames')
 
 
-exports.mainOn = (event, callback) => {
+exports.mainOn = (name, callback) => {
-  ipcMain.on(event, callback)
+  ipcMain.on(name, callback)
 }
-exports.mainOnce = (event, callback) => {
+exports.mainOnce = (name, callback) => {
-  ipcMain.once(event, callback)
+  ipcMain.once(name, callback)
+}
+exports.mainOff = (name, callback) => {
+  ipcMain.removeListener(name, callback)
+}
+exports.mainOffAll = name => {
+  ipcMain.removeAllListeners(name)
 }
 
 exports.mainHandle = (name, callback) => {
@@ -15,6 +21,9 @@ exports.mainHandle = (name, callback) => {
 exports.mainHandleOnce = (name, callback) => {
   ipcMain.handleOnce(name, callback)
 }
+exports.mainHandleRemove = name => {
+  ipcMain.removeListener(name)
+}
 
 exports.mainSend = (window, name, params) => {
   window.webContents.send(name, params)
@@ -33,5 +42,11 @@ exports.rendererOn = (name, callback) => {
 exports.rendererOnce = (name, callback) => {
   ipcRenderer.once(name, callback)
 }
+exports.rendererOff = (name, callback) => {
+  ipcRenderer.removeListener(name, callback)
+}
+exports.rendererOffAll = name => {
+  ipcRenderer.removeAllListeners(name)
+}
 
 exports.NAMES = names

src/common/ipcNames.js

@@ -41,6 +41,31 @@ const names = {
     quit: 'quit',
     min_toggle: 'min_toggle',
     hide_toggle: 'hide_toggle',
+    get_data_path: 'get_data_path',
+    show_dialog: 'show_dialog',
+
+    get_setting: 'get_setting',
+    get_playlist: 'get_playlist',
+    save_playlist: 'save_playlist',
+    get_data: 'get_data',
+    save_data: 'save_data',
+    get_hot_key: 'get_hot_key',
+
+    import_user_api: 'import_user_api',
+    remove_user_api: 'remove_user_api',
+    set_user_api: 'set_user_api',
+    get_user_api_list: 'get_user_api_list',
+    request_user_api: 'request_user_api',
+    request_user_api_cancel: 'request_user_api_cancel',
+    get_user_api_status: 'get_user_api_status',
+    user_api_status: 'user_api_status',
+
+    get_lyric: 'get_lyric',
+    save_lyric: 'save_lyric',
+    clear_lyric: 'clear_lyric',
+    get_music_url: 'get_music_url',
+    save_music_url: 'save_music_url',
+    clear_music_url: 'clear_music_url',
   },
   winLyric: {
     close: 'close',

src/common/store.js

@@ -0,0 +1,42 @@
+const Store = require('electron-store')
+const { dialog, app, shell } = require('electron')
+const path = require('path')
+const fs = require('fs')
+const log = require('electron-log')
+
+const stores = {}
+
+/**
+ * 获取 Store 对象
+ * @param {*} name store 名
+ * @param {*} isIgnoredError 是否忽略错误
+ * @param {*} isShowErrorAlert 是否显示错误弹窗
+ * @returns Store
+ */
+module.exports = (name, isIgnoredError = true, isShowErrorAlert = true) => {
+  if (stores[name]) return stores[name]
+  let store
+  try {
+    store = stores[name] = new Store({ name, clearInvalidConfig: false })
+  } catch (error) {
+    log.error(error)
+
+    if (!isIgnoredError) throw error
+
+
+    const backPath = path.join(app.getPath('userData'), name + '.json.bak')
+    fs.copyFileSync(path.join(app.getPath('userData'), name + '.json'), backPath)
+    if (isShowErrorAlert) {
+      dialog.showMessageBoxSync({
+        type: 'error',
+        message: name + ' data load error',
+        detail: `We have helped you back up the old ${name} file to: ${backPath}\nYou can try to repair and restore it manually\n\nError detail: ${error.message}`,
+      })
+      shell.showItemInFolder(backPath)
+    }
+
+
+    store = new Store({ name, clearInvalidConfig: true })
+  }
+  return store
+}

src/common/utils.js

@@ -1,7 +1,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 apiSource = require('../renderer/utils/music/api-source-info')
+const getStore = require('./store')
 const defaultHotKey = require('./defaultHotKey')
 
 exports.isLinux = process.platform == 'linux'
@@ -94,7 +94,9 @@ exports.objectDeepMerge = (target, source, mergedObj) => {
 }
 
 exports.mergeSetting = (setting, version) => {
-  const defaultVersion = defaultSetting.version
+  let defaultSettingCopy = JSON.parse(JSON.stringify(defaultSetting))
+  let overwriteSettingCopy = JSON.parse(JSON.stringify(overwriteSetting))
+  const defaultVersion = defaultSettingCopy.version
   if (!version) {
     if (setting) {
       version = setting.version
@@ -103,17 +105,17 @@ exports.mergeSetting = (setting, version) => {
   }
 
   if (!setting) {
-    setting = defaultSetting
+    setting = defaultSettingCopy
   } else if (exports.compareVer(version, defaultVersion) < 0) {
-    exports.objectDeepMerge(defaultSetting, setting)
+    exports.objectDeepMerge(defaultSettingCopy, setting)
-    exports.objectDeepMerge(defaultSetting, overwriteSetting)
+    exports.objectDeepMerge(defaultSettingCopy, overwriteSettingCopy)
-    setting = defaultSetting
+    setting = defaultSettingCopy
   }
 
-  if (!apiSource.some(api => api.id === setting.apiSource && !api.disabled)) {
+  // if (!apiSource.some(api => api.id === setting.apiSource && !api.disabled)) {
-    let api = apiSource.find(api => !api.disabled)
+  //   let api = apiSource.find(api => !api.disabled)
-    if (api) setting.apiSource = api.id
+  //   if (api) setting.apiSource = api.id
-  }
+  // }
 
   return { setting, version: defaultVersion }
 }
@@ -121,17 +123,19 @@ exports.mergeSetting = (setting, version) => {
 /**
  * 初始化设置
  * @param {*} setting
+ * @param {*} isShowErrorAlert
  */
-exports.initSetting = () => {
+exports.initSetting = isShowErrorAlert => {
-  const electronStore_list = new Store({
+  const electronStore_list = getStore('playList', true, isShowErrorAlert)
-    name: 'playList',
+  const electronStore_config = getStore('config')
-  })
+  const electronStore_downloadList = getStore('downloadList')
-  const electronStore_config = new Store({
+
-    name: 'config',
-  })
   let setting = electronStore_config.get('setting')
-  if (!electronStore_config.get('version') && setting) { // 迁移配置
+  if (setting) {
-    electronStore_config.set('version', electronStore_config.get('setting.version'))
+    let version = electronStore_config.get('version')
+    if (!version) { // 迁移配置
+      version = electronStore_config.get('setting.version')
+      electronStore_config.set('version', version)
       electronStore_config.delete('setting.version')
       const list = electronStore_config.get('list')
       if (list) {
@@ -141,18 +145,32 @@ exports.initSetting = () => {
       }
       const downloadList = electronStore_config.get('download')
       if (downloadList) {
-      if (downloadList.list) electronStore_list.set('downloadList', downloadList.list)
+        if (downloadList.list) electronStore_downloadList.set('list', downloadList.list)
         electronStore_config.delete('download')
       }
     }
 
     // 迁移列表滚动位置设置 ~0.18.3
-  if (setting && setting.list.scroll) {
+    if (setting.list.scroll) {
       let scroll = setting.list.scroll
-    electronStore_list.set('defaultList.location', scroll.locations.defaultList || 0)
+      electronStore_list.set('defaultList.location', scroll.locations.default || 0)
-    electronStore_list.set('loveList.location', scroll.locations.loveList || 0)
+      electronStore_list.set('loveList.location', scroll.locations.love || 0)
       electronStore_config.delete('setting.list.scroll')
       electronStore_config.set('setting.list.isSaveScrollLocation', scroll.enable)
+      delete setting.list.scroll
+    }
+
+    if (setting.player.isShowLyricTransition != null) { // 修正拼写问题 v1.8.2 及以前
+      setting.player.isShowLyricTranslation = setting.player.isShowLyricTransition
+      delete setting.player.isShowLyricTransition
+    }
+  }
+
+  // 从我的列表分离下载列表 v1.7.0 后
+  let downloadList = electronStore_list.get('downloadList')
+  if (downloadList) {
+    electronStore_downloadList.set('list', downloadList)
+    electronStore_list.delete('downloadList')
   }
 
   const { version: settingVersion, setting: newSetting } = exports.mergeSetting(setting, electronStore_config.get('version'))
@@ -161,18 +179,15 @@ exports.initSetting = () => {
   if (!newSetting.leaderboard.tabId.includes('__')) newSetting.leaderboard.tabId = 'kw__16'
 
   // newSetting.controlBtnPosition = 'right'
-  electronStore_config.set('version', settingVersion)
+  electronStore_config.set({ version: settingVersion, setting: newSetting })
-  electronStore_config.set('setting', newSetting)
+  return { version: settingVersion, setting: newSetting }
-  return newSetting
 }
 
 /**
  * 初始化快捷键设置
  */
 exports.initHotKey = () => {
-  const electronStore_hotKey = new Store({
+  const electronStore_hotKey = getStore('hotKey')
-    name: 'hotKey',
-  })
 
   let localConfig = electronStore_hotKey.get('local')
   if (!localConfig) {
@@ -181,6 +196,15 @@ exports.initHotKey = () => {
   }
 
   let globalConfig = electronStore_hotKey.get('global')
+
+  // 移除v1.0.1及之前设置的全局声音媒体快捷键接管
+  if (globalConfig && globalConfig.keys.VolumeUp) {
+    delete globalConfig.keys.VolumeUp
+    delete globalConfig.keys.VolumeDown
+    delete globalConfig.keys.VolumeMute
+    electronStore_hotKey.set('global', globalConfig)
+  }
+
   if (!globalConfig) {
     globalConfig = defaultHotKey.global
     electronStore_hotKey.set('global', globalConfig)

src/main/event.js

@@ -2,7 +2,7 @@ const { common: COMMON_EVENT_NAME, mainWindow: MAIN_WINDOW_EVENT_NAME } = requir
 const { mainSend, NAMES: { mainWindow: ipcMainWindowNames } } = require('./../common/ipc')
 const { getAppHotKeyConfig } = require('./utils')
 
-global.lx_event.common.on(COMMON_EVENT_NAME.config, name => {
+global.lx_event.common.on(COMMON_EVENT_NAME.configStatus, name => {
   if (MAIN_WINDOW_EVENT_NAME.name === name) return
   if (global.modules.mainWindow) mainSend(global.modules.mainWindow, ipcMainWindowNames.set_config, global.appSetting)
 })
@@ -22,6 +22,7 @@ global.lx_event.mainWindow.on(MAIN_WINDOW_EVENT_NAME.toggle_minimize, () => {
       global.modules.mainWindow.show()
     }
     global.modules.mainWindow.restore()
+    global.modules.mainWindow.focus()
   } else {
     global.modules.mainWindow.minimize()
   }

src/main/events/Common.js

@@ -1,16 +1,14 @@
 const { EventEmitter } = require('events')
 const { common: COMMON_EVENT_NAME } = require('./_name')
-const { updateSetting } = require('../utils')
 
 class Common extends EventEmitter {
   initSetting() {
     this.emit(COMMON_EVENT_NAME.initConfig)
-    this.emit(COMMON_EVENT_NAME.config, null)
+    this.configStatus(null)
   }
 
-  setAppConfig(config, name) {
+  configStatus(name) {
-    if (config) updateSetting(config)
+    this.emit(COMMON_EVENT_NAME.configStatus, name)
-    this.emit(COMMON_EVENT_NAME.config, name)
   }
 }
 

src/main/events/MainWindow.js

@@ -17,6 +17,18 @@ class MainWindow extends EventEmitter {
   toggleHide() {
     this.emit(MAIN_WINDOW_EVENT_NAME.toggle_hide)
   }
+
+  readyToShow() {
+    this.emit(MAIN_WINDOW_EVENT_NAME.ready_to_show)
+  }
+
+  show() {
+    this.emit(MAIN_WINDOW_EVENT_NAME.show)
+  }
+
+  hide() {
+    this.emit(MAIN_WINDOW_EVENT_NAME.hide)
+  }
 }
 
 module.exports = MainWindow

src/main/events/_name.js

@@ -1,6 +1,6 @@
 exports.common = {
   initConfig: 'initConfig',
-  config: 'config',
+  configStatus: 'config',
 }
 
 exports.mainWindow = {
@@ -10,6 +10,9 @@ exports.mainWindow = {
   quit: 'quit',
   toggle_minimize: 'toggle_minimize',
   toggle_hide: 'toggle_hide',
+  ready_to_show: 'ready_to_show',
+  show: 'show',
+  hide: 'hide',
 }
 
 exports.tray = {

src/main/events/index.js

@@ -1,4 +1,4 @@
-global.lx_event = {}
+if (!global.lx_event) global.lx_event = {}
 
 const Common = require('./Common')
 const MainWindow = require('./MainWindow')
@@ -6,8 +6,12 @@ const Tray = require('./Tray')
 const WinLyric = require('./WinLyric')
 const HotKey = require('./HotKey')
 
+const { Event: UserApi } = require('../modules/userApi')
+
 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()
+
+if (!global.lx_event.userApi) global.lx_event.userApi = new UserApi()

src/main/index.js

@@ -4,7 +4,7 @@ const path = require('path')
 // 单例应用程序
 if (!app.requestSingleInstanceLock()) {
   app.quit()
-  return
+  process.exit(0)
 }
 if (!global.modules) global.modules = {}
 app.on('second-instance', (event, argv, cwd) => {
@@ -24,14 +24,25 @@ app.on('second-instance', (event, argv, cwd) => {
 
 const isDev = global.isDev = process.env.NODE_ENV !== 'production'
 require('./env')
-const { navigationUrlWhiteList } = require('../common/config')
+// console.log(global.envParams.cmdParams)
-const { getWindowSizeInfo } = require('./utils')
-const { isMac, isLinux, initSetting, initHotKey } = require('../common/utils')
 
+// Is disable hardware acceleration
+if (global.envParams.cmdParams.dha) app.disableHardwareAcceleration()
+
+if (global.envParams.cmdParams.dt == null && global.envParams.cmdParams.nt != null) global.envParams.cmdParams.dt = global.envParams.cmdParams.nt
+if (global.envParams.cmdParams.dhmkh) app.commandLine.appendSwitch('disable-features', 'HardwareMediaKeyHandling')
+// fix linux transparent fail. https://github.com/electron/electron/issues/25153#issuecomment-843688494
+if (process.platform == 'linux') app.commandLine.appendSwitch('use-gl', 'desktop')
 
 // https://github.com/electron/electron/issues/22691
 app.commandLine.appendSwitch('wm-window-animations-disabled')
 
+
+const { navigationUrlWhiteList } = require('../common/config')
+const { getWindowSizeInfo, initSetting, updateSetting } = require('./utils')
+const { isMac, isLinux, initHotKey } = require('../common/utils')
+
+
 // https://github.com/electron/electron/issues/18397
 // 开发模式下为true时 多次引入native模块会导致渲染进程卡死
 // https://github.com/electron/electron/issues/22791
@@ -48,6 +59,7 @@ app.on('web-contents-created', (event, contents) => {
     event.preventDefault()
     if (/^devtools/.test(navigationUrl)) return
     console.log(navigationUrl)
+    if (!/^https?:\/\//.test(navigationUrl)) return
     await shell.openExternal(navigationUrl)
   })
   contents.on('will-attach-webview', (event, webPreferences, params) => {
@@ -82,7 +94,7 @@ if (isDev) {
   winURL = 'http://localhost:9080'
 } else {
   global.__static = path.join(__dirname, '/static')
-  winURL = `file://${__dirname}/index.html`
+  winURL = `file://${path.join(__dirname, 'index.html')}`
 }
 
 function createWindow() {
@@ -95,7 +107,7 @@ function createWindow() {
     useContentSize: true,
     width: windowSizeInfo.width,
     frame: false,
-    transparent: !isLinux && !global.envParams.nt,
+    transparent: !global.envParams.cmdParams.dt,
     enableRemoteModule: false,
     // icon: path.join(global.__static, isWin ? 'icons/256x256.ico' : 'icons/512x512.png'),
     resizable: false,
@@ -103,7 +115,7 @@ function createWindow() {
     fullscreenable: false,
     show: false,
     webPreferences: {
-      // contextIsolation: true,
+      contextIsolation: false,
       webSecurity: !isDev,
       nodeIntegration: true,
     },
@@ -123,15 +135,24 @@ global.appHotKey = {
   state: null,
 }
 
+global.lx_core = {
+  setAppConfig(setting, name) {
+    updateSetting(setting)
+    global.lx_event.common.configStatus(name)
+  },
+}
+
 function init() {
-  global.appSetting = initSetting()
+  console.log('init')
+  initSetting()
   global.appHotKey.config = initHotKey()
   global.lx_event.common.initSetting()
   global.lx_event.hotKey.init()
   createWindow()
 }
 
-app.on('ready', init)
+// https://github.com/electron/electron/issues/16809
+app.on('ready', isLinux ? () => setTimeout(init, 300) : init)
 
 app.on('activate', () => {
   if (global.modules.mainWindow) {

src/main/modules/hotKey/utils.js

@@ -23,7 +23,9 @@ exports.registerHotkey = ({ key, info }) => {
     }
   }
   global.appHotKey.state[key].info = info
-  let status = global.appHotKey.state[key].status = globalShortcut.isRegistered(transKey) ? false : globalShortcut.register(transKey, () => {
+  let status = global.appHotKey.state[key].status = globalShortcut.isRegistered(transKey)
+    ? false
+    : globalShortcut.register(transKey, () => {
       handleKeyDown(key)
     })
   return status

src/main/modules/index.js

@@ -2,3 +2,4 @@ require('./appMenu')
 require('./winLyric')
 require('./tray')
 require('./hotKey')
+require('./userApi')

src/main/modules/tray.js

@@ -1,6 +1,6 @@
 const { app, Tray, Menu } = require('electron')
 const { isWin } = require('../../common/utils')
-const { tray: TRAY_EVENT_NAME, common: COMMON_EVENT_NAME } = require('../events/_name')
+const { tray: TRAY_EVENT_NAME, common: COMMON_EVENT_NAME, mainWindow: MAIN_WINDOW_NAME } = require('../events/_name')
 const path = require('path')
 let isEnableTray = null
 let themeId = null
@@ -16,19 +16,29 @@ const themeList = [
     isNative: false,
   },
 ]
-global.lx_event.common.on(COMMON_EVENT_NAME.config, sourceName => {
+global.lx_event.common.on(COMMON_EVENT_NAME.configStatus, sourceName => {
   if (sourceName === TRAY_EVENT_NAME.name) return
   if (themeId !== global.appSetting.tray.themeId) {
     themeId = global.appSetting.tray.themeId
     setTrayImage(themeId)
   }
-  if (isEnableTray !== global.appSetting.tray.isToTray) {
+  if (isEnableTray !== global.appSetting.tray.isShow) {
-    isEnableTray = global.appSetting.tray.isToTray
+    isEnableTray = global.appSetting.tray.isShow
-    global.appSetting.tray.isToTray ? createTray() : destroyTray()
+    global.appSetting.tray.isShow ? createTray() : destroyTray()
   }
   createMenu(global.modules.tray)
 })
 
+global.lx_event.mainWindow.on(MAIN_WINDOW_NAME.ready_to_show, () => {
+  createMenu(global.modules.tray)
+})
+global.lx_event.mainWindow.on(MAIN_WINDOW_NAME.show, () => {
+  createMenu(global.modules.tray)
+})
+global.lx_event.mainWindow.on(MAIN_WINDOW_NAME.hide, () => {
+  createMenu(global.modules.tray)
+})
+
 const createTray = () => {
   if ((global.modules.tray && !global.modules.tray.isDestroyed()) || !global.appSetting.tray || !global.appSetting.tray.isShow) return
 
@@ -58,39 +68,55 @@ const destroyTray = () => {
 }
 
 const createMenu = tray => {
-  if (!global.modules.tray || !isWin) return
+  if (!global.modules.tray) return
   let menu = []
+  global.modules.mainWindow && menu.push(global.modules.mainWindow.isVisible() ? {
+    label: '隐藏主界面',
+    click() {
+      global.modules.mainWindow.hide()
+    },
+  } : {
+    label: '显示主界面',
+    click() {
+      if (!global.modules.mainWindow) return
+      if (!global.modules.mainWindow.isVisible()) {
+        global.modules.mainWindow.show()
+      }
+      global.modules.mainWindow.restore()
+      global.modules.mainWindow.focus()
+    },
+  })
   menu.push(global.appSetting.desktopLyric.enable ? {
     label: '关闭桌面歌词',
     click() {
-      global.lx_event.common.setAppConfig({ desktopLyric: { enable: false } }, TRAY_EVENT_NAME.name)
+      global.lx_core.setAppConfig({ desktopLyric: { enable: false } }, TRAY_EVENT_NAME.name)
     },
   } : {
     label: '开启桌面歌词',
     click() {
-      global.lx_event.common.setAppConfig({ desktopLyric: { enable: true } }, TRAY_EVENT_NAME.name)
+      global.lx_core.setAppConfig({ desktopLyric: { enable: true } }, TRAY_EVENT_NAME.name)
     },
   })
   menu.push(global.appSetting.desktopLyric.isLock ? {
     label: '解锁桌面歌词',
     click() {
-      global.lx_event.common.setAppConfig({ desktopLyric: { isLock: false } }, TRAY_EVENT_NAME.name)
+      global.lx_core.setAppConfig({ desktopLyric: { isLock: false } }, TRAY_EVENT_NAME.name)
     },
   } : {
     label: '锁定桌面歌词',
     click() {
-      global.lx_event.common.setAppConfig({ desktopLyric: { isLock: true } }, TRAY_EVENT_NAME.name)
+      global.lx_core.setAppConfig({ desktopLyric: { isLock: true } }, TRAY_EVENT_NAME.name)
     },
   })
   menu.push(global.appSetting.desktopLyric.isAlwaysOnTop ? {
     label: '取消置顶',
     click() {
-      global.lx_event.common.setAppConfig({ desktopLyric: { isAlwaysOnTop: false } }, TRAY_EVENT_NAME.name)
+      global.lx_core.setAppConfig({ desktopLyric: { isAlwaysOnTop: false } }, TRAY_EVENT_NAME.name)
     },
   } : {
     label: '置顶歌词',
     click() {
-      global.lx_event.common.setAppConfig({ desktopLyric: { isAlwaysOnTop: true } }, TRAY_EVENT_NAME.name)
+      global.lx_core.setAppConfig({ desktopLyric: { isAlwaysOnTop: true } }, TRAY_EVENT_NAME.name)
     },
   })
   menu.push({

src/main/modules/userApi/config/index.js

@@ -0,0 +1,2 @@
+
+exports.userApis = []

src/main/modules/userApi/event/event.js

@@ -0,0 +1,11 @@
+const { EventEmitter } = require('events')
+const USER_API_EVENT_NAME = require('./name')
+
+class UserApi extends EventEmitter {
+  status(info) {
+    this.emit(USER_API_EVENT_NAME.status, info)
+  }
+}
+
+module.exports = UserApi
+

src/main/modules/userApi/event/name.js

@@ -0,0 +1,3 @@
+module.exports = {
+  status: 'status',
+}

src/main/modules/userApi/index.js

@@ -0,0 +1,44 @@
+const Event = require('./event/event')
+const eventNames = require('./event/name')
+const { closeWindow } = require('./main')
+const { getUserApis, importApi, removeApi } = require('./utils')
+const { request, cancelRequest, getStatus, loadApi } = require('./rendererEvent/rendererEvent')
+
+// const { getApiList, importApi, removeApi, setApi, getStatus, request, eventNames }
+let userApiId
+
+exports.Event = Event
+exports.eventNames = eventNames
+
+exports.getApiList = getUserApis
+exports.importApi = script => {
+  return {
+    apiInfo: importApi(script),
+    apiList: getUserApis(),
+  }
+}
+exports.request = request
+exports.cancelRequest = cancelRequest
+exports.getStatus = getStatus
+
+exports.removeApi = async ids => {
+  if (userApiId && ids.includes(userApiId)) {
+    userApiId = null
+    await closeWindow()
+  }
+  removeApi(ids)
+  return getUserApis()
+}
+
+exports.setApi = async id => {
+  if (userApiId) {
+    userApiId = null
+    await closeWindow()
+  }
+  const apiList = getUserApis()
+  if (!apiList.some(a => a.id === id)) return
+  userApiId = id
+  await loadApi(id)
+}
+
+

src/main/modules/userApi/main.js

@@ -0,0 +1,88 @@
+const { BrowserWindow } = require('electron')
+const fs = require('fs')
+const path = require('path')
+
+// eslint-disable-next-line no-undef
+const dir = global.isDev ? __userApi : path.join(__dirname, 'userApi')
+
+const wait = time => new Promise(resolve => setTimeout(() => resolve(), time))
+
+let html = ''
+
+fs.readFile(path.join(dir, 'renderer/user-api.html'), 'utf8', (err, data) => {
+  if (err) throw new Error('api html read failed, info: ' + err.message)
+  html = data
+})
+
+const denyEvents = [
+  'new-window',
+  'will-navigate',
+  'will-redirect',
+  'will-attach-webview',
+  'will-prevent-unload',
+  'media-started-playing',
+]
+
+const winEvent = win => {
+  win.on('closed', () => {
+    win = global.modules.userApiWindow = null
+  })
+}
+
+exports.createWindow = async userApi => {
+  if (global.modules.userApiWindow) return
+  while (true) {
+    if (html) break
+    await wait(100)
+  }
+  /**
+   * Initial window options
+   */
+  global.modules.userApiWindow = new BrowserWindow({
+    enableRemoteModule: false,
+    resizable: false,
+    minimizable: false,
+    maximizable: false,
+    fullscreenable: false,
+    show: false,
+    webPreferences: {
+      contextIsolation: true,
+      worldSafeExecuteJavaScript: true,
+      nodeIntegration: false,
+      preload: path.join(dir, 'renderer/preload.js'),
+    },
+  })
+
+  for (const eventName of denyEvents) {
+    global.modules.userApiWindow.webContents.on(eventName, event => {
+      event.preventDefault()
+    })
+  }
+  global.modules.userApiWindow.webContents.session.setPermissionRequestHandler((webContents, permission, callback) => {
+    callback(false)
+  })
+
+  winEvent(global.modules.userApiWindow)
+
+  // console.log(html.replace('</body>', `<script>${userApi.script}</script></body>`))
+  const randomNum = Math.random().toString().substring(2, 10)
+  global.modules.userApiWindow.loadURL(
+    'data:text/html;charset=UTF-8,' + encodeURIComponent(html
+      .replace('<meta http-equiv="Content-Security-Policy" content="default-src \'none\'">',
+        `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${randomNum}';">`)
+      .replace('</body>', `<script nonce="${randomNum}">${userApi.script}</script></body>`)))
+
+  // global.modules.userApiWindow.loadFile(path.join(dir, 'renderer/user-api.html'))
+  // global.modules.userApiWindow.webContents.openDevTools()
+}
+
+exports.closeWindow = async() => {
+  if (!global.modules.userApiWindow) return
+  await Promise.all([
+    global.modules.userApiWindow.webContents.session.clearAuthCache(),
+    global.modules.userApiWindow.webContents.session.clearStorageData(),
+    global.modules.userApiWindow.webContents.session.clearCache(),
+  ])
+  global.modules.userApiWindow.destroy()
+  global.modules.userApiWindow = null
+}

src/main/modules/userApi/renderer/preload.js

@@ -0,0 +1,227 @@
+const { contextBridge, ipcRenderer } = require('electron')
+const needle = require('needle')
+const { createCipheriv, publicEncrypt, constants, randomBytes, createHash } = require('crypto')
+const USER_API_RENDERER_EVENT_NAME = require('../rendererEvent/name')
+
+const sendMessage = (action, status, data, message) => {
+  ipcRenderer.send(action, { status, data, message })
+}
+
+let isInitedApi = false
+const EVENT_NAMES = {
+  request: 'request',
+  inited: 'inited',
+}
+const eventNames = Object.values(EVENT_NAMES)
+const events = {
+  request: null,
+}
+const allSources = ['kw', 'kg', 'tx', 'wy', 'mg']
+const supportQualitys = {
+  kw: ['128k', '320k', 'flac'],
+  kg: ['128k', '320k', 'flac'],
+  tx: ['128k', '320k', 'flac'],
+  wy: ['128k', '320k', 'flac'],
+  mg: ['128k', '320k', 'flac'],
+}
+const supportActions = {
+  kw: ['musicUrl'],
+  kg: ['musicUrl'],
+  tx: ['musicUrl'],
+  wy: ['musicUrl'],
+  mg: ['musicUrl'],
+  xm: ['musicUrl'],
+}
+
+const handleRequest = (context, { requestKey, data }) => {
+  // console.log(data)
+  if (!events.request) return sendMessage(USER_API_RENDERER_EVENT_NAME.response, false, { requestKey }, 'Request event is not defined')
+  try {
+    events.request.call(context, { source: data.source, action: data.action, info: data.info }).then(response => {
+      let sendData = {
+        requestKey,
+      }
+      switch (data.action) {
+        case 'musicUrl':
+          sendData.result = {
+            source: data.source,
+            action: data.action,
+            data: {
+              type: data.info.type,
+              url: response,
+            },
+          }
+          break
+      }
+      sendMessage(USER_API_RENDERER_EVENT_NAME.response, true, sendData)
+    }).catch(err => {
+      sendMessage(USER_API_RENDERER_EVENT_NAME.response, false, { requestKey }, err.message)
+    })
+  } catch (err) {
+    sendMessage(USER_API_RENDERER_EVENT_NAME.response, false, { requestKey }, err.message)
+  }
+}
+
+/**
+ *
+ * @param {*} context
+ * @param {*} info {
+ *                    status: true,
+ *                    message: 'xxx',
+ *                    sources: {
+ *                         kw: ['128k', '320k', 'flac'],
+ *                         kg: ['128k', '320k', 'flac'],
+ *                         tx: ['128k', '320k', 'flac'],
+ *                         wy: ['128k', '320k', 'flac'],
+ *                         mg: ['128k', '320k', 'flac'],
+ *                     }
+ *                 }
+ */
+const handleInit = (context, info) => {
+  if (!info) {
+    sendMessage(USER_API_RENDERER_EVENT_NAME.init, false, null, 'Init failed')
+    // sendMessage(USER_API_RENDERER_EVENT_NAME.init, false, null, typeof info.message === 'string' ? info.message.substring(0, 100) : '')
+    return
+  }
+  if (info.openDevTools === true) {
+    sendMessage(USER_API_RENDERER_EVENT_NAME.openDevTools)
+  }
+  if (!info.status) {
+    sendMessage(USER_API_RENDERER_EVENT_NAME.init, false, null, 'Init failed')
+    // sendMessage(USER_API_RENDERER_EVENT_NAME.init, false, null, typeof info.message === 'string' ? info.message.substring(0, 100) : '')
+    return
+  }
+  const sourceInfo = {
+    sources: {},
+  }
+  try {
+    for (const source of allSources) {
+      const userSource = info.sources[source]
+      if (!userSource || userSource.type !== 'music') continue
+      const qualitys = supportQualitys[source]
+      const actions = supportActions[source]
+      sourceInfo.sources[source] = {
+        type: 'music',
+        actions: actions.filter(a => userSource.actions.includes(a)),
+        qualitys: qualitys.filter(q => userSource.qualitys.includes(q)),
+      }
+    }
+  } catch (error) {
+    console.log(error)
+    sendMessage(USER_API_RENDERER_EVENT_NAME.init, false, null, error.message)
+    return
+  }
+  sendMessage(USER_API_RENDERER_EVENT_NAME.init, true, sourceInfo)
+
+  ipcRenderer.on(USER_API_RENDERER_EVENT_NAME.request, (event, data) => {
+    handleRequest(context, data)
+  })
+}
+
+contextBridge.exposeInMainWorld('lx', {
+  EVENT_NAMES,
+  request(url, { method = 'get', timeout, headers, body, form, formData }, callback) {
+    let options = { headers }
+    let data
+    if (body) {
+      data = body
+    } else if (form) {
+      data = form
+      // data.content_type = 'application/x-www-form-urlencoded'
+      options.json = false
+    } else if (formData) {
+      data = formData
+      // data.content_type = 'multipart/form-data'
+      options.json = false
+    }
+    options.response_timeout = timeout
+
+    let request = needle.request(method, url, data, options, (err, resp, body) => {
+      if (!err) {
+        body = resp.body = resp.raw.toString()
+        try {
+          resp.body = JSON.parse(resp.body)
+        } catch (_) {}
+        body = resp.body
+      }
+      callback(err, {
+        statusCode: resp.statusCode,
+        statusMessage: resp.statusMessage,
+        headers: resp.headers,
+        bytes: resp.bytes,
+        raw: resp.raw,
+        body: body,
+      }, body)
+    }).request
+
+    return () => {
+      if (!request.aborted) request.abort()
+      request = null
+    }
+  },
+  send(eventName, data) {
+    return new Promise((resolve, reject) => {
+      if (!eventNames.includes(eventName)) return reject(new Error('The event is not supported: ' + eventName))
+      switch (eventName) {
+        case EVENT_NAMES.inited:
+          if (isInitedApi) return
+          isInitedApi = true
+          handleInit(this, data)
+          break
+        default:
+          resolve(new Error('Unknown event name: ' + eventName))
+      }
+    })
+  },
+  on(eventName, handler) {
+    if (!eventNames.includes(eventName)) return Promise.reject(new Error('The event is not supported: ' + eventName))
+    switch (eventName) {
+      case EVENT_NAMES.request:
+        events.request = handler
+        break
+    }
+  },
+  utils: {
+    crypto: {
+      aesEncrypt(buffer, mode, key, iv) {
+        const cipher = createCipheriv('aes-128-' + mode, key, iv)
+        return Buffer.concat([cipher.update(buffer), cipher.final()])
+      },
+      rsaEncrypt(buffer, key) {
+        buffer = Buffer.concat([Buffer.alloc(128 - buffer.length), buffer])
+        return publicEncrypt({ key: key, padding: constants.RSA_NO_PADDING }, buffer)
+      },
+      randomBytes(size) {
+        return randomBytes(size)
+      },
+      md5(str) {
+        return createHash('md5').update(str).digest('hex')
+      },
+    },
+    buffer: {
+      from(...args) {
+        return Buffer.from(...args)
+      },
+    },
+  },
+  // removeEvent(eventName, handler) {
+  //   if (!eventNames.includes(eventName)) return Promise.reject(new Error('The event is not supported: ' + eventName))
+  //   let handlers
+  //   switch (eventName) {
+  //     case EVENT_NAMES.request:
+  //       handlers = events.request
+  //       break
+  //   }
+  //   for (let index = 0; index < handlers.length; index++) {
+  //     if (handlers[index] === handler) {
+  //       handlers.splice(index, 1)
+  //       break
+  //     }
+  //   }
+  // },
+  // removeAllEvents() {
+  //   for (const handlers of Object.values(events)) {
+  //     handlers.splice(0, handlers.length)
+  //   }
+  // },
+})

src/main/modules/userApi/renderer/user-api.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>User api</title>
+</head>
+<body>
+
+</body>
+</html>

src/main/modules/userApi/rendererEvent/name.js

@@ -0,0 +1,12 @@
+const names = {
+  init: '',
+  request: '',
+  response: '',
+  openDevTools: '',
+}
+
+
+for (const key of Object.keys(names)) {
+  names[key] = `userApi_${key}`
+}
+module.exports = names

src/main/modules/userApi/rendererEvent/rendererEvent.js

@@ -0,0 +1,82 @@
+const { mainOn, mainSend } = require('@common/ipc')
+
+const USER_API_RENDERER_EVENT_NAME = require('../rendererEvent/name')
+const { createWindow } = require('../main')
+const { getUserApis } = require('../utils')
+
+let userApi
+let status = { status: true }
+const requestQueue = new Map()
+const timeouts = {}
+
+const handleInit = (event, { status, message, data: apiInfo }) => {
+  // console.log('inited')
+  if (!status) {
+    console.log('init failed:', message)
+    global.lx_event.userApi.status(status = { status: false, apiInfo: userApi, message })
+    return
+  }
+  global.lx_event.userApi.status(status = { status: true, apiInfo: { ...userApi, sources: apiInfo.sources } })
+}
+const handleResponse = (event, { status, data: { requestKey, result }, message }) => {
+  const request = requestQueue.get(requestKey)
+  if (!request) return
+  requestQueue.delete(requestKey)
+  clearTimeout(timeouts[requestKey])
+  delete timeouts[requestKey]
+  if (status) {
+    request[0](result)
+  } else {
+    request[1](new Error(message))
+  }
+}
+const handleOpenDevTools = () => {
+  if (global.modules.userApiWindow) {
+    global.modules.userApiWindow.webContents.openDevTools()
+  }
+}
+mainOn(USER_API_RENDERER_EVENT_NAME.init, handleInit)
+mainOn(USER_API_RENDERER_EVENT_NAME.response, handleResponse)
+mainOn(USER_API_RENDERER_EVENT_NAME.openDevTools, handleOpenDevTools)
+
+exports.loadApi = async apiId => {
+  if (!apiId) return global.lx_event.userApi.status(status = { status: false, message: 'api id is null' })
+  userApi = getUserApis().find(api => api.id == apiId)
+  console.log('load api', userApi.name)
+  await createWindow(userApi)
+  // if (!userApi) return global.lx_event.userApi.status(status = { status: false, message: 'api script is not found' })
+  // if (!global.modules.userApiWindow) {
+  //   global.lx_event.userApi.status(status = { status: false, message: 'user api runtime is not defined' })
+  //   throw new Error('user api window is not defined')
+  // }
+
+  // // const path = require('path')
+  // // // eslint-disable-next-line no-undef
+  // // userApi.script = require('fs').readFileSync(path.join(global.isDev ? __userApi : __dirname, 'renderer/test-api.js')).toString()
+  // console.log('load api', userApi.name)
+  // mainSend(global.modules.userApiWindow, USER_API_RENDERER_EVENT_NAME.init, { userApi })
+}
+
+exports.cancelRequest = requestKey => {
+  if (!requestQueue.has(requestKey)) return
+  const request = requestQueue.get(requestKey)
+  request[1](new Error('Cancel request'))
+  requestQueue.delete(requestKey)
+  clearTimeout(timeouts[requestKey])
+  delete timeouts[requestKey]
+}
+
+exports.request = ({ requestKey, data }) => new Promise((resolve, reject) => {
+  if (!userApi) return reject(new Error('user api is not load'))
+
+  // const requestKey = `request__${Math.random().toString().substring(2)}`
+
+  timeouts[requestKey] = setTimeout(() => {
+    exports.cancelRequest(requestKey)
+  }, 20000)
+
+  requestQueue.set(requestKey, [resolve, reject, data])
+  mainSend(global.modules.userApiWindow, USER_API_RENDERER_EVENT_NAME.request, { requestKey, data })
+})
+
+exports.getStatus = () => status

src/main/modules/userApi/utils/index.js

@@ -0,0 +1,44 @@
+const { userApis: defaultUserApis } = require('../config')
+const getStore = require('@common/store')
+
+let userApis
+
+exports.getUserApis = () => {
+  const electronStore_userApi = getStore('userApi')
+  if (userApis) return userApis
+  userApis = electronStore_userApi.get('userApis')
+  if (!userApis) {
+    userApis = defaultUserApis
+    electronStore_userApi.set('userApis', userApis)
+  }
+  return userApis
+}
+
+exports.importApi = script => {
+  let scriptInfo = script.split(/\r?\n/)
+  let name = scriptInfo[1] || ''
+  let description = scriptInfo[2] || ''
+  name = name.startsWith(' * @name ') ? name.replace(' * @name ', '').trim() : `user_api_${new Date().toLocaleString()}`
+  if (name.length > 10) name = name.substring(0, 10) + '...'
+  description = description.startsWith(' * @description ') ? description.replace(' * @description ', '').trim() : ''
+  if (description.length > 20) description = description.substring(0, 20) + '...'
+  const apiInfo = {
+    id: `user_api_${Math.random().toString().substring(2, 5)}_${Date.now()}`,
+    name,
+    description,
+    script,
+  }
+  userApis.push(apiInfo)
+  getStore('userApi').set('userApis', userApis)
+  return apiInfo
+}
+
+exports.removeApi = ids => {
+  for (let index = userApis.length - 1; index > -1; index--) {
+    if (ids.includes(userApis[index].id)) {
+      userApis.splice(index, 1)
+      ids.splice(index, 1)
+    }
+  }
+  getStore('userApi').set('userApis', userApis)
+}

src/main/modules/winLyric/event.js

@@ -1,16 +1,20 @@
 const { common: COMMON_EVENT_NAME, winLyric: WIN_LYRIC_EVENT_NAME, hotKey: HOT_KEY_EVENT_NAME, mainWindow: MAIN_WINDOW_EVENT_NAME } = require('../../events/_name')
 const { mainSend, NAMES: { winLyric: ipcWinLyricNames } } = require('../../../common/ipc')
 const { desktop_lyric } = require('../../../common/hotKey')
+const { getLyricWindowBounds } = require('./utils')
 
 let isLock = null
 let isEnable = null
 let isAlwaysOnTop = null
+let isLockScreen = null
 const setLrcConfig = () => {
   let desktopLyric = global.appSetting.desktopLyric
   if (global.modules.lyricWindow) {
     mainSend(global.modules.lyricWindow, ipcWinLyricNames.set_lyric_config, {
       config: desktopLyric,
       languageId: global.appSetting.langId,
+      isShowLyricTranslation: global.appSetting.player.isShowLyricTranslation,
+      isPlayLxlrc: global.appSetting.player.isPlayLxlrc,
     })
     if (isLock != desktopLyric.isLock) {
       isLock = desktopLyric.isLock
@@ -24,6 +28,17 @@ const setLrcConfig = () => {
       isAlwaysOnTop = desktopLyric.isAlwaysOnTop
       global.modules.lyricWindow.setAlwaysOnTop(desktopLyric.isAlwaysOnTop, 'screen-saver')
     }
+    if (isLockScreen != desktopLyric.isLockScreen) {
+      isLockScreen = desktopLyric.isLockScreen
+      if (desktopLyric.isLockScreen) {
+        global.modules.lyricWindow.setBounds(getLyricWindowBounds(global.modules.lyricWindow.getBounds(), {
+          x: null,
+          y: null,
+          w: desktopLyric.width,
+          h: desktopLyric.height,
+        }))
+      }
+    }
   }
   if (isEnable != desktopLyric.enable) {
     isEnable = desktopLyric.enable
@@ -34,9 +49,9 @@ const setLrcConfig = () => {
     }
   }
 }
-global.lx_event.common.on(COMMON_EVENT_NAME.config, name => {
+global.lx_event.common.on(COMMON_EVENT_NAME.configStatus, name => {
   if (WIN_LYRIC_EVENT_NAME.name === name) return
-  setLrcConfig(false)
+  setLrcConfig()
 })
 
 global.lx_event.mainWindow.on(MAIN_WINDOW_EVENT_NAME.setLyricInfo, info => {
@@ -62,5 +77,5 @@ global.lx_event.hotKey.on(HOT_KEY_EVENT_NAME.keyDown, ({ type, key }) => {
   }
   desktopLyricSetting[settingKey] = !desktopLyricSetting[settingKey]
 
-  global.lx_event.common.setAppConfig({ desktopLyric: desktopLyricSetting }, null)
+  global.lx_core.setAppConfig({ desktopLyric: desktopLyricSetting }, null)
 })

src/main/modules/winLyric/index.js

@@ -1,6 +1,8 @@
+const path = require('path')
 const { BrowserWindow } = require('electron')
 const { winLyric: WIN_LYRIC_EVENT_NAME } = require('../../events/_name')
 const { debounce } = require('../../../common/utils')
+const { getLyricWindowBounds } = require('./utils')
 
 require('./event')
 require('./rendererEvent')
@@ -12,14 +14,14 @@ global.lx_event.winLyric.on(WIN_LYRIC_EVENT_NAME.close, () => {
   closeWindow()
 })
 
-let winURL = global.isDev ? 'http://localhost:9081/lyric.html' : `file://${__dirname}/lyric.html`
+let winURL = global.isDev ? 'http://localhost:9081/lyric.html' : `file://${path.join(__dirname, 'lyric.html')}`
 
 const setLyricsConfig = debounce(config => {
   // if (x != null) bounds.x = x
   // if (y != null) bounds.y = y
   // if (width != null) bounds.width = width
   // if (height != null) bounds.height = height
-  global.lx_event.common.setAppConfig({ desktopLyric: config }, WIN_LYRIC_EVENT_NAME.name)
+  global.lx_core.setAppConfig({ desktopLyric: config }, WIN_LYRIC_EVENT_NAME.name)
 }, 500)
 
 const winEvent = lyricWindow => {
@@ -67,29 +69,33 @@ const winEvent = lyricWindow => {
   })
 }
 
-
 const createWindow = () => {
   if (global.modules.lyricWindow) return
   if (!global.appSetting.desktopLyric.enable) return
   // const windowSizeInfo = getWindowSizeInfo(global.appSetting)
   let { x, y, width, height, isAlwaysOnTop } = global.appSetting.desktopLyric
   let { width: screenWidth, height: screenHeight } = global.envParams.workAreaSize
-  screenWidth += 16
-  screenHeight += 16
   if (x == null) {
-    x = screenWidth - width - 8
+    x = screenWidth - width
-    y = screenHeight - height - 8
+    y = screenHeight - height
+  }
+  if (global.appSetting.desktopLyric.isLockScreen) {
+    let bounds = getLyricWindowBounds({ x, y, width, height }, { x: null, y: null, w: width, h: height })
+    x = bounds.x
+    y = bounds.y
+    width = bounds.width
+    height = bounds.height
   }
   /**
    * Initial window options
    */
   global.modules.lyricWindow = new BrowserWindow({
-    height: height > screenHeight ? screenHeight : height,
+    height,
-    width: width > screenWidth ? screenWidth : width,
+    width,
-    x: Math.max(-8, screenWidth < (width + x) ? screenWidth - width : x),
+    x,
-    y: Math.max(-8, screenHeight < (height + y) ? screenHeight - height : y),
+    y,
-    minWidth: 300,
+    minWidth: 380,
-    minHeight: 300,
+    minHeight: 80,
     useContentSize: true,
     frame: false,
     transparent: true,
@@ -103,7 +109,7 @@ const createWindow = () => {
     alwaysOnTop: isAlwaysOnTop,
     skipTaskbar: true,
     webPreferences: {
-      // contextIsolation: true,
+      contextIsolation: false,
       webSecurity: !global.isDev,
       nodeIntegration: true,
     },

src/main/modules/winLyric/rendererEvent.js

@@ -8,6 +8,7 @@ const {
   },
 } = require('../../../common/ipc')
 const { winLyric: WIN_LYRIC_EVENT_NAME } = require('../../events/_name')
+const { getLyricWindowBounds } = require('./utils')
 
 mainOn(ipcWinLyricNames.get_lyric_info, (event, action) => {
   if (!global.modules.mainWindow) return
@@ -19,57 +20,18 @@ mainOn(ipcWinLyricNames.get_lyric_info, (event, action) => {
 })
 
 mainOn(ipcWinLyricNames.set_lyric_config, (event, config) => {
-  global.lx_event.common.setAppConfig({ desktopLyric: config }, WIN_LYRIC_EVENT_NAME.name)
+  global.lx_core.setAppConfig({ desktopLyric: config }, WIN_LYRIC_EVENT_NAME.name)
 })
 
 mainHandle(ipcWinLyricNames.get_lyric_config, async() => {
-  return { config: global.appSetting.desktopLyric, languageId: global.appSetting.langId }
+  return {
+    config: global.appSetting.desktopLyric,
+    languageId: global.appSetting.langId,
+    isShowLyricTranslation: global.appSetting.player.isShowLyricTranslation,
+    isPlayLxlrc: global.appSetting.player.isPlayLxlrc,
+  }
 })
 
-let bounds
+mainOn(ipcWinLyricNames.set_win_bounds, (event, options) => {
-let winX
+  global.modules.lyricWindow.setBounds(getLyricWindowBounds(global.modules.lyricWindow.getBounds(), options))
-let winY
-let wasW
-let wasY
-mainOn(ipcWinLyricNames.set_win_bounds, (event, { x = 0, y = 0, w = 0, h = 0 }) => {
-  if (!global.modules.lyricWindow) return
-  bounds = global.modules.lyricWindow.getBounds()
-  wasW = global.envParams.workAreaSize.width
-  wasY = global.envParams.workAreaSize.height + 8
-
-  bounds.width = w + bounds.width
-  bounds.height = h + bounds.height
-  if (bounds.width > wasW - 8) {
-    bounds.width = wasW - 8
-  } else if (bounds.width < 300) {
-    bounds.width = 300
-  }
-  if (bounds.height > wasY) {
-    bounds.height = wasY + 8
-  } else if (bounds.height < 120) {
-    bounds.height = 120
-  }
-
-
-  if (x != 0) {
-    winX = bounds.x + x
-    if (winX > wasW - bounds.width + 8) {
-      winX = wasW - bounds.width + 8
-    } else if (winX < -8) {
-      winX = -8
-    }
-    bounds.x = winX
-  }
-  if (y != 0) {
-    winY = bounds.y + y
-    if (winY > wasY - bounds.height) {
-      winY = wasY - bounds.height
-    } else if (winY < -8) {
-      winY = -8
-    }
-    bounds.y = winY
-  }
-
-  // console.log(bounds)
-  global.modules.lyricWindow.setBounds(bounds)
 })

src/main/modules/winLyric/utils.js

@@ -0,0 +1,68 @@
+// 设置窗口位置、大小
+let winX
+let winY
+let wasW
+let wasH
+let offset = 8
+let minWidth = 380
+let minHeight = 80
+exports.getLyricWindowBounds = (bounds, { x = 0, y = 0, w = 0, h = 0 }) => {
+  if (w < minWidth) w = minWidth
+  if (h < minHeight) h = minHeight
+
+  if (global.appSetting.desktopLyric.isLockScreen) {
+    wasW = global.envParams.workAreaSize.width + offset
+    wasH = global.envParams.workAreaSize.height + offset
+    if (w > wasW + offset) w = wasW + offset
+    if (h > wasH + offset) h = wasH + offset
+    if (x == null) {
+      if (bounds.x > wasW - w) {
+        x = wasW - w - bounds.x
+      } else if (bounds.x < -offset) {
+        x = bounds.x + offset
+      } else {
+        x = 0
+      }
+      if (bounds.y > wasH - h) {
+        y = wasH - h - bounds.y
+      } else if (bounds.y < -offset) {
+        y = bounds.y + offset
+      } else {
+        y = 0
+      }
+    }
+    winX = bounds.x + x
+    winY = bounds.y + y
+
+    if (x != 0) {
+      if (winX < -offset) {
+        winX = -offset
+      } else if (winX + w > wasW) {
+        winX = wasW - w
+      }
+    }
+    if (y != 0) {
+      if (winY < -offset) {
+        winY = -offset
+      } else if (winY + h > wasH) {
+        winY = wasH - h
+      }
+    }
+
+    x = winX
+    y = winY
+
+    if (x + w > wasW) w = wasW - x
+    if (y + h > wasH) h = wasH - y
+  } else {
+    y += bounds.y
+    x += bounds.x
+  }
+
+  bounds.width = w
+  bounds.height = h
+  bounds.x = x
+  bounds.y = y
+  // console.log('util bounds', bounds)
+  return bounds
+}

src/main/rendererEvents/appSetting.js

@@ -0,0 +1,11 @@
+const { mainWindow: MAIN_WINDOW_EVENT_NAME } = require('../events/_name')
+const { NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
+
+
+mainHandle(ipcMainWindowNames.set_app_setting, (event, config) => {
+  if (!config) return
+  global.lx_core.setAppConfig(config, MAIN_WINDOW_EVENT_NAME.name)
+  return global.appSetting
+})
+
+mainHandle(ipcMainWindowNames.get_setting, async() => ({ setting: global.appSetting, version: global.appSettingVersion }))

src/main/rendererEvents/cache.js

@@ -1,7 +1,11 @@
 const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')
 
+mainHandle(ipcMainWindowNames.clear_cache, async(event, options) => {
+  if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
+  return global.modules.mainWindow.webContents.session.clearCache()
+})
+
 mainHandle(ipcMainWindowNames.get_cache_size, async(event, options) => {
   if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
   return global.modules.mainWindow.webContents.session.getCacheSize()
 })
-

src/main/rendererEvents/clearCache.js

@@ -1,8 +0,0 @@
-const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')
-
-mainHandle(ipcMainWindowNames.clear_cache, async(event, options) => {
-  if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
-  return global.modules.mainWindow.webContents.session.clearCache()
-})
-
-

src/main/rendererEvents/data.js

@@ -0,0 +1,8 @@
+const { mainOn, NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
+const getStore = require('@common/store')
+
+
+mainHandle(ipcMainWindowNames.get_data, async(event, path) => getStore('data').get(path))
+
+
+mainOn(ipcMainWindowNames.save_data, (event, { path, data }) => getStore('data').set(path, data))

src/main/rendererEvents/getDataPath.js

@@ -0,0 +1,5 @@
+const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')
+const { app } = require('electron')
+
+mainHandle(ipcMainWindowNames.get_data_path, async() => app.getPath('userData'))
+

src/main/rendererEvents/hotKey.js

@@ -1,5 +1,8 @@
-const { mainSend, NAMES: { mainWindow: ipcMainWindowNames }, mainOn } = require('../../common/ipc')
+const { mainSend, NAMES: { mainWindow: ipcMainWindowNames }, mainOn, mainHandle } = require('../../common/ipc')
 const { mainWindow: MAIN_WINDOW_EVENT_NAME, hotKey: HOT_KEY_EVENT_NAME } = require('../events/_name')
+const getStore = require('@common/store')
+
+
 // const { registerHotkey, unRegisterHotkey } = require('../modules/hotKey/utils')
 
 // mainHandle(ipcMainWindowNames.set_hot_key_config, async(event, { action, data }) => {
@@ -14,6 +17,14 @@ const { mainWindow: MAIN_WINDOW_EVENT_NAME, hotKey: HOT_KEY_EVENT_NAME } = requi
 //   }
 // })
 
+mainHandle(ipcMainWindowNames.get_hot_key, async() => {
+  const electronStore_hotKey = getStore('hotKey')
+  return {
+    local: electronStore_hotKey.get('local'),
+    global: electronStore_hotKey.get('global'),
+  }
+})
+
 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())

src/main/rendererEvents/index.js

@@ -7,14 +7,19 @@ require('./musicMeta')
 require('./selectDir')
 require('./setWindowSize')
 require('./showSaveDialog')
-require('./clearCache')
+require('./cache')
-require('./getCacheSize')
 require('./setIgnoreMouseEvent')
 require('./getEnvParams')
-require('./setAppSetting')
+require('./appSetting')
 require('./setLyricInfo')
 require('./hotKey')
-
+require('./getDataPath')
-require('./xm_verify')
+require('./showDialog')
+require('./playList')
+require('./data')
+require('./lyric')
+require('./musicUrl')
 
 require('./kw_decodeLyric')
+
+require('./userApi')

src/main/rendererEvents/lyric.js

@@ -0,0 +1,10 @@
+const { mainOn, NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
+const getStore = require('@common/store')
+
+
+mainHandle(ipcMainWindowNames.get_lyric, async(event, id) => getStore('lyrics', true, false).get(id) || {})
+
+
+mainOn(ipcMainWindowNames.save_lyric, (event, { id, lyrics }) => getStore('lyrics', true, false).set(id, lyrics))
+
+mainOn(ipcMainWindowNames.clear_lyric, () => getStore('lyrics', true, false).clear())

src/main/rendererEvents/musicUrl.js

@@ -0,0 +1,10 @@
+const { mainOn, NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
+const getStore = require('@common/store')
+
+
+mainHandle(ipcMainWindowNames.get_music_url, async(event, id) => getStore('musicUrls', true, false).get(id) || '')
+
+
+mainOn(ipcMainWindowNames.save_music_url, (event, { id, url }) => getStore('musicUrls', true, false).set(id, url))
+
+mainOn(ipcMainWindowNames.clear_music_url, () => getStore('musicUrls', true, false).clear())

src/main/rendererEvents/playList.js

@@ -0,0 +1,32 @@
+const { mainOn, NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
+const getStore = require('@common/store')
+
+
+mainHandle(ipcMainWindowNames.get_playlist, async(event, isIgnoredError = false) => {
+  const electronStore_list = getStore('playList', isIgnoredError, false)
+
+  return {
+    defaultList: electronStore_list.get('defaultList'),
+    loveList: electronStore_list.get('loveList'),
+    userList: electronStore_list.get('userList'),
+    downloadList: getStore('downloadList').get('list'),
+  }
+})
+
+const handleSaveList = ({ defaultList, loveList, userList }) => {
+  let data = {}
+  if (defaultList != null) data.defaultList = defaultList
+  if (loveList != null) data.loveList = loveList
+  if (userList != null) data.userList = userList
+  getStore('playList').set(data)
+}
+mainOn(ipcMainWindowNames.save_playlist, (event, { type, data }) => {
+  switch (type) {
+    case 'myList':
+      handleSaveList(data)
+      break
+    case 'downloadList':
+      getStore('downloadList').set('list', data)
+      break
+  }
+})

src/main/rendererEvents/setAppSetting.js

@@ -1,7 +0,0 @@
-const { mainWindow: MAIN_WINDOW_EVENT_NAME } = require('../events/_name')
-const { mainOn, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')
-
-mainOn(ipcMainWindowNames.set_app_setting, (event, config) => {
-  if (!config) return
-  global.lx_event.common.setAppConfig(config, MAIN_WINDOW_EVENT_NAME.name)
-})

src/main/rendererEvents/showDialog.js

@@ -0,0 +1,12 @@
+const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')
+const { dialog } = require('electron')
+
+
+mainHandle(ipcMainWindowNames.show_dialog, async(event, { type, message, detail }) => {
+  if (!global.modules.mainWindow) throw new Error('mainWindow is undefined')
+  dialog.showMessageBoxSync(global.modules.mainWindow, {
+    type,
+    message,
+    detail,
+  })
+})

src/main/rendererEvents/userApi.js

@@ -0,0 +1,35 @@
+const { mainSend, mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('@common/ipc')
+const { getApiList, importApi, removeApi, setApi, getStatus, request, cancelRequest, eventNames } = require('../modules/userApi')
+
+const handleStatusChange = status => {
+  mainSend(global.modules.mainWindow, ipcMainWindowNames.user_api_status, status)
+}
+
+global.lx_event.userApi.on(eventNames.status, handleStatusChange)
+
+mainHandle(ipcMainWindowNames.import_user_api, async(event, script) => {
+  return importApi(script)
+})
+
+mainHandle(ipcMainWindowNames.remove_user_api, (event, apiIds) => {
+  return removeApi(apiIds)
+})
+
+mainHandle(ipcMainWindowNames.set_user_api, (event, apiId) => {
+  return setApi(apiId)
+})
+
+mainHandle(ipcMainWindowNames.get_user_api_list, event => {
+  return getApiList()
+})
+
+mainHandle(ipcMainWindowNames.get_user_api_status, event => {
+  return getStatus()
+})
+
+mainHandle(ipcMainWindowNames.request_user_api, (event, musicInfo) => {
+  return request(musicInfo)
+})
+mainHandle(ipcMainWindowNames.request_user_api_cancel, (event, requestKey) => {
+  return cancelRequest(requestKey)
+})

src/main/rendererEvents/winEvent.js

@@ -29,5 +29,13 @@ module.exports = mainWindow => {
 
   mainWindow.once('ready-to-show', () => {
     mainWindow.show()
+    global.lx_event.mainWindow.readyToShow()
+  })
+
+  mainWindow.on('show', () => {
+    global.lx_event.mainWindow.show()
+  })
+  mainWindow.on('hide', () => {
+    global.lx_event.mainWindow.hide()
   })
 }

src/main/rendererEvents/xm_verify/index.js

@@ -1,4 +0,0 @@
-const { isMac } = require('../../../common/utils')
-
-// mac下的 BrowserView 无法拖动验证栏，改用 BrowserWindow
-require(isMac ? './xm_verify_win' : './xm_verify_view')

src/main/rendererEvents/xm_verify/xm_verify.js

@@ -1,4 +0,0 @@
-const { isMac } = require('../../../common/utils')
-
-// mac下的 BrowserView 无法拖动验证栏，改用 BrowserWindow
-require(isMac ? './xm_verify_win' : './xm_verify_view')

src/main/rendererEvents/xm_verify/xm_verify_view.js

@@ -1,66 +0,0 @@
-const { BrowserView } = require('electron')
-const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../../common/ipc')
-const { getWindowSizeInfo } = require('../../utils')
-
-let view
-let isActioned = false
-let rejectFn
-
-const closeView = async() => {
-  if (!view) return
-  // await view.webContents.session.clearCache()
-  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.modules.mainWindow) return reject(new Error('mainWindow is undefined'))
-  if (view) {
-    global.modules.mainWindow.removeBrowserView(view)
-    view.destroy()
-  }
-
-  rejectFn = reject
-
-  isActioned = false
-
-  view = new BrowserView({
-    webPreferences: {
-      enableRemoteModule: false,
-      disableHtmlFullscreenWindowResize: true,
-    },
-  })
-  view.webContents.on('did-finish-load', () => {
-    if (/punish\?/.test(view.webContents.getURL())) return
-    let ses = view.webContents.session
-    ses.cookies.get({ name: 'x5sec' })
-      .then(async([x5sec]) => {
-        isActioned = true
-        await closeView()
-        if (!x5sec) return reject(new Error('get x5sec failed'))
-        resolve(x5sec.value)
-      }).catch(async err => {
-        isActioned = true
-        await closeView()
-        reject(err)
-      })
-  })
-
-  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, {
-    httpReferrer: 'https://www.xiami.com/',
-  })
-  // view.webContents.openDevTools()
-}))
-
-mainHandle(ipcMainWindowNames.handle_xm_verify_close, async() => {
-  await closeView()
-  if (!rejectFn) return
-  if (!isActioned) rejectFn(new Error('canceled verify'))
-  rejectFn = null
-})
-

src/main/rendererEvents/xm_verify/xm_verify_win.js

@@ -1,77 +0,0 @@
-const { BrowserWindow } = require('electron')
-const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../../common/ipc')
-const { getWindowSizeInfo } = require('../../utils')
-
-let win
-
-const closeWin = async() => {
-  if (!win) return
-  // await win.webContents.session.clearCache()
-  // if (global.modules.mainWindow) global.modules.mainWindow.removeBrowserView(win)
-  if (win.isDestroyed()) {
-    win = null
-    return
-  }
-  await win.webContents.session.clearStorageData()
-  win.destroy()
-  win = null
-}
-
-mainHandle(ipcMainWindowNames.handle_xm_verify_open, (event, url) => new Promise((resolve, reject) => {
-  if (!global.modules.mainWindow) return reject(new Error('mainWindow is undefined'))
-  if (win) win.destroy()
-
-  let isActioned = false
-
-  const mainWindowSizeInfo = global.modules.mainWindow.getBounds()
-  const windowSizeInfo = getWindowSizeInfo(global.appSetting)
-  win = new BrowserWindow({
-    parent: global.modules.mainWindow,
-    width: 460,
-    height: 370,
-    resizable: false,
-    // transparent: true,
-    x: mainWindowSizeInfo.x + (windowSizeInfo.width - 460) / 2,
-    y: mainWindowSizeInfo.y + (windowSizeInfo.height - 320 + 52) / 2,
-    minimizable: false,
-    maximizable: false,
-    // movable: false,
-    // frame: false,
-    // modal: true,
-    webPreferences: {
-      enableRemoteModule: false,
-      disableHtmlFullscreenWindowResize: true,
-    },
-  })
-  win.webContents.on('did-finish-load', () => {
-    if (/punish\?/.test(win.webContents.getURL())) return
-    let ses = win.webContents.session
-    ses.cookies.get({ name: 'x5sec' })
-      .then(async([x5sec]) => {
-        isActioned = true
-        await closeWin()
-        if (!x5sec) return reject(new Error('get x5sec failed'))
-        resolve(x5sec.value)
-      }).catch(async err => {
-        isActioned = true
-        await closeWin()
-        reject(err)
-      })
-  })
-
-  win.webContents.loadURL(url, {
-    httpReferrer: 'https://www.xiami.com/',
-  })
-
-  win.on('closed', async() => {
-    await closeWin()
-    if (isActioned) return
-    reject(new Error('canceled verify'))
-  })
-
-  // win.webContents.openDevTools()
-}))
-
-mainHandle(ipcMainWindowNames.handle_xm_verify_close, async() => {
-  await closeWin()
-})

src/main/utils/flacMeta.js

@@ -72,9 +72,9 @@ module.exports = (filePath, meta) => {
       if (respones.statusCode !== 200 && respones.statusCode != 206) return writeMeta(filePath, meta)
       respones
         .pipe(fs.createWriteStream(picPath))
-        .on('finish', () => {
+        .on('finish', async() => {
           if (respones.complete) {
-            writeMeta(filePath, meta, picPath)
+            await writeMeta(filePath, meta, picPath)
           } else {
             writeMeta(filePath, meta)
           }

src/main/utils/index.js

@@ -1,22 +1,18 @@
-const Store = require('electron-store')
 const { windowSizeList } = require('../../common/config')
-const { objectDeepMerge, throttle } = require('../../common/utils')
+const { objectDeepMerge, throttle, initSetting } = require('../../common/utils')
+const getStore = require('@common/store')
 
 exports.getWindowSizeInfo = ({ windowSizeId = 1 } = {}) => {
   return windowSizeList.find(i => i.id === windowSizeId) || windowSizeList[0]
 }
 
-const electronStore_config = new Store({
-  name: 'config',
-})
 exports.getAppSetting = () => {
-  return electronStore_config.get('setting')
+  return getStore('config').get('setting')
 }
 
-const electronStore_hotKey = new Store({
-  name: 'hotKey',
-})
 exports.getAppHotKeyConfig = () => {
+  const electronStore_hotKey = getStore('hotKey')
+
   return {
     global: electronStore_hotKey.get('global'),
     local: electronStore_hotKey.get('local'),
@@ -25,17 +21,23 @@ exports.getAppHotKeyConfig = () => {
 const saveHotKeyConfig = throttle(config => {
   for (const key of Object.keys(config)) {
     global.appHotKey.config[key] = config[key]
-    electronStore_hotKey.set(key, config[key])
+    getStore('hotKey').set(key, config[key])
   }
 })
 exports.saveAppHotKeyConfig = config => {
   saveHotKeyConfig(config)
 }
 
-const saveSetting = throttle(n => {
+// const saveSetting = throttle(n => {
-  electronStore_config.set('setting', n)
+//   electronStore_config.set('setting', n)
-})
+// })
-exports.updateSetting = settings => {
+exports.updateSetting = (settings) => {
   objectDeepMerge(global.appSetting, settings)
-  saveSetting(global.appSetting)
+  getStore('config').set('setting', global.appSetting)
+  exports.initSetting(false)
+}
+exports.initSetting = (isShowErrorAlert = true) => {
+  const info = initSetting(isShowErrorAlert)
+  global.appSetting = info.setting
+  global.appSettingVersion = info.version
 }

src/main/utils/mp3Meta.js

@@ -47,6 +47,9 @@ module.exports = (filePath, meta) => {
           if (err) console.log(err.message)
           delete meta.APIC
           handleWriteMeta(meta, filePath)
+          fs.unlink(picPath, err => {
+            if (err) console.log(err.message)
+          })
         })
     })
     .on('error', err => {

src/renderer-lyric/App.vue

@@ -4,7 +4,7 @@
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
       .control-bar(v-show="!lrcConfig.isLock")
         core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
-    core-lyric(:lrcConfig="lrcConfig")
+    core-lyric(:lrcConfig="lrcConfig" :isPlayLxlrc="isPlayLxlrc" :isShowLyricTranslation="isShowLyricTranslation")
   div.resize-left(@mousedown.self="handleMouseDown('left', $event)")
   div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
   div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
@@ -44,55 +44,47 @@ export default {
           isZoomActiveLrc: true,
         },
       },
+      isShowLyricTranslation: true,
+      isPlayLxlrc: true,
       themeList: [
         {
           id: 0,
-          name: '绿意盎然',
           className: 'green',
         },
         {
           id: 1,
-          name: '绿意盎然',
           className: 'yellow',
         },
         {
           id: 2,
-          name: '绿意盎然',
           className: 'blue',
         },
         {
           id: 3,
-          name: '绿意盎然',
           className: 'red',
         },
         {
           id: 4,
-          name: '绿意盎然',
           className: 'pink',
         },
         {
           id: 5,
-          name: '绿意盎然',
           className: 'purple',
         },
         {
           id: 6,
-          name: '绿意盎然',
           className: 'orange',
         },
         {
           id: 7,
-          name: '绿意盎然',
           className: 'grey',
         },
         {
           id: 8,
-          name: '绿意盎然',
           className: 'ming',
         },
         {
           id: 9,
-          name: '绿意盎然',
           className: 'blue2',
         },
       ],
@@ -117,8 +109,10 @@ export default {
     document.removeEventListener('mouseup', this.handleMouseUp)
   },
   methods: {
-    handleUpdateConfig({ config, languageId }) {
+    handleUpdateConfig({ config, languageId, isShowLyricTranslation, isPlayLxlrc }) {
       this.lrcConfig = config
+      this.isShowLyricTranslation = isShowLyricTranslation
+      this.isPlayLxlrc = isPlayLxlrc
       if (this.$i18n.locale !== languageId && languageId != null) this.$i18n.locale = languageId
     },
     handleMouseDown(origin, event) {
@@ -134,7 +128,10 @@ export default {
       if (!this.resize.origin) return
       // if (!event.target.classList.contains('resize-' + this.resize.origin)) return
       // console.log(event.target)
-      let bounds = {}
+      let bounds = {
+        w: 0,
+        h: 0,
+      }
       let temp
       switch (this.resize.origin) {
         case 'left':
@@ -185,6 +182,8 @@ export default {
           break
       }
       // console.log(bounds)
+      bounds.w = window.innerWidth + bounds.w
+      bounds.h = window.innerHeight + bounds.h
       rendererSend(NAMES.winLyric.set_win_bounds, bounds)
     },
     handleMouseOver() {

src/renderer-lyric/components/base/Input.vue

@@ -1,62 +0,0 @@
-<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")
-</template>
-
-<script>
-export default {
-  props: {
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-  },
-  data() {
-    return {
-      text: '',
-    }
-  },
-  watch: {
-    value(n) {
-      this.text = n
-    },
-  },
-  methods: {
-    handleInput() {
-
-    },
-  },
-}
-</script>
-
-<style lang="less" module>
-@import '../../assets/styles/layout.less';
-
-.input {
-  background: none;
-  border: none;
-  border-bottom: 1px solid rgba(255, 255, 255, .7);
-  outline: none;
-  color: #fff;
-  // height: 28px;
-  box-sizing: border-box;
-  transition: border-color @transition-theme;
-  &:focus {
-    border-color: rgba(255, 255, 255, 1);
-  }
-}
-
-</style>

src/renderer-lyric/components/base/Quantity.vue

@@ -1,119 +0,0 @@
-<template lang="pug">
-div(:class="$style.quantity")
-  button(:class="[$style.btn, $style.minus]" @click="handleMinusClick") -
-  input(:class="$style.input" ref="dom_input" :value="text" :disabled="disabled" @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="handleInput"
-    @change="$emit('change', text)" @keyup.enter="submit" type="number" :min="min" :max="max")
-  button(:class="[$style.btn, $style.add]" @click="handleAddClick") +
-</template>
-
-<script>
-export default {
-  props: {
-    min: {
-      type: Number,
-    },
-    max: {
-      type: Number,
-    },
-    step: {
-      type: Number,
-      default: 20,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      text: 0,
-    }
-  },
-  watch: {
-    value(n) {
-      this.text = n
-    },
-  },
-  mounted() {
-    this.text = this.value
-  },
-  methods: {
-    handleInput() {
-      let num = parseInt(this.$refs.dom_input.value)
-      console.log(this.$refs.dom_input.value)
-      if (Number.isNaN(num)) num = this.text
-      if (this.min != null && this.min > num) {
-        num = this.min
-      } else if (this.max != null && this.max < num) {
-        num = this.max
-      }
-      this.text = this.$refs.dom_input.value = num
-      this.$emit('input', this.text)
-    },
-    handleMinusClick() {
-      let num = this.text - this.step
-      this.$refs.dom_input.value = this.min == null ? num : Math.max(num, this.min)
-      this.handleInput()
-    },
-    handleAddClick() {
-      let num = this.text + this.step
-      this.$refs.dom_input.value = this.max == null ? num : Math.min(num, this.max)
-      this.handleInput()
-    },
-  },
-}
-</script>
-
-<style lang="less" module>
-@import '../../assets/styles/layout.less';
-.quantity {
-  display: flex;
-  width: 160px;
-  opacity: .9;
-}
-
-.input::-webkit-inner-spin-button,
-.input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-
-.input,
-.btn {
-  height: 30px;
-  text-align: center;
-  background: transparent;
-  border: 1px solid #fff;
-  color: #fff;
-  outline: none;
-  box-sizing: border-box;
-}
-
-.input {
-  border-left: none;
-  border-right: none;
-  width: 60px;
-  position: relative;
-  // font-weight: 900;
-}
-
-.btn {
-  width: 30px;
-  cursor: pointer;
-}
-
-.minus {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.add {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-</style>

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

@@ -174,6 +174,7 @@ export default {
 @import '../../assets/styles/layout.less';
 
 @bar-height: 38px;
+@bar-height-padding: 7px;
 
 .container {
   position: relative;
@@ -221,20 +222,19 @@ export default {
   display: flex;
   flex-flow: row wrap;
   min-height: @bar-height;
-  padding-top: (@bar-height - 24px) / 2;
+  padding-top: @bar-height-padding;
-  padding-left: (@bar-height - 24px) / 2;
+  padding-left: @bar-height-padding;
   box-sizing: border-box;
 }
 
 .btnBack {
-  margin-top: -(@bar-height - 24px) / 2;
+  margin-top: -@bar-height-padding;
-  margin-left: -(@bar-height - 24px) / 2;
+  margin-left: -@bar-height-padding;
 }
 
 .theme-item {
   display: block;
-  margin-bottom: (@bar-height - 24px) / 2;
+  margin-right: @bar-height-padding;
-  margin-right: (@bar-height - 24px) / 2;
   width: 24px;
   height: 24px;
   border-radius: @radius-border;

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

@@ -1,7 +1,8 @@
 <template lang="pug">
-div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
+div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }, { [$style.lrcActiveZoom]: lrcConfig.style.isZoomActiveLrc } ]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
   div(:class="$style.lyricSpace")
-  div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lineContent, lyric.line == index ? (lrcConfig.style.isZoomActiveLrc ? $style.lrcActiveZoom : $style.lrcActive) : null]")
+  div(:class="[$style.lyricText]" ref="dom_lyric_text")
+  //- div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lineContent, lyric.line == index ? (lrcConfig.style.isZoomActiveLrc ? $style.lrcActiveZoom : $style.lrcActive) : null]")
     p(:class="$style.lrcLine") {{info.text}}
   div(:class="$style.lyricSpace")
 </template>
@@ -9,7 +10,7 @@ div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" :style=
 <script>
 import { rendererOn, rendererSend, NAMES } from '../../../common/ipc'
 import { scrollTo } from '../../../renderer/utils'
-import Lyric from 'lrc-file-parser'
+import Lyric from '@renderer/utils/lyric-font-player'
 
 let cancelScrollFn = null
 
@@ -27,6 +28,14 @@ export default {
         }
       },
     },
+    isPlayLxlrc: {
+      type: Boolean,
+      default: true,
+    },
+    isShowLyricTranslation: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -58,6 +67,11 @@ export default {
       lyricLines: [],
       isSetedLines: false,
       isPlay: false,
+      lyrics: {
+        lyric: '',
+        tlyric: '',
+        lxlyric: '',
+      },
     }
   },
   computed: {
@@ -77,7 +91,7 @@ export default {
           if (n.length) {
             this.lyricLines = n
             this.$nextTick(() => {
-              this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+              this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
               this.handleScrollLrc()
             })
           } else {
@@ -89,7 +103,7 @@ export default {
               if (this.lyricLines === this._lyricLines && this._lyricLines.length) return
               this.lyricLines = this._lyricLines
               this.$nextTick(() => {
-                this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+                this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
                 this.handleScrollLrc()
               })
             }, 50)
@@ -97,7 +111,7 @@ export default {
         } else {
           this.lyricLines = n
           this.$nextTick(() => {
-            this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+            this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
             this.handleScrollLrc()
           })
         }
@@ -112,10 +126,23 @@ export default {
       },
       immediate: true,
     },
+    isShowLyricTranslation() {
+      this.setLyric()
+      rendererSend(NAMES.winLyric.get_lyric_info, 'status')
+    },
+    isPlayLxlrc() {
+      this.setLyric()
+      rendererSend(NAMES.winLyric.get_lyric_info, 'status')
+    },
   },
   created() {
     rendererOn(NAMES.winLyric.set_lyric_info, (event, data) => this.handleSetInfo(data))
     window.lrc = new Lyric({
+      lineClassName: 'lrc-content',
+      fontClassName: 'font',
+      shadowClassName: 'shadow',
+      shadowContent: true,
+      activeLineClassName: 'active',
       onPlay: (line, text) => {
         this.lyric.text = text
         this.lyric.line = line
@@ -123,6 +150,12 @@ export default {
       },
       onSetLyric: lines => { // listening lyrics seting event
         // console.log(lines) // lines is array of all lyric text
+        this.$refs.dom_lyric_text.textContent = ''
+        const dom_lines = document.createDocumentFragment()
+        for (const line of lines) {
+          dom_lines.appendChild(line.dom_line)
+        }
+        this.$refs.dom_lyric_text.appendChild(dom_lines)
         this.lyric.lines = lines
         this.lyric.line = 0
       },
@@ -144,7 +177,10 @@ export default {
       // console.log(type, data)
       switch (type) {
         case 'lyric':
-          window.lrc.setLyric(data)
+          this.lyrics.lyric = data.lrc
+          this.lyrics.tlyric = data.tlrc
+          this.lyrics.lxlyric = data.lxlrc
+          this.setLyric()
           break
         case 'play':
           this.isPlay = true
@@ -156,7 +192,10 @@ export default {
           break
         case 'info':
           // console.log('info', data)
-          window.lrc.setLyric(data.lyric)
+          this.lyrics.lyric = data.lrc
+          this.lyrics.tlyric = data.tlrc
+          this.lyrics.lxlyric = data.lxlrc
+          this.setLyric()
           this.$nextTick(() => {
             this.lyric.line = data.line
             rendererSend(NAMES.winLyric.get_lyric_info, 'status')
@@ -191,10 +230,13 @@ export default {
       }
       if (this.lyricEvent.isStopScroll) return
       let dom_p = this.dom_lines[this.lyric.line]
-      cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.38) : 0)
+      cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.5 + dom_p.clientHeight / 2) : 0)
     },
     handleLyricMouseDown(e) {
-      if (e.target.classList.contains(this.$style.lrcLine)) {
+      if (e.target.classList.contains('font') ||
+        e.target.parentNode.classList.contains('font') ||
+        e.target.classList.contains('translation') ||
+        e.target.parentNode.classList.contains('translation')) {
         this.lyricEvent.isMsDown = true
         this.lyricEvent.msDownY = e.clientY
         this.lyricEvent.msDownScrollY = this.$refs.dom_lyric.scrollTop
@@ -218,7 +260,12 @@ export default {
         this.$refs.dom_lyric.scrollTop = this.lyricEvent.msDownScrollY + this.lyricEvent.msDownY - e.clientY
         this.startLyricScrollTimeout()
       } else if (this.winEvent.isMsDown) {
-        rendererSend(NAMES.winLyric.set_win_bounds, { x: e.clientX - this.winEvent.msDownX, y: e.clientY - this.winEvent.msDownY })
+        rendererSend(NAMES.winLyric.set_win_bounds, {
+          x: e.clientX - this.winEvent.msDownX,
+          y: e.clientY - this.winEvent.msDownY,
+          w: window.innerWidth,
+          h: window.innerHeight,
+        })
       }
 
       // if (this.volumeEvent.isMsDown) {
@@ -256,6 +303,13 @@ export default {
     close() {
       rendererSend(NAMES.winLyric.close)
     },
+    setLyric() {
+      window.lrc.setLyric(
+        this.isPlayLxlrc && this.lyrics.lxlyric ? this.lyrics.lxlyric : this.lyrics.lyric,
+        this.isShowLyricTranslation && this.lyrics.tlyric ? this.lyrics.tlyric : '',
+        // (this.isShowLyricTranslation && this.lyrics.tlyric ? (this.lyrics.tlyric + '\n') : '') + (this.lyrics.lyric || ''),
+      )
+    },
   },
 }
 </script>
@@ -267,34 +321,93 @@ export default {
   text-align: center;
   height: 100%;
   overflow: hidden;
-  font-size: 68px;
+  font-size: 16px;
-  padding: 0 5px;
-  opacity: .6;
-  transition: opacity @transition-theme;
-  &.draging {
-    .lrc-line {
-      cursor: grabbing;
-    }
-  }
-}
-.lrc-line {
-  display: inline-block;
-  padding: 8px 0;
-  line-height: 1.2;
-  overflow-wrap: break-word;
-  transition: @transition-theme;
-  transition-property: color, font-size, text-shadow;
-  cursor: grab;
-  // font-weight: bold;
-  // background-clip: text;
   color: @color-theme-lyric;
-  text-shadow: 1px 1px 2px #000;
+  cursor: move;
-  // background: linear-gradient(@color-theme-lyric, @color-theme-lyric);
+
-  // background-clip: text;
+  :global {
-  // -webkit-background-clip: text;
+    .lrc-content {
-  // -webkit-text-fill-color: #fff;
+      line-height: 1.2;
-  // -webkit-text-stroke: thin #124628;
+      margin: 16px 0;
+      overflow-wrap: break-word;
+
+      .font {
+        display: inline-block;
       }
+
+      .font, .translation {
+        cursor: grab;
+      }
+
+      .translation {
+        transition: @transition-theme !important;
+        transition-property: font-size, color;
+        font-size: 0.8em;
+        margin-top: 5px;
+      }
+
+      .line {
+        transition-property: font-size, color !important;
+        background: none !important;
+        -webkit-text-fill-color: unset;
+        // -webkit-text-fill-color: none !important;
+      }
+      &.active {
+        .line {
+          color: @color-theme;
+        }
+        .translation {
+          color: @color-theme;
+        }
+        // span {
+          // color: @color-theme;
+        // }
+      }
+
+
+      span {
+        transition: @transition-theme !important;
+        transition-property: font-size !important;
+        font-size: 1em;
+        background-repeat: no-repeat;
+        background-color: @color-theme-lyric;
+        background-image: -webkit-linear-gradient(top, @color-theme, @color-theme);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        background-size: 0 100%;
+      }
+    }
+
+    .shadow {
+      text-shadow: 1px 1px 2px rgb(32, 32, 32);
+    }
+  }
+  // p {
+  //   padding: 8px 0;
+  //   line-height: 1.2;
+  //   overflow-wrap: break-word;
+  //   transition: @transition-theme !important;
+  //   transition-property: color, font-size;
+  // }
+}
+// .lrc-line {
+//   display: inline-block;
+//   padding: 8px 0;
+//   line-height: 1.2;
+//   overflow-wrap: break-word;
+//   transition: @transition-theme;
+//   transition-property: color, font-size, text-shadow;
+//   cursor: grab;
+//   // font-weight: bold;
+//   // background-clip: text;
+//   color: @color-theme-lyric;
+//   text-shadow: 1px 1px 2px #000;
+//   // background: linear-gradient(@color-theme-lyric, @color-theme-lyric);
+//   // background-clip: text;
+//   // -webkit-background-clip: text;
+//   // -webkit-text-fill-color: #fff;
+//   // -webkit-text-stroke: thin #124628;
+// }
 .lyric-space {
   height: 70%;
 }
@@ -309,10 +422,29 @@ export default {
     // -webkit-text-stroke: thin #124628;
   }
 }
+.draging {
+  :global {
+    .lrc-content {
+      .font, .translation {
+        cursor: grabbing;
+      }
+    }
+  }
+}
 .lrc-active-zoom {
-  .lrc-active;
+  :global {
+    .lrc-content {
+      &.active {
+        .translation {
+          font-size: 1em;
+        }
+        span {
           font-size: 1.2em;
         }
+      }
+    }
+  }
+}
 .footer {
   flex: 0 0 100px;
   overflow: hidden;
@@ -323,14 +455,33 @@ export default {
 
 each(@themes, {
   :global(#container.@{value}) {
-    .lrc-line {
+    // .lrc-line {
-      color: ~'@{color-@{value}-theme-lyric}';
+    //   color: ~'@{color-@{value}-theme-lyric}';
-    }
+    // }
     .lrc-active, .lrc-active-zoom {
       .lrc-line {
         color: ~'@{color-@{value}-theme-lyric_2}';
       }
     }
+    .lyric {
+      color: ~'@{color-@{value}-theme-lyric}';
+      :global {
+        .lrc-content {
+          &.active {
+            .translation {
+              color: ~'@{color-@{value}-theme}';
+            }
+            .line {
+              color: ~'@{color-@{value}-theme}';
+            }
+          }
+          span {
+            // background-color: ~'@{color-@{value}-theme_2-font}';
+            background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-theme}', ~'@{color-@{value}-theme}');
+          }
+        }
+      }
+    }
   }
 })
 

src/renderer/App.vue

@@ -1,12 +1,11 @@
 <template lang="pug">
-#container(v-if="isProd && !isNt" :class="theme" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
+#container(v-if="isProd && !isDT && !isLinux" :class="theme" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
   core-aside#left
   #right
     core-toolbar#toolbar
     core-view#view
     core-player#player
   core-icons
-  material-xm-verify-modal(v-show="globalObj.xm.isShowVerify" :show="globalObj.xm.isShowVerify" :bg-close="false" @close="handleXMVerifyModalClose")
   material-version-modal(v-show="version.showModal")
   material-pact-modal(v-show="!setting.isAgreePact || globalObj.isShowPact")
 #container(v-else :class="theme")
@@ -16,7 +15,6 @@
     core-view#view
     core-player#player
   core-icons
-  material-xm-verify-modal(v-show="globalObj.xm.isShowVerify" :show="globalObj.xm.isShowVerify" :bg-close="false" @close="handleXMVerifyModalClose")
   material-version-modal(v-show="version.showModal")
   material-pact-modal(v-show="!setting.isAgreePact || globalObj.isShowPact")
 </template>
@@ -27,8 +25,9 @@ import { mapMutations, mapGetters, mapActions } from 'vuex'
 import { rendererOn, rendererSend, rendererInvoke, NAMES } from '../common/ipc'
 import { isLinux } from '../common/utils'
 import music from './utils/music'
-import { throttle, openUrl, compareVer } from './utils'
+import { throttle, openUrl, compareVer, getPlayList, parseUrlParams, saveSetting } from './utils'
 import { base as eventBaseName } from './event/names'
+import apiSourceInfo from './utils/music/api-source-info'
 
 window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
 dnscache({
@@ -37,18 +36,36 @@ dnscache({
   cachesize: 1000,
 })
 
+const listThrottle = (fn, delay = 100) => {
+  let timer = null
+  let _data = {}
+  return function(data) {
+    Object.assign(_data, data)
+    if (timer) return
+    timer = setTimeout(() => {
+      timer = null
+      fn.call(this, _data)
+      _data = {}
+    }, delay)
+  }
+}
+
 export default {
   data() {
     return {
       isProd: process.env.NODE_ENV === 'production',
-      isNt: false,
+      isDT: false,
+      isLinux,
       globalObj: {
-        apiSource: 'test',
+        apiSource: null,
         proxy: {},
         isShowPact: false,
         qualityList: {},
-        xm: {
+        userApi: {
-          isShowVerify: false,
+          list: [],
+          status: false,
+          message: 'initing',
+          apis: {},
         },
       },
       updateTimeout: null,
@@ -69,49 +86,52 @@ export default {
     }),
   },
   created() {
-    this.saveDefaultList = throttle(n => {
+    this.saveMyList = listThrottle(data => {
-      window.electronStore_list.set('defaultList', n)
+      rendererSend(NAMES.mainWindow.save_playlist, {
-    }, 500)
+        type: 'myList',
-    this.saveLoveList = throttle(n => {
+        data,
-      window.electronStore_list.set('loveList', n)
+      })
-    }, 500)
+    }, 300)
-    this.saveUserList = throttle(n => {
-      window.electronStore_list.set('userList', n)
-    }, 500)
     this.saveDownloadList = throttle(n => {
-      window.electronStore_list.set('downloadList', n)
+      rendererSend(NAMES.mainWindow.save_playlist, {
+        type: 'downloadList',
+        data: n,
+      })
     }, 1000)
     this.saveSearchHistoryList = throttle(n => {
-      window.electronStore_data.set('searchHistoryList', n)
+      rendererSend(NAMES.mainWindow.save_data, {
+        path: 'searchHistoryList',
+        data: n,
+      })
     }, 500)
   },
   mounted() {
-    document.body.classList.add(this.isNt ? 'noTransparent' : 'transparent')
+    document.body.classList.add(this.isDT ? 'disableTransparent' : 'transparent')
     window.eventHub.$emit(eventBaseName.bindKey)
     this.init()
   },
   watch: {
     setting: {
       handler(n, o) {
-        rendererSend(NAMES.mainWindow.set_app_setting, n)
+        saveSetting(n)
       },
       deep: true,
     },
     defaultList: {
       handler(n) {
-        this.saveDefaultList(n)
+        this.saveMyList({ defaultList: n })
       },
       deep: true,
     },
     loveList: {
       handler(n) {
-        this.saveLoveList(n)
+        this.saveMyList({ loveList: n })
       },
       deep: true,
     },
     userList: {
       handler(n) {
-        this.saveUserList(n)
+        this.saveMyList({ userList: n })
       },
       deep: true,
     },
@@ -124,27 +144,75 @@ export default {
     searchHistoryList(n) {
       this.saveSearchHistoryList(n)
     },
-    'globalObj.apiSource'(n) {
+    'globalObj.apiSource'(n, o) {
+      if (/^user_api/.test(n)) {
+        this.globalObj.qualityList = {}
+        this.globalObj.userApi.status = false
+        this.globalObj.userApi.message = 'initing'
+      } else {
         this.globalObj.qualityList = music.supportQuality[n]
+      }
+      if (o === null) return
+      rendererInvoke(NAMES.mainWindow.set_user_api, n).catch(err => {
+        console.log(err)
+        let api = apiSourceInfo.find(api => !api.disabled)
+        if (api) this.globalObj.apiSource = api.id
+      })
       if (n != this.setting.apiSource) {
         this.setSetting(Object.assign({}, this.setting, {
           apiSource: n,
         }))
       }
     },
+    'globalObj.proxy.enable'(n, o) {
+      if (n != this.setting.network.proxy.enable) {
+        this.setSetting({
+          ...this.setting,
+          network: {
+            ...this.setting.network,
+            proxy: {
+              ...this.setting.network.proxy,
+              enable: n,
+            },
+          },
+        })
+      }
+    },
     'windowSizeActive.fontSize'(n) {
       document.documentElement.style.fontSize = n
     },
+    'setting.isShowAnimation': {
+      handler(n) {
+        if (n) {
+          if (document.body.classList.contains('disableAnimation')) {
+            document.body.classList.remove('disableAnimation')
+          }
+        } else {
+          if (!document.body.classList.contains('disableAnimation')) {
+            document.body.classList.add('disableAnimation')
+          }
+        }
+      },
+      immediate: true,
+    },
   },
   methods: {
     ...mapActions(['getVersionInfo']),
     ...mapMutations(['setNewVersion', 'setVersionModalVisible', 'setDownloadProgress', 'setSetting', 'setDesktopLyricConfig']),
     ...mapMutations('list', ['initList']),
     ...mapMutations('download', ['updateDownloadList']),
+    ...mapMutations('search', {
+      setSearchHistoryList: 'setHistory',
+    }),
+    ...mapMutations('player', {
+      setPlayList: 'setList',
+    }),
+    ...mapActions('songList', ['getListDetailAll']),
     init() {
       document.documentElement.style.fontSize = this.windowSizeActive.fontSize
 
-      rendererInvoke(NAMES.mainWindow.get_env_params).then(this.handleEnvParamsInit)
+      const asyncTask = []
+      asyncTask.push(rendererInvoke(NAMES.mainWindow.get_env_params).then(this.handleEnvParamsInit))
 
       document.body.addEventListener('click', this.handleBodyClick, true)
       rendererOn(NAMES.mainWindow.update_available, (e, info) => {
@@ -192,7 +260,7 @@ export default {
       })
 
       rendererOn(NAMES.mainWindow.set_config, (event, config) => {
-        // console.log(config)
+        console.log(config)
         // this.setDesktopLyricConfig(config)
         // console.log('set_config', JSON.stringify(this.setting) === JSON.stringify(config))
         this.setSetting(Object.assign({}, this.setting, config))
@@ -208,40 +276,70 @@ export default {
       }, 60 * 30 * 1000)
 
       this.listenEvent()
-      this.initData()
+      asyncTask.push(this.initData())
+      asyncTask.push(this.initUserApi())
       this.globalObj.apiSource = this.setting.apiSource
+      if (/^user_api/.test(this.setting.apiSource)) {
+        rendererInvoke(NAMES.mainWindow.set_user_api, this.setting.apiSource)
+      } else {
         this.globalObj.qualityList = music.supportQuality[this.setting.apiSource]
+      }
       this.globalObj.proxy = Object.assign({}, this.setting.network.proxy)
       window.globalObj = this.globalObj
 
       // 初始化音乐sdk
-      music.init()
+      asyncTask.push(music.init())
+      Promise.all(asyncTask).then(() => {
+        this.handleInitEnvParamSearch()
+        this.handleInitEnvParamPlay()
+      })
     },
     enableIgnoreMouseEvents() {
-      if (this.isNt) return
+      if (this.isDT) return
       rendererSend(NAMES.mainWindow.set_ignore_mouse_events, false)
       // console.log('content enable')
     },
     dieableIgnoreMouseEvents() {
-      if (this.isNt) return
+      if (this.isDT) return
       // console.log('content disable')
       rendererSend(NAMES.mainWindow.set_ignore_mouse_events, true)
     },
 
     initData() { // 初始化数据
-      this.initPlayList() // 初始化播放列表
+      return Promise.all([
-      this.initDownloadList() // 初始化下载列表
+        this.initMyList(), // 初始化播放列表
+        this.initSearchHistoryList(), // 初始化搜索历史列表
+      ])
+      // this.initDownloadList() // 初始化下载列表
     },
-    initPlayList() {
+    initMyList() {
-      let defaultList = window.electronStore_list.get('defaultList') || this.defaultList
+      return getPlayList().then(({ defaultList, loveList, userList, downloadList }) => {
-      let loveList = window.electronStore_list.get('loveList') || this.loveList
+        if (!defaultList) defaultList = this.defaultList
-      let userList = window.electronStore_list.get('userList') || this.userList
+        if (!loveList) loveList = this.loveList
+        if (userList) {
+          let needSave = false
+          const getListId = id => id.includes('.') ? getListId(id.substring(0, id.lastIndexOf('_'))) : id
+          userList.forEach(l => {
+            if (!l.id.includes('__') || l.source) return
+            let [source, id] = l.id.split('__')
+            id = getListId(id)
+            l.source = source
+            l.sourceListId = id
+            if (!needSave) needSave = true
+          })
+          if (needSave) this.saveMyList({ userList })
+        } else {
+          userList = this.userList
+        }
+
         if (!defaultList.list) defaultList.list = []
         if (!loveList.list) loveList.list = []
         this.initList({ defaultList, loveList, userList })
+        this.initDownloadList(downloadList) // 初始化下载列表
+        this.initPlayInfo()
+      })
     },
-    initDownloadList() {
+    initDownloadList(downloadList) {
-      let downloadList = window.electronStore_list.get('downloadList')
       if (downloadList) {
         downloadList.forEach(item => {
           if (item.status == this.downloadStatus.RUN || item.status == this.downloadStatus.WAITING) {
@@ -252,6 +350,105 @@ export default {
         this.updateDownloadList(downloadList)
       }
     },
+    initSearchHistoryList() {
+      rendererInvoke(NAMES.mainWindow.get_data, 'searchHistoryList').then(historyList => {
+        if (historyList == null) {
+          historyList = []
+          rendererSend(NAMES.mainWindow.save_data, { path: 'searchHistoryList', data: historyList })
+        } else {
+          this.setSearchHistoryList(historyList)
+        }
+      })
+    },
+    initPlayInfo() {
+      rendererInvoke(NAMES.mainWindow.get_data, 'playInfo').then(info => {
+        // console.log(info, window.allList)
+        window.restorePlayInfo = null
+        if (!info) return
+        if (info.index < 0) return
+        if (info.listId) {
+          const list = window.allList[info.listId]
+          // console.log(list)
+          if (!list || !list.list[info.index]) return
+          info.list = list.list
+        }
+
+        window.restorePlayInfo = info
+        this.setPlayList({
+          list: {
+            list: info.list,
+            id: info.listId,
+          },
+          index: info.index,
+        })
+      })
+    },
+    initUserApi() {
+      return Promise.all([
+        rendererOn(NAMES.mainWindow.user_api_status, (event, { status, message, apiInfo }) => {
+          // console.log(apiInfo)
+          this.globalObj.userApi.status = status
+          this.globalObj.userApi.message = message
+          if (status) {
+            if (apiInfo.id === this.setting.apiSource) {
+              let apis = {}
+              let qualitys = {}
+              for (const [source, { actions, type, qualitys: sourceQualitys }] of Object.entries(apiInfo.sources)) {
+                if (type != 'music') continue
+                apis[source] = {}
+                for (const action of actions) {
+                  switch (action) {
+                    case 'musicUrl':
+                      apis[source].getMusicUrl = (songInfo, type) => {
+                        const requestKey = `request__${Math.random().toString().substring(2)}`
+                        return {
+                          canceleFn() {
+                            rendererInvoke(NAMES.mainWindow.request_user_api_cancel, requestKey)
+                          },
+                          promise: rendererInvoke(NAMES.mainWindow.request_user_api, {
+                            requestKey,
+                            data: {
+                              source: source,
+                              action: 'musicUrl',
+                              info: {
+                                type,
+                                musicInfo: songInfo,
+                              },
+                            },
+                          }).then(res => {
+                            // console.log(res)
+                            if (!/^https?:/.test(res.data.url)) return Promise.reject(new Error('Get url failed'))
+                            return { type, url: res.data.url }
+                          }).catch(err => {
+                            console.log(err.message)
+                            return Promise.reject(err)
+                          }),
+                        }
+                      }
+                      break
+
+                    default:
+                      break
+                  }
+                }
+                qualitys[source] = sourceQualitys
+              }
+              this.globalObj.qualityList = qualitys
+              this.globalObj.userApi.apis = apis
+            }
+          }
+        }),
+        rendererInvoke(NAMES.mainWindow.get_user_api_list).then(res => {
+          // console.log(res)
+          if (![...apiSourceInfo.map(s => s.id), ...res.map(s => s.id)].includes(this.setting.apiSource)) {
+            console.warn('reset api')
+            let api = apiSourceInfo.find(api => !api.disabled)
+            if (api) this.globalObj.apiSource = api.id
+          }
+          this.globalObj.userApi.list = res
+        }),
+      ])
+    },
     showUpdateModal() {
       (this.version.newVersion && this.version.newVersion.history
         ? Promise.resolve(this.version.newVersion)
@@ -292,27 +489,100 @@ export default {
     },
     handleEnvParamsInit(envParams) {
       this.envParams = envParams
-      this.isNt = isLinux || this.envParams.nt
+      this.isDT = this.envParams.dt
-      if (this.isNt) {
+      if (this.isDT) {
         document.body.classList.remove('transparent')
-        document.body.classList.add('noTransparent')
+        document.body.classList.add('disableTransparent')
       }
-      if (this.isProd && !this.isNt) {
+      if (this.isProd && !this.isDT && !this.isLinux) {
         document.body.addEventListener('mouseenter', this.dieableIgnoreMouseEvents)
         document.body.addEventListener('mouseleave', this.enableIgnoreMouseEvents)
       }
-
+      this.handleInitEnvParamSearch()
-      if (this.envParams.search != null) {
+      this.handleInitEnvParamPlay()
+    },
+    // 处理启动参数 search
+    handleInitEnvParamSearch() {
+      if (this.envParams.search == null) return
       this.$router.push({
         path: 'search',
         query: {
           text: this.envParams.search,
         },
       })
+    },
+    // 处理启动参数 play
+    handleInitEnvParamPlay() {
+      if (this.envParams.play == null || typeof this.envParams.play != 'string') return
+      // -play="source=kw&link=链接、ID"
+      // -play="source=myList&name=名字"
+      // -play="source=myList&name=名字&index=位置"
+      const params = parseUrlParams(this.envParams.play)
+      if (params.type != 'songList') return
+      this.handlePlaySongList(params)
+    },
+    handlePlaySongList(params) {
+      switch (params.source) {
+        case 'myList':
+          if (params.name != null) {
+            let targetList
+            const lists = Object.values(window.allList)
+            for (const list of lists) {
+              if (list.name === params.name) {
+                targetList = list
+                break
+              }
+            }
+            if (!targetList) return
+
+
+            this.setPlayList({
+              list: {
+                list: targetList.list,
+                id: targetList.id,
+              },
+              index: this.getListPlayIndex(targetList.list, params.index),
+            })
+          }
+          break
+        case 'kw':
+        case 'kg':
+        case 'tx':
+        case 'mg':
+        case 'wy':
+          this.playSongListDetail(params.source, params.link, params.index)
+          break
       }
     },
-    handleXMVerifyModalClose() {
+    async playSongListDetail(source, link, playIndex) {
-      music.xm.closeVerifyModal()
+      if (link == null) return
+      let list
+      try {
+        list = await this.getListDetailAll({ source, id: decodeURIComponent(link) })
+      } catch (err) {
+        console.log(err)
+      }
+      this.setPlayList({
+        list: {
+          list,
+          id: null,
+        },
+        index: this.getListPlayIndex(list, playIndex),
+      })
+    },
+    getListPlayIndex(list, index) {
+      if (index == null) {
+        index = 1
+      } else {
+        index = parseInt(index)
+        if (Number.isNaN(index)) {
+          index = 1
+        } else {
+          if (index < 1) index = 1
+          else if (index > list.length) index = list.length
+        }
+      }
+      return index - 1
     },
     listenEvent() {
       window.eventHub.$on('key_escape_down', this.handle_key_esc_down)
@@ -354,6 +624,11 @@ body {
   box-sizing: border-box;
 }
 
+.disableAnimation * {
+  transition: none !important;
+  animation: none !important;
+}
+
 .transparent {
   padding: @shadow-app;
   #container {
@@ -362,8 +637,17 @@ body {
     background-color: transparent;
   }
 }
-.noTransparent {
+.disableTransparent {
   background-color: #fff;
+
+  #right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  #view { // 偏移5px距离解决非透明模式下右侧滚动条无法拖动的问题
+    margin-right: 5Px;
+  }
 }
 
 #container {

src/renderer/assets/styles/animate.less

@@ -871,6 +871,41 @@
     transform: scale(1);
   }
 }
+@keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%,
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%,
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
 
 .flipInX {
   backface-visibility: visible !important;

src/renderer/assets/styles/variables.less

@@ -1,6 +1,6 @@
 @import './colors.less';
 
-@themes: green, yellow, blue, red, pink, purple, orange, grey, ming, blue2, mid_autumn, naruto, happy_new_year;
+@themes: green, yellow, blue, red, pink, purple, orange, grey, ming, blue2, black, mid_autumn, naruto, happy_new_year;
 
 
 // Colors
@@ -8,7 +8,7 @@
 @color-theme: #4daf7c;
 @color-theme-bgimg: none;
 @color-theme-bgposition: center;
-@color-theme-bgsize: auto auto;
+@color-theme-bgsize: cover;
 @color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
 @color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
 @color-theme-font: #fff;
@@ -23,6 +23,7 @@
 @color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
 // @color-theme_2-line: transparent;
 @color-theme_2-line: lighten(@color-theme, 35%);
+@color-reply-floor: fadeout(@color-theme, 95%);
 @color-theme-sidebar: @color-theme;
 @color-btn: lighten(@color-theme, 5%);
 @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
@@ -50,6 +51,8 @@
 @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, 32%);
+@color-player-detail-lyric: fadeout(@color-theme_2-font, 40%);
+@color-player-detail-lyric-active: darken(@color-theme, 2%);
 @color-player-detail-play-btn: lighten(@color-theme, 7%);
 
 @color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
@@ -77,7 +80,7 @@
 @color-green-theme: #4daf7c;
 @color-green-theme-bgimg: none;
 @color-green-theme-bgposition: center;
-@color-green-theme-bgsize: auto auto;
+@color-green-theme-bgsize: cover;
 @color-green-theme-hover: fadeout(lighten(@color-green-theme, 10%), 30%);
 @color-green-theme-active: fadeout(darken(@color-green-theme, 20%), 60%);
 @color-green-theme-font: #fff;
@@ -91,6 +94,7 @@
 @color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
 // @color-green-theme_2-line: transparent;
 @color-green-theme_2-line: lighten(@color-green-theme, 45%);
+@color-green-reply-floor: fadeout(@color-green-theme, 95%);
 @color-green-theme-sidebar: @color-green-theme;
 @color-green-btn: lighten(@color-green-theme, 5%);
 @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
@@ -112,6 +116,8 @@
 @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, 32%);
+@color-green-player-detail-lyric: fadeout(@color-green-theme_2-font, 40%);
+@color-green-player-detail-lyric-active: darken(@color-green-theme, 2%);
 @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;
@@ -134,7 +140,7 @@
 @color-yellow-theme: #e9d460;
 @color-yellow-theme-bgimg: none;
 @color-yellow-theme-bgposition: center;
-@color-yellow-theme-bgsize: auto auto;
+@color-yellow-theme-bgsize: cover;
 @color-yellow-theme-hover: fadeout(lighten(@color-yellow-theme, 10%), 30%);
 @color-yellow-theme-active: fadeout(darken(@color-yellow-theme, 20%), 60%);
 @color-yellow-theme-font: #fff;
@@ -148,6 +154,7 @@
 @color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
 // @color-yellow-theme_2-line: transparent;
 @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
+@color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
 @color-yellow-theme-sidebar: @color-yellow-theme;
 @color-yellow-btn: darken(@color-yellow-theme, 5%);
 @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
@@ -169,6 +176,8 @@
 @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, 32%);
+@color-yellow-player-detail-lyric: fadeout(@color-yellow-theme_2-font, 40%);
+@color-yellow-player-detail-lyric-active: darken(@color-yellow-theme, 7%);
 @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;
@@ -190,7 +199,7 @@
 @color-orange-theme: #f5ab35;
 @color-orange-theme-bgimg: none;
 @color-orange-theme-bgposition: center;
-@color-orange-theme-bgsize: auto auto;
+@color-orange-theme-bgsize: cover;
 @color-orange-theme-hover: fadeout(lighten(@color-orange-theme, 10%), 30%);
 @color-orange-theme-active: fadeout(darken(@color-orange-theme, 20%), 60%);
 @color-orange-theme-font: #fff;
@@ -204,6 +213,7 @@
 @color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
 // @color-orange-theme_2-line: transparent;
 @color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
+@color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
 @color-orange-theme-sidebar: @color-orange-theme;
 @color-orange-btn: lighten(@color-orange-theme, 5%);
 @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
@@ -225,6 +235,8 @@
 @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, 32%);
+@color-orange-player-detail-lyric: fadeout(@color-orange-theme_2-font, 40%);
+@color-orange-player-detail-lyric-active: darken(@color-orange-theme, 7%);
 @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;
@@ -246,7 +258,7 @@
 @color-blue-theme: #3498db;
 @color-blue-theme-bgimg: none;
 @color-blue-theme-bgposition: center;
-@color-blue-theme-bgsize: auto auto;
+@color-blue-theme-bgsize: cover;
 @color-blue-theme-hover: fadeout(lighten(@color-blue-theme, 10%), 30%);
 @color-blue-theme-active: fadeout(darken(@color-blue-theme, 20%), 60%);
 @color-blue-theme-font: #fff;
@@ -260,6 +272,7 @@
 @color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
 // @color-blue-theme_2-line: transparent;
 @color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
+@color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
 @color-blue-theme-sidebar: @color-blue-theme;
 @color-blue-btn: lighten(@color-blue-theme, 5%);
 @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
@@ -281,6 +294,8 @@
 @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, 32%);
+@color-blue-player-detail-lyric: fadeout(@color-blue-theme_2-font, 40%);
+@color-blue-player-detail-lyric-active: darken(@color-blue-theme, 2%);
 @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;
@@ -302,7 +317,7 @@
 @color-red-theme: #d64541;
 @color-red-theme-bgimg: none;
 @color-red-theme-bgposition: center;
-@color-red-theme-bgsize: auto auto;
+@color-red-theme-bgsize: cover;
 @color-red-theme-hover: fadeout(lighten(@color-red-theme, 10%), 30%);
 @color-red-theme-active: fadeout(darken(@color-red-theme, 20%), 60%);
 @color-red-theme-font: #fff;
@@ -316,6 +331,7 @@
 @color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
 // @color-red-theme_2-line: transparent;
 @color-red-theme_2-line: lighten(@color-red-theme, 42%);
+@color-red-reply-floor: fadeout(@color-red-theme, 95%);
 @color-red-theme-sidebar: @color-red-theme;
 @color-red-btn: lighten(@color-red-theme, 5%);
 @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
@@ -337,6 +353,8 @@
 @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, 32%);
+@color-red-player-detail-lyric: fadeout(@color-red-theme_2-font, 40%);
+@color-red-player-detail-lyric-active: lighten(@color-red-theme, 2%);
 @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%);
@@ -360,7 +378,7 @@
 @color-pink-theme: #f1828d;
 @color-pink-theme-bgimg: none;
 @color-pink-theme-bgposition: center;
-@color-pink-theme-bgsize: auto auto;
+@color-pink-theme-bgsize: cover;
 @color-pink-theme-hover: fadeout(lighten(@color-pink-theme, 10%), 30%);
 @color-pink-theme-active: fadeout(darken(@color-pink-theme, 20%), 60%);
 @color-pink-theme-font: #fff;
@@ -374,6 +392,7 @@
 @color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
 // @color-pink-theme_2-line: transparent;
 @color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
+@color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
 @color-pink-theme-sidebar: @color-pink-theme;
 @color-pink-btn: darken(@color-pink-theme, 3%);
 @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
@@ -395,6 +414,8 @@
 @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, 32%);
+@color-pink-player-detail-lyric: fadeout(@color-pink-theme_2-font, 40%);
+@color-pink-player-detail-lyric-active: darken(@color-pink-theme, 2%);
 @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;
@@ -416,7 +437,7 @@
 @color-purple-theme: #9b59b6;
 @color-purple-theme-bgimg: none;
 @color-purple-theme-bgposition: center;
-@color-purple-theme-bgsize: auto auto;
+@color-purple-theme-bgsize: cover;
 @color-purple-theme-hover: fadeout(lighten(@color-purple-theme, 10%), 30%);
 @color-purple-theme-active: fadeout(darken(@color-purple-theme, 20%), 60%);
 @color-purple-theme-font: #fff;
@@ -430,6 +451,7 @@
 @color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
 // @color-purple-theme_2-line: transparent;
 @color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
+@color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
 @color-purple-theme-sidebar: @color-purple-theme;
 @color-purple-btn: lighten(@color-purple-theme, 5%);
 @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
@@ -451,6 +473,8 @@
 @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, 32%);
+@color-purple-player-detail-lyric: fadeout(@color-purple-theme_2-font, 40%);
+@color-purple-player-detail-lyric-active: darken(@color-purple-theme, 2%);
 @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;
@@ -472,7 +496,7 @@
 @color-grey-theme: #6c7a89;
 @color-grey-theme-bgimg: none;
 @color-grey-theme-bgposition: center;
-@color-grey-theme-bgsize: auto auto;
+@color-grey-theme-bgsize: cover;
 @color-grey-theme-hover: fadeout(lighten(@color-grey-theme, 10%), 30%);
 @color-grey-theme-active: fadeout(darken(@color-grey-theme, 20%), 60%);
 @color-grey-theme-font: #fff;
@@ -486,6 +510,7 @@
 @color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
 // @color-grey-theme_2-line: transparent;
 @color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
+@color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
 @color-grey-theme-sidebar: @color-grey-theme;
 @color-grey-btn: lighten(@color-grey-theme, 5%);
 @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
@@ -507,6 +532,8 @@
 @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, 32%);
+@color-grey-player-detail-lyric: fadeout(@color-grey-theme_2-font, 55%);
+@color-grey-player-detail-lyric-active: darken(@color-grey-theme, 3%);
 @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;
@@ -529,7 +556,7 @@
 @color-ming-theme: #336e7b;
 @color-ming-theme-bgimg: none;
 @color-ming-theme-bgposition: center;
-@color-ming-theme-bgsize: auto auto;
+@color-ming-theme-bgsize: cover;
 @color-ming-theme-hover: fadeout(lighten(@color-ming-theme, 7%), 30%);
 @color-ming-theme-active: fadeout(darken(@color-ming-theme, 20%), 60%);
 @color-ming-theme-font: #fff;
@@ -543,6 +570,7 @@
 @color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
 // @color-ming-theme_2-line: transparent;
 @color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
+@color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
 @color-ming-theme-sidebar: @color-ming-theme;
 @color-ming-btn: lighten(@color-ming-theme, 5%);
 @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
@@ -564,6 +592,8 @@
 @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, 32%);
+@color-ming-player-detail-lyric: fadeout(@color-ming-theme_2-font, 50%);
+@color-ming-player-detail-lyric-active: lighten(@color-ming-theme, 2%);
 @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%);
@@ -588,7 +618,7 @@
 @color-blue2-theme: #4f62d0;
 @color-blue2-theme-bgimg: none;
 @color-blue2-theme-bgposition: center;
-@color-blue2-theme-bgsize: auto auto;
+@color-blue2-theme-bgsize: cover;
 @color-blue2-theme-hover: fadeout(lighten(@color-blue2-theme, 10%), 30%);
 @color-blue2-theme-active: fadeout(darken(@color-blue2-theme, 20%), 60%);
 @color-blue2-theme-font: #fff;
@@ -602,6 +632,7 @@
 @color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
 // @color-blue2-theme_2-line: transparent;
 @color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
+@color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);
 @color-blue2-theme-sidebar: @color-blue2-theme;
 @color-blue2-btn: lighten(@color-blue2-theme, 5%);
 @color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
@@ -623,6 +654,8 @@
 @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, 32%);
+@color-blue2-player-detail-lyric: fadeout(@color-blue2-theme_2-font, 50%);
+@color-blue2-player-detail-lyric-active: darken(@color-blue2-theme, 2%);
 @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;
@@ -642,6 +675,66 @@
 @color-blue2-badge-info-font: #fff;
 
 
+@color-black-theme: #272727;
+@color-black-theme-bgimg: url(../images/landingMoon.png);
+@color-black-theme-bgposition: center;
+@color-black-theme-bgsize: cover;
+@color-black-theme-hover: fadeout(lighten(@color-black-theme, 13%), 30%);
+@color-black-theme-active: fadeout(lighten(@color-black-theme, 8%), 30%);
+@color-black-theme-font: lighten(@color-black-theme, 55%);
+@color-black-theme-font-label: lighten(@color-black-theme, 35%);
+@color-black-theme_2: rgba(19, 19, 19, 0.82);
+@color-black-theme_2-background_1: #080808;
+@color-black-theme_2-background_2: #1f1f1f;
+@color-black-theme_2-hover: fadeout(lighten(@color-black-theme, 10%), 80%);
+@color-black-theme_2-active: fadeout(lighten(@color-black-theme, 10%), 70%);
+@color-black-theme_2-font: lighten(@color-black-theme_2, 73%);
+@color-black-theme_2-font-label: darken(@color-black-theme_2-font, 30%);
+// @color-black-theme_2-line: transparent;
+@color-black-theme_2-line: lighten(@color-black-theme_2, 3.2%);
+@color-black-reply-floor: fadeout(lighten(@color-black-theme, 60%), 95%);
+@color-black-theme-sidebar: @color-black-theme;
+@color-black-btn: lighten(@color-black-theme, 40%);
+@color-black-btn-background: fadeout(lighten(@color-black-theme, 30%), 70%);
+@color-black-btn-hover: fadeout(lighten(@color-black-theme, 40%), 70%);
+@color-black-btn-active: fadeout(lighten(@color-black-theme, 20%), 70%);
+@color-black-btn-select: fadeout(lighten(@color-black-theme, 25%), 70%);
+@color-black-pagination-background: fadeout(darken(@color-black-theme, 15%), 50%);
+@color-black-pagination-hover: fadeout(lighten(@color-black-theme, 1%), 70%);
+@color-black-pagination-active: fadeout(darken(@color-black-theme, 5%), 60%);
+@color-black-pagination-select: fadeout(darken(@color-black-theme, 3%), 60%);
+@color-black-search-form-background: fadeout(lighten(@color-black-theme, 8%), 6%);
+@color-black-search-list-hover: fadeout(darken(@color-black-theme, 10%), 70%);
+@color-black-scrollbar-track: fadeout(lighten(@color-black-theme, 10%), 75%);
+@color-black-scrollbar-thumb: fadeout(lighten(@color-black-theme, 10%), 50%);
+@color-black-scrollbar-thumb-hover: fadeout(lighten(@color-black-theme, 10%), 35%);
+@color-black-player-pic-c1: fadeout(@color-black-theme_2, 50%);
+@color-black-player-pic-c2: lighten(@color-black-theme_2, 30%);
+@color-black-player-progress: lighten(@color-black-theme_2, 6%);
+@color-black-player-progress-bar1: lighten(@color-black-theme_2, 12%);
+@color-black-player-progress-bar2: lighten(@color-black-theme, 12%);
+@color-black-player-status-text: darken(@color-black-theme_2-font, 20%);
+@color-black-player-detail-lyric: fadeout(darken(@color-black-theme_2-font, 30%), 10%);
+@color-black-player-detail-lyric-active: lighten(@color-black-theme, 50%);
+@color-black-player-detail-play-btn: lighten(@color-black-theme, 30%);
+@color-black-tab-btn-background: fadeout(lighten(@color-black-theme, 10%), 80%);
+@color-black-tab-btn-background-hover: @color-black-theme_2-hover;
+@color-black-tab-border-top: fadeout(lighten(@color-black-theme, 5%), 50%);
+@color-black-tab-border-bottom: lighten(@color-black-theme, 5%);
+@color-black-hideBtn: #4e4e4e;
+@color-black-minBtn: #5e5e5e;
+@color-black-maxBtn: #535353;
+@color-black-closeBtn: #6e6e6e;
+@color-black-hideBtn-hover: fadeout(@color-hideBtn, 10%);
+@color-black-minBtn-hover: fadeout(@color-black-minBtn, 10%);
+@color-black-maxBtn-hover: fadeout(@color-black-maxBtn, 10%);
+@color-black-closeBtn-hover: fadeout(@color-black-closeBtn, 10%);
+@color-black-badge-success: lighten(@color-black-theme, 10%);
+@color-black-badge-success-font: #fff;
+@color-black-badge-info: lighten(@color-black-theme, 25%);
+@color-black-badge-info-font: #fff;
+
+
 @color-mid_autumn-theme: rgba(74, 55, 82, 1);
 @color-mid_autumn-theme-bgimg: url(../images/jqbg.jpg);
 @color-mid_autumn-theme-bgposition: center;
@@ -651,7 +744,7 @@
 @color-mid_autumn-theme-font: rgba(246, 233, 255, 0.9);
 @color-mid_autumn-theme-font-label: fadeout(lighten(@color-mid_autumn-theme, 20%), 20%);
 @color-mid_autumn-theme_2: rgba(255, 255, 255, .9);
-@color-mid_autumn-theme_2-background_1: #e7e7e9;
+@color-mid_autumn-theme_2-background_1: #ececec;
 @color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%);
 @color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
 @color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
@@ -659,6 +752,7 @@
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
 @color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%);
+@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -680,6 +774,8 @@
 @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-lyric: fadeout(@color-mid_autumn-theme_2-font, 40%);
+@color-mid_autumn-player-detail-lyric-active: lighten(@color-mid_autumn-theme, 7%);
 @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;
@@ -716,6 +812,7 @@
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
 @color-mid_autumn-theme_2-line: darken(@color-mid_autumn-theme, 18%);
+@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: darken(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -737,6 +834,8 @@
 @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-lyric: lighten(@color-mid_autumn-theme, 7%);
+@color-mid_autumn-player-detail-lyric-active: lighten(@color-mid_autumn-theme, 7%);
 @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;
@@ -764,7 +863,7 @@
 @color-naruto-theme-font: rgba(67, 118, 148, 0.9);
 @color-naruto-theme-font-label: fadeout(darken(@color-naruto-theme, 20%), 20%);
 @color-naruto-theme_2: rgba(255, 255, 255, 0.8);
-@color-naruto-theme_2-background_1: #e9faff;
+@color-naruto-theme_2-background_1: #eafaff;
 @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%);
@@ -772,6 +871,7 @@
 @color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
 // @color-naruto-theme_2-line: transparent;
 @color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
+@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 12%), 90%);
 @color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
 @color-naruto-btn: lighten(@color-naruto-theme, 2%);
 @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
@@ -783,7 +883,7 @@
 @color-naruto-pagination-active: fadeout(darken(@color-naruto-theme, 10%), 70%);
 @color-naruto-pagination-select: fadeout(lighten(@color-naruto-theme, 10%), 50%);
 @color-naruto-search-form-background: fadeout(lighten(@color-naruto-theme, 30%), 20%);
-@color-naruto-search-list-hover: fadeout(darken(@color-naruto-theme, 10%), 50%);
+@color-naruto-search-list-hover: fadeout(darken(@color-naruto-theme, 10%), 65%);
 @color-naruto-scrollbar-track: fadeout(lighten(@color-naruto-theme, 10%), 75%);
 @color-naruto-scrollbar-thumb: fadeout(lighten(@color-naruto-theme, 10%), 50%);
 @color-naruto-scrollbar-thumb-hover: fadeout(lighten(@color-naruto-theme, 10%), 35%);
@@ -793,6 +893,8 @@
 @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, 32%);
+@color-naruto-player-detail-lyric: fadeout(@color-naruto-theme_2-font, 36%);
+@color-naruto-player-detail-lyric-active: darken(@color-naruto-theme, 7%);
 @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;
@@ -828,6 +930,7 @@
 @color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
 // @color-happy_new_year-theme_2-line: transparent;
 @color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
+@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 12%), 85%);
 @color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1);
 @color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%);
 @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);
@@ -849,6 +952,8 @@
 @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, 32%);
+@color-happy_new_year-player-detail-lyric: fadeout(@color-happy_new_year-theme_2-font, 40%);
+@color-happy_new_year-player-detail-lyric-active: darken(@color-happy_new_year-theme, 2%);
 @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;

src/renderer/components/core/Aside.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 div(:class="$style.aside")
   div(:class="$style.controlBtn" v-if="setting.controlBtnPosition == 'left'")
-    button(type="button" :class="$style.close" :title="$t('core.toolbar.close')" @click="close")
+    button(type="button" :class="$style.close" :tips="$t('core.toolbar.close')" @click="close")
       svg(:class="$style.controlBtniIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
         use(xlink:href='#icon-window-close')
-    button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
+    button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
       svg(:class="$style.controlBtniIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
         use(xlink:href='#icon-window-minimize')
 
@@ -16,18 +16,18 @@ div(:class="$style.aside")
     dl
       //- dt {{$t('core.aside.online_music')}}
       dd
-        router-link(:active-class="$style.active" to="search" :title="$t('core.aside.search')")
+        router-link(:active-class="$style.active" to="search" :tips="$t('core.aside.search')")
           div(:class="$style.icon")
             svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 425.2 425.2' space='preserve')
               use(xlink:href='#icon-search-2')
       dd
-        router-link(:active-class="$style.active" to="songList" :title="$t('core.aside.song_list')")
+        router-link(:active-class="$style.active" to="songList" :tips="$t('core.aside.song_list')")
           div(:class="$style.icon")
             svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 425.2 425.2' space='preserve')
               use(xlink:href='#icon-album')
           //- span {{$t('core.aside.song_list')}}
       dd
-        router-link(:active-class="$style.active" to="leaderboard" :title="$t('core.aside.leaderboard')")
+        router-link(:active-class="$style.active" to="leaderboard" :tips="$t('core.aside.leaderboard')")
           div(:class="$style.icon")
             svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 425.22 425.2' space='preserve')
               use(xlink:href='#icon-leaderboard')
@@ -35,20 +35,20 @@ div(:class="$style.aside")
     dl
       //- dt {{$t('core.aside.my_music')}}
       dd
-        router-link(:active-class="$style.active" :title="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
+        router-link(:active-class="$style.active" :tips="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
           div(:class="$style.icon")
-            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 459.39 388.44' space='preserve')
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 444.87 391.18' space='preserve')
               use(xlink:href='#icon-love')
     dl
       //- dt {{$t('core.aside.other')}}
-      dd
+      dd(v-if="setting.download.enable")
-        router-link(:active-class="$style.active" to="download" :title="$t('core.aside.download')")
+        router-link(:active-class="$style.active" to="download" :tips="$t('core.aside.download')")
           div(:class="$style.icon")
             svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 425.2 425.2' space='preserve')
               use(xlink:href='#icon-download-2')
           //- span {{$t('core.aside.download')}}
       dd
-        router-link(:active-class="$style.active" to="setting" :title="$t('core.aside.setting')")
+        router-link(:active-class="$style.active" to="setting" :tips="$t('core.aside.setting')")
           div(:class="$style.icon")
             svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 493.23 436.47' space='preserve')
               use(xlink:href='#icon-setting')
@@ -147,7 +147,7 @@ export default {
     height: @control-btn-width;
     background: none;
     border: none;
-    // display: flex;
+    display: flex;
     // justify-content: center;
     // align-items: center;
     outline: none;

src/renderer/components/core/Icons.vue

@@ -75,8 +75,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       // 0 0 512 512
       path(d='M511.563,434.259c-1.728-142.329-124.42-258.242-277.087-263.419V95.999c0-17.645-14.342-31.999-31.974-31.999 c-7.931,0-15.591,3.042-21.524,8.562c0,0-134.828,124.829-173.609,163.755C2.623,241.109,0,248.088,0,255.994 c0,7.906,2.623,14.885,7.369,19.687c38.781,38.915,173.609,163.745,173.609,163.745c5.933,5.521,13.593,8.562,21.524,8.562 c17.631,0,31.974-14.354,31.974-31.999v-74.591c153.479,2.156,255.792,50.603,255.792,95.924c0,5.896,4.767,10.666,10.658,10.666 c0.167,0.021,0.333,0.01,0.416,0c5.891,0,10.658-4.771,10.658-10.666C512,436.259,511.854,435.228,511.563,434.259z')
     g#icon-refresh(fill='currentColor')
-      // 0 0 512 512
+      // 0 0 24 24
-      path(d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z')
+      path(d='M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z')
     g#icon-eraser(fill='currentColor')
       // 0 0 512 512
       path(d='M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z')
@@ -122,8 +122,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       // 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')
 
-      //- 0 0 459.39 388.44
+      //- 0 0 444.87 391.18
-      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')
+      path.cls-1(d='M222.37,391.18a18.8,18.8,0,0,1-10.21-3l-.14-.09c-14.14-7.82-123.14-69.63-181.13-148A159.49,159.49,0,0,1,1.45,124.43c5.48-40,25.61-75,56.68-98.58C93.49-1,135.15-7.09,178.6,8.33a185.39,185.39,0,0,1,43.83,22.9,185.39,185.39,0,0,1,43.83-22.9C309.73-7.08,351.39-1,386.74,25.85c31.07,23.62,51.2,58.63,56.68,98.58A159.48,159.48,0,0,1,414,240.11C355.66,318.88,245.75,381,232.62,388.2a19.23,19.23,0,0,1-10.25,3ZM132.78,40.37c-16.59,0-34.38,4.76-51.8,18C58.42,75.52,43.79,101,39.8,130.12a117.78,117.78,0,0,0,21.78,85.42c47.15,63.67,133,116.43,160.86,132.57C250.33,332,336.15,279.21,383.3,215.54a117.77,117.77,0,0,0,21.78-85.42c-4-29.11-18.62-54.59-41.19-71.75C303.1,12.17,237.78,69.17,235,71.62a18.81,18.81,0,0,1-25.19,0C207.88,69.88,174.07,40.37,132.78,40.37Z')
 
 
     //- g#icon-download-2(fill='currentColor')
@@ -147,8 +147,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       //- 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.cls-1(d='M248.61,314.89a94.65,94.65,0,1,1,94.65-94.65A94.76,94.76,0,0,1,248.61,314.89Zm0-149.53a54.88,54.88,0,1,0,54.88,54.88A54.94,54.94,0,0,0,248.61,165.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')
+      path.cls-1(d='M492.33,201.89l-106-183.54A36.8,36.8,0,0,0,354.58,0H142.65a36.81,36.81,0,0,0-31.79,18.35L4.9,201.89a36.81,36.81,0,0,0,0,36.7l106,183.54a36.81,36.81,0,0,0,31.78,18.35H354.58a36.8,36.8,0,0,0,31.78-18.35l106-183.54A36.81,36.81,0,0,0,492.33,201.89ZM146.73,396.7,44.85,220.24,146.73,43.77H350.5L452.38,220.24,350.5,396.7Z')
 
     g#icon-list-add(fill='currentColor')
       //- 0 0 24 24
@@ -165,5 +165,57 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
     g#icon-window-close(fill='currentColor')
       //- 0 0 24 24
       path(d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z")
+
+
+    g#icon-list-loop(fill='currentColor')
+      // 0 0 24 24
+      path(d="M0 0h24v24H0z" fill="none")
+      path(d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z')
+
+    g#icon-single-loop(fill='currentColor')
+      // 0 0 24 24
+      path(d="M0 0h24v24H0z" fill="none")
+      path(d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z")
+
+    g#icon-list-random(fill='currentColor')
+      // 0 0 24 24
+      path(d="M0 0h24v24H0z" fill="none")
+      path(d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z")
+
+    g#icon-list-order(fill='currentColor')
+      // 0 0 24 24
+      path(d="M0 0h24v24H0z" fill="none")
+      path(d="M4 10h12v2H4zm0-4h12v2H4zm0 8h8v2H4zm10 0v6l5-3z")
+
+    g#icon-single(fill='currentColor')
+      //- 0 0 24 24
+      path(d='M18,6.8v9.9h-2.1v-5.3c0-0.8,0-1.2,0-1.4c0-0.2-0.1-0.3-0.3-0.4c-0.1-0.1-0.5-0.1-1-0.1h-0.2V8.4c1-0.3,1.8-0.8,2.3-1.6H18z')
+      polygon(points='6,18 14.5,12 6,6 ')
+
+    g#icon-desktop-lyric-on(fill='currentColor')
+      //- 0 0 512 512
+      path(d='M162.64,335.554H81.017V152.1H55.143V359.7h107.5V335.554ZM288.807,291.4a117.012,117.012,0,0,0-11.222-20.092,29.568,29.568,0,0,0-13.365-10.562,54.323,54.323,0,0,0,17.225-7.7,50.6,50.6,0,0,0,12.579-12.23,52.253,52.253,0,0,0,7.648-15.724,64.034,64.034,0,0,0,2.573-18.345,67.706,67.706,0,0,0-3.5-22.316,42.831,42.831,0,0,0-11.007-17.233,51.262,51.262,0,0,0-19.227-11.118q-11.722-3.969-28.018-3.971H192.459V359.7H217.9v-92.44h12.008a37.092,37.092,0,0,1,10.078,1.271,24.136,24.136,0,0,1,8.291,4.209,32.591,32.591,0,0,1,7.076,7.941A76.14,76.14,0,0,1,261.79,293.3L289.664,359.7H318.4Zm-13.938-67.106a30.684,30.684,0,0,1-7.862,11.118,33.47,33.47,0,0,1-12.293,6.83,53.247,53.247,0,0,1-16.225,2.3H217.9V175.928H241.92q17.01,0,26.374,8.259t9.363,24.937A38.647,38.647,0,0,1,274.869,224.292ZM456.714,325.229a100.649,100.649,0,0,1-21.156,8.657,84.575,84.575,0,0,1-23.015,3.1q-28.448,0-43.17-20.489t-14.724-60.833a133.161,133.161,0,0,1,4-34.228q4-15.009,11.436-25.413a50.462,50.462,0,0,1,18.083-15.883,51.244,51.244,0,0,1,23.8-5.48,82.427,82.427,0,0,1,23.73,3.256,89.743,89.743,0,0,1,21.013,9.451v-27.8a94.1,94.1,0,0,0-21.442-7.544,112.019,112.019,0,0,0-24.158-2.462q-19.158,0-34.594,7.624a74.755,74.755,0,0,0-26.3,21.68q-10.865,14.056-16.724,34.228T327.632,258.2q0,51.461,21.227,77.748t60.825,26.286a111.234,111.234,0,0,0,47.03-10.324V325.229Z')
+
+    g#icon-desktop-lyric-off(fill='currentColor')
+      //- 0 0 512 512
+      path(d='M162.64,335.554H81.017V152.1H55.143V359.7h107.5V335.554ZM288.807,291.4a117.012,117.012,0,0,0-11.222-20.092,29.568,29.568,0,0,0-13.365-10.562,54.323,54.323,0,0,0,17.225-7.7,50.6,50.6,0,0,0,12.579-12.23,52.253,52.253,0,0,0,7.648-15.724,64.034,64.034,0,0,0,2.573-18.345,67.706,67.706,0,0,0-3.5-22.316,42.831,42.831,0,0,0-11.007-17.233,51.262,51.262,0,0,0-19.227-11.118q-11.722-3.969-28.018-3.971H192.459V359.7H217.9v-92.44h12.008a37.092,37.092,0,0,1,10.078,1.271,24.136,24.136,0,0,1,8.291,4.209,32.591,32.591,0,0,1,7.076,7.941A76.14,76.14,0,0,1,261.79,293.3L289.664,359.7H318.4Zm-13.938-67.106a30.684,30.684,0,0,1-7.862,11.118,33.47,33.47,0,0,1-12.293,6.83,53.247,53.247,0,0,1-16.225,2.3H217.9V175.928H241.92q17.01,0,26.374,8.259t9.363,24.937A38.647,38.647,0,0,1,274.869,224.292ZM456.714,325.229a100.649,100.649,0,0,1-21.156,8.657,84.575,84.575,0,0,1-23.015,3.1q-28.448,0-43.17-20.489t-14.724-60.833a133.161,133.161,0,0,1,4-34.228q4-15.009,11.436-25.413a50.462,50.462,0,0,1,18.083-15.883,51.244,51.244,0,0,1,23.8-5.48,82.427,82.427,0,0,1,23.73,3.256,89.743,89.743,0,0,1,21.013,9.451v-27.8a94.1,94.1,0,0,0-21.442-7.544,112.019,112.019,0,0,0-24.158-2.462q-19.158,0-34.594,7.624a74.755,74.755,0,0,0-26.3,21.68q-10.865,14.056-16.724,34.228T327.632,258.2q0,51.461,21.227,77.748t60.825,26.286a111.234,111.234,0,0,0,47.03-10.324V325.229Z')
+      path(d='M69.148,97.826l17.7-17.651,333,334-17.7,17.652Z')
+
+    g#icon-add-2(fill='currentColor')
+      //- 0 0 512 512
+      path(d='M256,170s-62.469-76.808-141-24C44.762,222.824,84.909,325.08,256,415c21.339-8.361,44-17,44-17,19-6.392,28.155,20.742,16,26-27.589,11.935,5.974-4.141-60,28C-35.524,313.85,43.993,149.031,95,117c86.8-65.89,162,10,162,10s58.158-60.523,140-23c104.032,58.528,64,161.9,45,196-9.152,15.154-39.559-4.159-32-16,20.34-37.888,45.522-107.349-25-150C314.919,103.92,256,170,256,170Z')
+      path(d='M383,368c-8.1.01-24.77-.155-40,0-15.713.16-15.282,34.964,0,35,15.1,0.035,40,0,40,0s-0.068,42.8,0,48c0.208,15.961,32.261,15.791,32-1-0.072-4.649,0-47,0-47s38.008-.031,43,0c15.732,0.046,14.947-33.98-1-34-4.884.093-42,0-42,0s-0.053-28.341,0-46c0.046-15.189-32.028-15.512-32,0C383.027,337.74,382.782,365.139,383,368Z')
+
+    g#icon-thumbs-up(fill='currentColor')
+      // 0 0 512 512
+      path(d='M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z')
+
+    g#icon-close(fill='currentColor')
+      // 0 0 24 24
+      path(d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
+
+    g#icon-comment(fill='currentColor')
+      // 0 0 24 24
+      path(d='M16 11H8V9H16V11M22 4V16C22 17.11 21.11 18 20 18H13.9L10.2 21.71C10 21.9 9.75 22 9.5 22H9C8.45 22 8 21.55 8 21V18H4C2.9 18 2 17.11 2 16V4C2 2.89 2.9 2 4 2H20C21.11 2 22 2.9 22 4M20 4H4V16H10V19.08L13.08 16H20V4')
 </template>
 

src/renderer/components/core/Player.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div(:class="$style.player")
-  div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail")
+  div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail" :tips="$t('core.player.pic_tip')")
     img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError")
     svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
       use(:xlink:href='`#${$style.iconPic}`')
@@ -8,20 +8,41 @@ div(:class="$style.player")
     div(:class="$style.middleContainer" v-if="!isShowPlayerDetail")
       div(:class="$style.column1")
         div(:class="$style.container")
-          div(:class="$style.title" @click="handleCopy(title)" :title="title + $t('core.player.copy_title')") {{title}}
+          div(:class="$style.title" @click="handleCopy(title)" :tips="title + $t('core.player.copy_title')") {{title}}
-          div(:class="$style.volumeContent")
+          div(:class="$style.controlBtn")
-            div(:class="$style.volume")
-              div(:class="$style.volumeBar" :style="{ transform: `scaleX(${volume || 0})` }")
-            div(:class="$style.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :title="`${$t('core.player.volume')}${parseInt(volume * 100)}%`")
 
-          //- div(:class="$style.playBtn" @click='handleNext' title="音量")
+            div(:class="$style.volumeContent")
+              div(:class="[$style.volume, setting.player.isMute ? $style.muted : null]")
+                div(:class="$style.volumeBar" :style="{ transform: `scaleX(${volume || 0})` }")
+              div(:class="$style.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :tips="`${$t('core.player.volume')}${parseInt(volume * 100)}%`")
+            div(:class="$style.titleBtn" @click='toggleDesktopLyric' @contextmenu="handleToggleLockDesktopLyric" :tips="toggleDesktopLyricBtnTitle")
+              svg(v-if="setting.desktopLyric.enable" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
+                use(xlink:href='#icon-desktop-lyric-on')
+              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
+                use(xlink:href='#icon-desktop-lyric-off')
+            div(:class="$style.titleBtn" @click='toggleNextPlayMode' :tips="nextTogglePlayName")
+              svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='80%' viewBox='0 0 24 24' space='preserve')
+                use(xlink:href='#icon-list-loop')
+              svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
+                use(xlink:href='#icon-list-random')
+              svg(v-else-if="setting.player.togglePlayMethod == 'list'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
+                use(xlink:href='#icon-list-order')
+              svg(v-else-if="setting.player.togglePlayMethod == 'singleLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
+                use(xlink:href='#icon-single-loop')
+              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
+                use(xlink:href='#icon-single')
+            div(:class="$style.titleBtn" @click='addMusicTo' :tips="$t('core.player.add_music_to')")
+              svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='80%' viewBox='0 0 512 512' space='preserve')
+                use(xlink:href='#icon-add-2')
+          //- div(:class="$style.playBtn" @click='playNext' tips="音量")
             svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve')
               use(xlink:href='#icon-sound')
 
       div(:class="$style.column2")
         div(:class="$style.progress" v-if="!isShowPlayerDetail")
           //- div(:class="[$style.progressBar, $style.progressBar1]" :style="{ transform: `scaleX(${progress || 0})` }")
-          div(:class="[$style.progressBar, $style.progressBar2, isActiveTransition ? $style.barTransition : '']" @transitionend="handleTransitionEnd" :style="{ transform: `scaleX(${progress || 0})`, willChange: isPlay || isActiveTransition ? 'transform' : 'auto' }")
+          div(:class="[$style.progressBar, $style.progressBar2, isActiveTransition ? $style.barTransition : '']"
+            @transitionend="handleTransitionEnd" :style="{ transform: `scaleX(${progress || 0})` }")
         div(:class="$style.progressMask" @click='handleSetProgress' ref="dom_progress")
       div(:class="$style.column3")
         span(:class="$style.statusText") {{statusText}}
@@ -29,24 +50,28 @@ div(:class="$style.player")
         span(style="margin: 0 5px;") /
         span {{maxPlayTimeStr}}
   div(:class="$style.right")
-    div(:class="$style.playBtn" @click='handlePrev' :title="$t('core.player.next')" style="transform: rotate(180deg);")
+    div(:class="$style.playBtn" @click='playPrev' :tips="$t('core.player.prev')" style="transform: rotate(180deg);")
       svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
         use(xlink:href='#icon-nextMusic')
-    div(:class="$style.playBtn" :title="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click='togglePlay')
+    div(:class="$style.playBtn" :tips="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click='togglePlay')
       svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
         use(xlink:href='#icon-pause')
       svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
         use(xlink:href='#icon-play')
-    div(:class="$style.playBtn" @click='handleNext' :title="$t('core.player.next')")
+    div(:class="$style.playBtn" @click='playNext' :tips="$t('core.player.next')")
       svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
         use(xlink:href='#icon-nextMusic')
   //- transition(enter-active-class="animated lightSpeedIn"
   transition(enter-active-class="animated lightSpeedIn"
       leave-active-class="animated slideOutDown")
-    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="musicInfo"
+    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
                       :lyric="lyric" :list="list" :listId="listId"
                       :playInfo="{ nowPlayTimeStr, maxPlayTimeStr, progress, nowPlayTime, status }"
-                      :isPlay="isPlay" @action="handlePlayDetailAction")
+                      :isPlay="isPlay" @action="handlePlayDetailAction"
+                      :nextTogglePlayName="nextTogglePlayName"
+                      @toggle-next-play-mode="toggleNextPlayMode" @add-music-to="addMusicTo")
+
+  material-list-add-modal(:show="isShowAddMusicTo" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong" @close="isShowAddMusicTo = false")
   svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style="display: none;")
     defs
       g(:id="$style.iconPic")
@@ -61,21 +86,26 @@ div(:class="$style.player")
 </template>
 
 <script>
-import Lyric from 'lrc-file-parser'
+import Lyric from '@renderer/utils/lyric-font-player'
 import { rendererSend, rendererOn, NAMES } from '../../../common/ipc'
-import { formatPlayTime2, getRandom, checkPath, setTitle, clipboardWriteText, debounce, assertApiSupport } from '../../utils'
+import { formatPlayTime2, getRandom, checkPath, setTitle, clipboardWriteText, debounce, throttle, assertApiSupport } from '../../utils'
 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
 
+const playNextModes = [
+  'listLoop',
+  'random',
+  'list',
+  'singleLoop',
+]
+
 export default {
   data() {
     return {
-      show: true,
       volume: 0,
       nowPlayTime: 0,
       maxPlayTime: 0,
@@ -91,7 +121,6 @@ export default {
         singer: '',
         album: '',
       },
-      targetSong: null,
       pregessWidth: 0,
       lyric: {
         lines: [],
@@ -99,9 +128,8 @@ export default {
         line: 0,
       },
       delayNextTimeout: null,
-      audioErrorTime: 0,
+      restorePlayTime: 0,
       retryNum: 0,
-      isMac,
       volumeEvent: {
         isMsDown: false,
         msDownX: 0,
@@ -112,14 +140,24 @@ export default {
         timeout: null,
         playTime: 0,
       },
+      isShowAddMusicTo: false,
     }
   },
   computed: {
     ...mapGetters(['setting']),
-    ...mapGetters('player', ['list', 'playIndex', 'changePlay', 'listId', 'isShowPlayerDetail']),
+    ...mapGetters('player', ['list', 'changePlay', 'playMusicInfo', 'isShowPlayerDetail', 'playInfo', 'playedList']),
     // pic() {
     //   return this.musicInfo.img ? this.musicInfo.img : ''
     // },
+    listId() { // 当前播放歌曲的列表ID
+      return this.playInfo.listId
+    },
+    playIndex() { // 当前播放歌曲所在列表的 播放列表的播放位置
+      return this.playInfo.playIndex
+    },
+    targetSong() {
+      return this.playInfo.musicInfo
+    },
     title() {
       return this.musicInfo.name
         ? this.setting.download.fileName.replace('歌名', this.musicInfo.name).replace('歌手', this.musicInfo.singer)
@@ -134,6 +172,26 @@ export default {
     progress() {
       return this.nowPlayTime / this.maxPlayTime || 0
     },
+    nextTogglePlayName() {
+      switch (this.setting.player.togglePlayMethod) {
+        case 'listLoop': return this.$t('core.player.play_toggle_mode_list_loop')
+        case 'random': return this.$t('core.player.play_toggle_mode_random')
+        case 'singleLoop': return this.$t('core.player.play_toggle_mode_single_loop')
+        case 'list': return this.$t('core.player.play_toggle_mode_list')
+        default: return this.$t('core.player.play_toggle_mode_off')
+      }
+    },
+    toggleDesktopLyricBtnTitle() {
+      return `${
+        this.setting.desktopLyric.enable
+          ? this.$t('core.player.desktop_lyric_off')
+          : this.$t('core.player.desktop_lyric_on')
+      }（${
+        this.setting.desktopLyric.isLock
+          ? this.$t('core.player.desktop_lyric_unlock')
+          : this.$t('core.player.desktop_lyric_lock')
+      }）`
+    },
   },
   mounted() {
     this.init()
@@ -143,6 +201,12 @@ export default {
     this.handleSaveVolume = debounce(volume => {
       this.setVolume(volume)
     }, 300)
+    this.savePlayInfo = throttle(n => {
+      rendererSend(NAMES.mainWindow.save_data, {
+        path: 'playInfo',
+        data: n,
+      })
+    }, 2000)
 
     rendererOn(NAMES.mainWindow.get_lyric_info, (event, info) => {
       switch (info.action) {
@@ -152,7 +216,9 @@ export default {
             singer: this.musicInfo.singer,
             name: this.musicInfo.name,
             album: this.musicInfo.album,
-            lyric: this.musicInfo.lrc,
+            lrc: this.musicInfo.lrc,
+            tlrc: this.musicInfo.tlrc,
+            lxlrc: this.musicInfo.lxlrc,
             isPlay: this.isPlay,
             line: this.lyric.line,
             played_time: audio.currentTime * 1000,
@@ -185,15 +251,21 @@ export default {
   watch: {
     changePlay(n) {
       if (!n) return
+      this.resetChangePlay()
+      if (window.restorePlayInfo) {
+        this.handleRestorePlay(window.restorePlayInfo)
+        window.restorePlayInfo = null
+        return
+      }
       // console.log('changePlay')
       this.handleRemoveMusic()
-      this.resetChangePlay()
+      if (!this.playInfo.musicInfo) return
-      if (this.playIndex < 0) return
-      this.stopPlay()
       this.play()
     },
     'setting.player.togglePlayMethod'(n) {
       audio.loop = n === 'singleLoop'
+      if (this.playedList.length) this.clearPlayedList()
+      if (n == 'random') this.setPlayedList(this.playMusicInfo)
     },
     'setting.player.isMute'(n) {
       audio.muted = n
@@ -201,7 +273,14 @@ export default {
     'setting.player.mediaDeviceId'(n) {
       this.setMediaDevice()
     },
+    'setting.player.isShowLyricTranslation'() {
+      this.setLyric()
+    },
+    'setting.player.isPlayLxlrc'() {
+      this.setLyric()
+    },
     async list(n, o) {
+      if (this.playInfo.isTempPlay) return
       if (n === o && this.musicInfo.songmid) {
         let index = this.listId == 'download'
           ? n.findIndex(s => s.musicInfo.songmid === this.musicInfo.songmid)
@@ -209,13 +288,13 @@ export default {
         if (index < 0) {
           // console.log(this.playIndex)
           if (n.length) {
-            this.fixPlayIndex(this.playIndex - 1)
+            this.setPlayIndex(this.playInfo.listPlayIndex - 1)
-            this.handleNext()
+            this.playNext()
           } else {
-            this.setPlayIndex(-1)
+            this.setPlayMusicInfo(null)
           }
         } else {
-          this.fixPlayIndex(index)
+          this.setPlayIndex(index)
         }
         // console.log(this.playIndex)
       }
@@ -229,25 +308,48 @@ export default {
     },
     nowPlayTime(n, o) {
       if (Math.abs(n - o) > 2) this.isActiveTransition = true
+      if (this.setting.player.isSavePlayTime && !this.playInfo.isTempPlay) {
+        this.savePlayInfo({
+          time: n,
+          maxTime: this.maxPlayTime,
+          listId: this.listId,
+          list: this.listId == null ? this.list : null,
+          index: this.playIndex,
+        })
+      }
+    },
+    maxPlayTime(maxPlayTime) {
+      if (!this.playInfo.isTempPlay) {
+        this.savePlayInfo({
+          time: this.nowPlayTime,
+          maxTime: maxPlayTime,
+          listId: this.listId,
+          list: this.listId == null ? this.list : null,
+          index: this.playIndex,
+        })
+      }
     },
   },
   methods: {
-    ...mapActions('player', ['getUrl', 'getPic', 'getLrc']),
+    ...mapActions('player', ['getUrl', 'getPic', 'getLrc', 'playPrev', 'playNext']),
+    ...mapActions('list', ['getOtherSource']),
     ...mapMutations('player', [
+      'setPlayMusicInfo',
       'setPlayIndex',
-      'fixPlayIndex',
       'resetChangePlay',
       'visiblePlayerDetail',
+      'clearPlayedList',
+      'setPlayedList',
     ]),
-    ...mapMutations(['setVolume']),
+    ...mapMutations(['setVolume', 'setPlayNextMode', 'setVisibleDesktopLyric', 'setLockDesktopLyric']),
     ...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.next.action, this.playNext)
-      eventHub[name](eventPlayerNames.prev.action, this.handlePrev)
+      eventHub[name](eventPlayerNames.prev.action, this.playPrev)
       eventHub[name](eventPlayerNames.volume_up.action, this.handleSetVolumeUp)
       eventHub[name](eventPlayerNames.volume_down.action, this.handleSetVolumeDown)
       eventHub[name](eventPlayerNames.volume_mute.action, this.handleSetVolumeMute)
@@ -278,18 +380,19 @@ export default {
         console.log('播放完毕')
         this.stopPlay()
         this.status = this.statusText = this.$t('core.player.end')
-        this.handleNext()
+        this.playNext()
       })
       audio.addEventListener('error', () => {
         // console.log('code', audio.error)
         if (!this.musicInfo.songmid) return
         console.log('出错')
         this.stopPlay()
+        this.clearLoadingTimeout()
         if (this.listId != 'download' && audio.error.code !== 1 && this.retryNum < 2) { // 若音频URL无效则尝试刷新2次URL
           // console.log(this.retryNum)
-          if (!this.audioErrorTime) this.audioErrorTime = audio.currentTime // 记录出错的播放时间
+          if (!this.restorePlayTime) this.restorePlayTime = audio.currentTime // 记录出错的播放时间
           this.retryNum++
-          this.setUrl(this.list[this.playIndex], true)
+          this.setUrl(this.targetSong, true)
           this.status = this.statusText = this.$t('core.player.refresh_url')
           return
         }
@@ -299,15 +402,21 @@ export default {
         this.addDelayNextTimeout()
       })
       audio.addEventListener('loadeddata', () => {
-        this.maxPlayTime = audio.duration
+        console.log('loadeddata')
-        if (this.audioErrorTime) {
+        this.clearLoadingTimeout()
-          audio.currentTime = this.audioErrorTime
-          this.audioErrorTime = 0
-        }
-        if (!this.targetSong.interval && this.listId != 'download') this.updateMusicInfo({ id: this.listId, index: this.playIndex, data: { interval: formatPlayTime2(this.maxPlayTime) } })
         this.status = this.statusText = this.$t('core.player.loading')
+        this.maxPlayTime = audio.duration
+        if (this.restorePlayTime) {
+          audio.currentTime = this.restorePlayTime
+          this.restorePlayTime = 0
+        }
+        if (!this.targetSong.interval && this.listId != 'download') {
+          this.updateMusicInfo({ id: this.listId, index: this.playIndex, data: { interval: formatPlayTime2(this.maxPlayTime) }, musicInfo: this.targetSong })
+        }
       })
       audio.addEventListener('loadstart', () => {
+        console.log('loadstart')
+        this.startLoadingTimeout()
         this.status = this.statusText = this.$t('core.player.loading')
       })
       audio.addEventListener('canplay', () => {
@@ -317,11 +426,10 @@ export default {
           this.mediaBuffer.playTime = 0
           audio.currentTime = playTime
         }
-        if (this.mediaBuffer.timeout) {
         this.clearBufferTimeout()
-        }
+
         // if (this.musicInfo.lrc) window.lrc.play(audio.currentTime * 1000)
-        this.status = this.statusText = this.$t('core.player.loading')
+        this.status = this.statusText = ''
       })
       // audio.addEventListener('canplaythrough', () => {
       //   console.log('音乐加载完毕')
@@ -330,6 +438,7 @@ export default {
       // })
       audio.addEventListener('emptied', () => {
         this.mediaBuffer.playTime = 0
+        this.clearLoadingTimeout()
         this.clearBufferTimeout()
 
         // console.log('媒介资源元素突然为空，网络错误 or 切换歌曲？')
@@ -349,6 +458,10 @@ export default {
       })
 
       window.lrc = new Lyric({
+        lineClassName: 'lrc-content',
+        fontClassName: 'font',
+        shadowContent: false,
+        activeLineClassName: 'active',
         onPlay: (line, text) => {
           this.lyric.text = text
           this.lyric.line = line
@@ -360,23 +473,25 @@ export default {
           this.lyric.lines = lines
           this.lyric.line = 0
         },
-        offset: 100,
+        // offset: 80,
       })
 
       this.handleRegisterEvent('on')
     },
     async play() {
-      console.log('play', this.playIndex)
+      this.clearDelayNextTimeout()
-      this.checkDelayNextTimeout()
+
-      let targetSong = this.targetSong = this.list[this.playIndex]
+      const targetSong = this.targetSong
+
+      if (this.setting.player.togglePlayMethod == 'random') this.setPlayedList(this.playMusicInfo)
       this.retryNum = 0
-      this.audioErrorTime = 0
+      this.restorePlayTime = 0
 
       if (this.listId == 'download') {
         const filePath = path.join(this.setting.download.savePath, targetSong.fileName)
         // console.log(filePath)
         if (!await checkPath(filePath) || !targetSong.isComplate || /\.ape$/.test(filePath)) {
-          return this.list.length == 1 ? null : this.handleNext()
+          return this.list.length == 1 ? null : this.playNext()
         }
         this.musicInfo.songmid = targetSong.musicInfo.songmid
         this.musicInfo.singer = targetSong.musicInfo.singer
@@ -387,7 +502,7 @@ export default {
         this.setImg(targetSong.musicInfo)
         this.setLrc(targetSong.musicInfo)
       } else {
-        if (!this.assertApiSupport(targetSong.source)) return this.handleNext()
+        // if (!this.assertApiSupport(targetSong.source)) return this.playNext()
         this.musicInfo.songmid = targetSong.songmid
         this.musicInfo.singer = targetSong.singer
         this.musicInfo.name = targetSong.name
@@ -402,8 +517,17 @@ export default {
         name: this.musicInfo.name,
         album: this.musicInfo.album,
       })
+      if (!this.playInfo.isTempPlay) {
+        this.savePlayInfo({
+          time: this.nowPlayTime,
+          maxTime: this.maxPlayTime,
+          listId: this.listId,
+          list: this.listId == null ? this.list : null,
+          index: this.playIndex,
+        })
+      }
     },
-    checkDelayNextTimeout() {
+    clearDelayNextTimeout() {
       // console.log(this.delayNextTimeout)
       if (this.delayNextTimeout) {
         clearTimeout(this.delayNextTimeout)
@@ -411,72 +535,13 @@ export default {
       }
     },
     addDelayNextTimeout() {
-      this.checkDelayNextTimeout()
+      this.clearDelayNextTimeout()
       this.delayNextTimeout = setTimeout(() => {
         this.delayNextTimeout = null
-        this.handleNext()
+        this.playNext()
       }, 5000)
     },
-    async filterList() {
+
-      // if (this.list.listName === null) return
-      let list
-      if (this.listId == 'download') {
-        list = []
-        for (const item of this.list) {
-          const filePath = path.join(this.setting.download.savePath, item.fileName)
-          if (!await checkPath(filePath) || !item.isComplate || /\.ape$/.test(filePath)) continue
-          list.push(item)
-        }
-      } else {
-        list = this.list.filter(s => this.assertApiSupport(s.source))
-      }
-      return list
-    },
-    async handlePrev() {
-      // console.log(playIndex)
-      let list = await this.filterList()
-      if (!list.length) return this.setPlayIndex(-1)
-      let playIndex = list.indexOf(this.list[this.playIndex])
-      let index
-      switch (this.setting.player.togglePlayMethod) {
-        case 'random':
-          index = this.hanldeListRandom(list, playIndex)
-          break
-        case 'listLoop':
-        case 'list':
-          index = playIndex === 0 ? list.length - 1 : playIndex - 1
-          break
-        default:
-          return
-      }
-      if (index < 0) return
-      index = this.list.indexOf(list[index])
-      this.setPlayIndex(index)
-    },
-    async handleNext() {
-      // if (this.list.listName === null) return
-      let list = await this.filterList()
-      if (!list.length) return this.setPlayIndex(-1)
-      let playIndex = list.indexOf(this.list[this.playIndex])
-      // console.log(playIndex)
-      let index
-      switch (this.setting.player.togglePlayMethod) {
-        case 'listLoop':
-          index = playIndex === list.length - 1 ? 0 : playIndex + 1
-          break
-        case 'random':
-          index = this.hanldeListRandom(list, playIndex)
-          break
-        case 'list':
-          index = playIndex === list.length - 1 ? -1 : playIndex + 1
-          break
-        default:
-          return
-      }
-      if (index < 0) return
-      index = this.list.indexOf(list[index])
-      this.setPlayIndex(index)
-    },
     hanldeListRandom(list, index) {
       return getRandom(0, list.length)
     },
@@ -500,7 +565,7 @@ export default {
     setProgress(pregress) {
       if (!audio.src) return
       const time = pregress * this.maxPlayTime
-      if (this.audioErrorTime) this.audioErrorTime = time
+      if (this.restorePlayTime) this.restorePlayTime = time
       if (this.mediaBuffer.playTime) {
         this.clearBufferTimeout()
         this.mediaBuffer.playTime = time
@@ -516,7 +581,13 @@ export default {
       )
     },
     togglePlay() {
-      if (!audio.src) return
+      if (!audio.src) {
+        if (this.restorePlayTime != null) {
+          // if (!this.assertApiSupport(this.targetSong.source)) return this.playNext()
+          this.setUrl(this.targetSong)
+        }
+        return
+      }
       if (this.isPlay) {
         audio.pause()
         this.clearBufferTimeout()
@@ -536,11 +607,19 @@ export default {
     },
     setUrl(targetSong, isRefresh, isRetryed = false) {
       let type = this.getPlayType(this.setting.player.highQuality, targetSong)
-      this.musicInfo.url = targetSong.typeUrl[type]
+      // this.musicInfo.url = await getMusicUrl(targetSong, type)
       this.status = this.statusText = this.$t('core.player.geting_url')
 
-      return this.getUrl({ musicInfo: targetSong, type, isRefresh }).then(() => {
+      return this.getUrl({
-        audio.src = this.musicInfo.url = targetSong.typeUrl[type]
+        musicInfo: targetSong,
+        type,
+        isRefresh,
+        onToggleSource: () => {
+          this.status = this.statusText = 'Try toggle source...'
+        },
+      }).then(url => {
+        if (targetSong !== this.targetSong || this.isPlay) return
+        audio.src = this.musicInfo.url = url
       }).catch(err => {
         // console.log('err', err.message)
         if (err.message == requestMsg.cancelRequest) return
@@ -560,26 +639,15 @@ export default {
       }
     },
     setLrc(targetSong) {
-      this.musicInfo.lrc = targetSong.lrc
+      this.getLrc(targetSong).then(({ lyric, tlyric, lxlyric }) => {
-
+        this.musicInfo.lrc = lyric
-      let lrcP = this.musicInfo.lrc
+        this.musicInfo.tlrc = tlyric
-        ? Promise.resolve()
+        this.musicInfo.lxlrc = lxlyric
-        : this.getLrc(targetSong).then(() => {
+      }).catch(() => {
-          this.musicInfo.lrc = targetSong.lrc
-        })
-
-      lrcP
-        .then(() => {
-          window.lrc.setLyric(this.musicInfo.lrc)
-          this.handleUpdateWinLyricInfo('lyric', this.musicInfo.lrc)
-          if (this.isPlay && (this.musicInfo.url || this.listId == 'download')) {
-            window.lrc.play(audio.currentTime * 1000)
-            this.handleUpdateWinLyricInfo('play', audio.currentTime * 1000)
-          }
-        })
-        .catch(() => {
-          this.handleUpdateWinLyricInfo('lyric', this.musicInfo.lrc)
         this.status = this.statusText = this.$t('core.player.lyric_error')
+      }).finally(() => {
+        this.handleUpdateWinLyricInfo('lyric', { lrc: this.musicInfo.lrc, tlrc: this.musicInfo.tlrc, lxlrc: this.musicInfo.lxlrc })
+        this.setLyric()
       })
     },
     handleRemoveMusic() {
@@ -591,6 +659,8 @@ export default {
       this.status = this.musicInfo.name = this.musicInfo.singer = ''
       this.musicInfo.songmid = null
       this.musicInfo.lrc = null
+      this.musicInfo.tlrc = null
+      this.musicInfo.lxlrc = null
       this.musicInfo.url = null
       this.nowPlayTime = 0
       this.maxPlayTime = 0
@@ -623,8 +693,9 @@ export default {
 
       this.volume = val
       this.volumeEvent.msDownVolume = val
-      // console.log(val)
       if (audio) audio.volume = this.volume
+
+      if (this.setting.player.isMute) this.setVolume(false)
     },
     handleSetVolumeMute() {
       audio.muted = !audio.muted
@@ -654,23 +725,36 @@ export default {
       this.setProgressWidth()
     },
     handleToMusicLocation() {
-      if (this.listId == 'download') return
+      if (!this.listId || this.listId == '__temp__' || this.listId == 'download') return
       if (this.playIndex == -1) return
       this.$router.push({
         path: 'list',
         query: {
           id: this.listId,
-          scrollIndex: this.playIndex,
+          scrollIndex: this.playInfo.playIndex,
         },
       })
     },
     showPlayerDetail() {
+      if (!this.targetSong) return
       this.visiblePlayerDetail(true)
     },
     handleTransitionEnd(e) {
       // console.log(e)
       this.isActiveTransition = false
     },
+    startLoadingTimeout() {
+      // console.log('start load timeout')
+      this.loadingTimeout = setTimeout(() => {
+        this.playNext()
+      }, 20000)
+    },
+    clearLoadingTimeout() {
+      if (!this.loadingTimeout) return
+      // console.log('clear load timeout')
+      clearTimeout(this.loadingTimeout)
+      this.loadingTimeout = null
+    },
     startBuffering() {
       console.log('start t')
       if (this.mediaBuffer.timeout) return
@@ -681,7 +765,7 @@ export default {
         if (skipTime > this.maxPlayTime) skipTime = (this.maxPlayTime - audio.currentTime) / 2
         if (skipTime - this.mediaBuffer.playTime < 1 || this.maxPlayTime - skipTime < 1) {
           this.mediaBuffer.playTime = 0
-          this.handleNext()
+          this.playNext()
           return
         }
         this.startBuffering()
@@ -741,13 +825,13 @@ export default {
     handlePlayDetailAction({ type, data }) {
       switch (type) {
         case 'prev':
-          this.handlePrev()
+          this.playPrev()
           break
         case 'togglePlay':
           this.togglePlay()
           break
         case 'next':
-          this.handleNext()
+          this.playNext()
           break
         case 'progress':
           this.setProgress(data)
@@ -766,6 +850,58 @@ export default {
         info,
       })
     },
+    setLyric() {
+      window.lrc.setLyric(
+        this.setting.player.isPlayLxlrc && this.musicInfo.lxlrc ? this.musicInfo.lxlrc : this.musicInfo.lrc,
+        this.setting.player.isShowLyricTranslation && this.musicInfo.tlrc ? this.musicInfo.tlrc : '',
+        // (
+        //   this.setting.player.isShowLyricTranslation && this.musicInfo.tlrc
+        //     ? (this.musicInfo.tlrc + '\n')
+        //     : ''
+        // ) + (this.musicInfo.lrc || ''),
+      )
+      if (this.isPlay && (this.musicInfo.url || this.listId == 'download')) {
+        window.lrc.play(audio.currentTime * 1000)
+        this.handleUpdateWinLyricInfo('play', audio.currentTime * 1000)
+      }
+    },
+    toggleDesktopLyric() {
+      this.setVisibleDesktopLyric(!this.setting.desktopLyric.enable)
+    },
+    handleToggleLockDesktopLyric() {
+      this.setLockDesktopLyric(!this.setting.desktopLyric.isLock)
+    },
+    toggleNextPlayMode() {
+      let index = playNextModes.indexOf(this.setting.player.togglePlayMethod)
+      if (++index >= playNextModes.length) index = -1
+      this.setPlayNextMode(playNextModes[index] || '')
+    },
+    addMusicTo() {
+      if (!this.musicInfo.songmid) return
+      this.isShowAddMusicTo = true
+    },
+    handleRestorePlay(restorePlayInfo) {
+      let musicInfo = this.list[restorePlayInfo.index]
+      this.musicInfo.songmid = musicInfo.songmid
+      this.musicInfo.singer = musicInfo.singer
+      this.musicInfo.name = musicInfo.name
+      this.musicInfo.album = musicInfo.albumName
+      this.setImg(musicInfo)
+      this.setLrc(musicInfo)
+      this.nowPlayTime = this.restorePlayTime = restorePlayInfo.time
+      this.maxPlayTime = restorePlayInfo.maxTime || 0
+      this.handleUpdateWinLyricInfo('music_info', {
+        songmid: this.musicInfo.songmid,
+        singer: this.musicInfo.singer,
+        name: this.musicInfo.name,
+        album: this.musicInfo.album,
+      })
+      this.$nextTick(() => {
+        this.sendProgressEvent(this.progress, 'paused')
+      })
+
+      if (this.setting.player.togglePlayMethod == 'random') this.setPlayedList(this.playMusicInfo)
+    },
   },
 }
 </script>
@@ -855,17 +991,26 @@ export default {
 }
 
 .title {
-  flex: 1 1 0;
+  flex: 0 1 auto;
-  width: 0;
+  min-width: 0;
   padding-right: 5px;
   font-size: 14px;
   line-height: 18px;
   .mixin-ellipsis-1;
 }
 
+.controlBtn {
+  flex: none;
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+
 .volume-content {
+  flex: none;
   position: relative;
   width: 80px;
+  margin-right: 10px;
   display: flex;
   align-items: center;
   opacity: .5;
@@ -882,13 +1027,17 @@ export default {
   border-radius: 10px;
   // overflow: hidden;
   transition: @transition-theme;
-  transition-property: background-color;
+  transition-property: background-color, opacity;
   background-color: @color-player-progress-bar1;
   // background-color: #f5f5f5;
   position: relative;
   border-radius: @radius-progress-border;
 }
 
+.muted {
+  opacity: .5;
+}
+
 .volume-bar {
   position: absolute;
   left: 0;
@@ -901,10 +1050,11 @@ export default {
   height: 100%;
   border-radius: @radius-progress-border;
   transition-duration: 0.2s;
-  background-color: @color-theme;
+  background-color: @color-btn;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
+
 .volume-mask {
   position: absolute;
   top: 0;
@@ -913,6 +1063,32 @@ export default {
   cursor: pointer;
 }
 
+.titleBtn {
+  flex: none;
+  margin-left: 5px;
+  height: 100%;
+  width: 20px;
+  color: @color-btn;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  transition: opacity 0.2s ease;
+  opacity: .6;
+  cursor: pointer;
+
+  svg {
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+  }
+  &:hover {
+    opacity: 1;
+  }
+  &:active {
+    opacity: 1;
+  }
+}
+
 .play-btn {
   + .play-btn {
     margin-left: 15px;
@@ -947,7 +1123,7 @@ export default {
 
 .progress {
   width: 100%;
-  height: 3px;
+  height: 4px;
   // overflow: hidden;
   transition: @transition-theme;
   transition-property: background-color;
@@ -980,6 +1156,7 @@ export default {
 .progress-bar2 {
   background-color: @color-player-progress-bar2;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  opacity: 0.8;
 }
 
 .bar-transition {
@@ -997,6 +1174,7 @@ export default {
   display: flex;
   padding-top: 2px;
   // justify-content: space-between;
+  height: 16px;
   align-items: center;
 }
 
@@ -1041,8 +1219,11 @@ each(@themes, {
       //   border-color: ~'@{color-@{value}-theme_2-background_1}';
       // }
     }
+    .titleBtn {
+      color: ~'@{color-@{value}-btn}';
+    }
     .play-btn {
-      color: ~'@{color-@{value}-theme}';
+      color: ~'@{color-@{value}-btn}';
       svg {
         filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
       }
@@ -1052,7 +1233,7 @@ each(@themes, {
     }
 
     .volume-bar {
-      background-color: ~'@{color-@{value}-theme}';
+      background-color: ~'@{color-@{value}-btn}';
     }
 
 

src/renderer/components/core/PlayerDetail.vue

@@ -4,37 +4,57 @@
     //- div(:class="$style.bg2")
     div(:class="$style.header")
       div(:class="$style.controBtn")
-        button(type="button" :class="$style.hide" :title="$t('core.player.hide_detail')" @click="visiblePlayerDetail(false)")
+        button(type="button" :class="$style.hide" :tips="$t('core.player.hide_detail')" @click="visiblePlayerDetail(false)")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
             use(xlink:href='#icon-window-hide')
-        button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
+        button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
             use(xlink:href='#icon-window-minimize')
 
         //- button(type="button" :class="$style.max" @click="max")
-        button(type="button" :class="$style.close" :title="$t('core.toolbar.close')" @click="close")
+        button(type="button" :class="$style.close" :tips="$t('core.toolbar.close')" @click="close")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
             use(xlink:href='#icon-window-close')
 
-    div(:class="$style.main")
+    div(:class="[$style.main, isShowComment ? $style.showComment : null]")
       div(:class="$style.left")
+        //- div(:class="$style.info")
         div(:class="$style.info")
-          div(:class="$style.img")
+          img(:class="$style.img" :src="musicInfo.img" v-if="musicInfo.img")
-            img(:src="musicInfo.img" v-if="musicInfo.img")
           div(:class="$style.description")
             p {{$t('core.player.name')}}{{musicInfo.name}}
             p {{$t('core.player.singer')}}{{musicInfo.singer}}
             p(v-if="musicInfo.album") {{$t('core.player.album')}}{{musicInfo.album}}
-        //- div(:class="$style.list")
-          ul
 
       div(:class="$style.right")
         div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
           div(:class="$style.lyricSpace")
-          p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
+          div(:class="[$style.lyricText]" ref="dom_lyric_text")
+          //- p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
           div(:class="$style.lyricSpace")
+
+      material-music-comment(:class="$style.comment" :titleFormat="this.setting.download.fileName" :musicInfo="musicInfo" v-model="isShowComment")
+
     div(:class="$style.footer")
-      div(:class="$style.left")
+      div(:class="$style.footerLeft")
+        div(:class="$style.footerLeftControlBtns")
+          div(:class="[$style.footerLeftControlBtn, isShowComment ? $style.active : null]" @click="isShowComment = !isShowComment" :tips="$t('core.player.comment_show')")
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-comment')
+          div(:class="$style.footerLeftControlBtn" @click="$emit('toggle-next-play-mode')" :tips="nextTogglePlayName")
+            svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-list-loop')
+            svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-list-random')
+            svg(v-else-if="setting.player.togglePlayMethod == 'list'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-list-order')
+            svg(v-else-if="setting.player.togglePlayMethod == 'singleLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='110%' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-single-loop')
+            svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
+              use(xlink:href='#icon-single')
+          div(:class="$style.footerLeftControlBtn" @click="$emit('add-music-to', musicInfo)" :tips="$t('core.player.add_music_to')")
+            svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
+              use(xlink:href='#icon-add-2')
         div(:class="$style.progressContainer")
           div(:class="$style.progressContent")
             div(:class="$style.progress")
@@ -50,15 +70,15 @@
       div(:class="$style.playControl")
         //- div(:class="$style.playBtn")
         //- div(:class="$style.playBtn")
-        div(:class="$style.playBtn" @click="$emit('action', { type: 'prev' })" style="transform: rotate(180deg);" :title="$t('core.player.prev')")
+        div(:class="$style.playBtn" @click="$emit('action', { type: 'prev' })" style="transform: rotate(180deg);" :tips="$t('core.player.prev')")
           svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
             use(xlink:href='#icon-nextMusic')
-        div(:class="$style.playBtn" :title="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click="$emit('action', { type: 'togglePlay' })")
+        div(:class="$style.playBtn" :tips="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click="$emit('action', { type: 'togglePlay' })")
           svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
             use(xlink:href='#icon-pause')
           svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
             use(xlink:href='#icon-play')
-        div(:class="$style.playBtn" @click="$emit('action', { type: 'next' })" :title="$t('core.player.next')")
+        div(:class="$style.playBtn" @click="$emit('action', { type: 'next' })" :tips="$t('core.player.next')")
           svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
             use(xlink:href='#icon-nextMusic')
 </template>
@@ -124,6 +144,7 @@ export default {
       type: Boolean,
       default: false,
     },
+    nextTogglePlayName: String,
   },
   watch: {
     // 'musicInfo.img': {
@@ -138,11 +159,14 @@ export default {
       handler(n, o) {
         this.isSetedLines = true
         if (o) {
+          this.$refs.dom_lyric_text.textContent = ''
+          this.setLyric(n)
+
           this._lyricLines = n
           if (n.length) {
             this.lyricLines = n
             this.$nextTick(() => {
-              this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+              this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
               this.handleScrollLrc()
             })
           } else {
@@ -154,7 +178,7 @@ export default {
               if (this.lyricLines === this._lyricLines && this._lyricLines.length) return
               this.lyricLines = this._lyricLines
               this.$nextTick(() => {
-                this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+                this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
                 this.handleScrollLrc()
               })
             }, 50)
@@ -162,7 +186,7 @@ export default {
         } else {
           this.lyricLines = n
           this.$nextTick(() => {
-            this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
+            this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
             this.handleScrollLrc()
           })
         }
@@ -205,6 +229,7 @@ export default {
       _lyricLines: [],
       lyricLines: [],
       isSetedLines: false,
+      isShowComment: false,
     }
   },
   mounted() {
@@ -214,6 +239,8 @@ export default {
     document.addEventListener('mousemove', this.handleMouseMsMove)
     document.addEventListener('mouseup', this.handleMouseMsUp)
     window.addEventListener('resize', this.handleResize)
+    // console.log('object', this.$refs.dom_lyric_text)
+    this.setLyric(this.lyricLines)
   },
   beforeDestroy() {
     this.clearLyricScrollTimeout()
@@ -229,6 +256,13 @@ export default {
     ...mapMutations('player', [
       'visiblePlayerDetail',
     ]),
+    setLyric(lines) {
+      const dom_lines = document.createDocumentFragment()
+      for (const line of lines) {
+        dom_lines.appendChild(line.dom_line)
+      }
+      this.$refs.dom_lyric_text.appendChild(dom_lines)
+    },
     handleResize() {
       this.setProgressWidth()
     },
@@ -452,33 +486,56 @@ export default {
   overflow: hidden;
   display: flex;
   padding: 0 30px;
+
+  &.showComment {
+    .left {
+      flex-basis: 18%;
+      .description p {
+        font-size: 12px;
+      }
+    }
+    .right {
+      flex-basis: 30%;
+      .lyric {
+        font-size: 13px;
+      }
+    }
+    .comment {
+      flex-basis: 50%;
+      opacity: 1;
+    }
+  }
 }
 .left {
-  flex: 0 0 40%;
+  flex: 40%;
-  overflow: hidden;
-}
-.info {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
+  padding: 13px;
+  overflow: hidden;
+  transition: flex-basis @transition-theme;
+}
+
+.info {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  max-width: 300px;
+
 }
 .img {
-  width: 300px;
-  height: 300px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  img {
   max-width: 100%;
   max-height: 100%;
-    border: 5px solid @color-theme-hover;
+  min-width: 100%;
+  box-shadow: 0 0 4px @color-theme-hover;
+  border-radius: 6px;
+  opacity: .8;
+  // border: 5px solid @color-theme-hover;
   // border-radius: @radius-border;
   // border: 5px solid #fff;
 }
-}
 .description {
-  width: 300px;
+  max-width: 300px;
   padding: 15px 0;
   overflow: hidden;
   p {
@@ -492,8 +549,11 @@ export default {
   flex: 0 0 60%;
   // padding: 0 30px;
   position: relative;
+  transition: flex-basis @transition-theme;
+
   &:before {
     position: absolute;
+    z-index: 1;
     top: 0;
     left: 0;
     content: ' ';
@@ -522,13 +582,59 @@ export default {
   &.draging {
     cursor: grabbing;
   }
-  p {
+  :global {
-    padding: 8px 0;
+    .lrc-content {
       line-height: 1.2;
+      margin: 16px 0;
       overflow-wrap: break-word;
-    transition: @transition-theme;
+      color: @color-player-detail-lyric;
-    transition-property: color, font-size;
+
+      .translation {
+        transition: @transition-theme !important;
+        transition-property: font-size, color;
+        font-size: .9em;
+        margin-top: 5px;
       }
+      .line {
+        transition-property: font-size, color !important;
+        background: none !important;
+        -webkit-text-fill-color: unset;
+        // -webkit-text-fill-color: none !important;
+      }
+      &.active {
+        .line {
+          color: @color-theme;
+        }
+        .translation {
+          font-size: 1em;
+          color: @color-theme;
+        }
+        span {
+          // color: @color-theme;
+          font-size: 1.2em;
+        }
+      }
+
+      span {
+        transition: @transition-theme !important;
+        transition-property: font-size !important;
+        font-size: 1em;
+        background-repeat: no-repeat;
+        background-color: rgba(77, 77, 77, 0.9);
+        background-image: -webkit-linear-gradient(top, @color-theme, @color-theme);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        background-size: 0 100%;
+      }
+    }
+  }
+  // p {
+  //   padding: 8px 0;
+  //   line-height: 1.2;
+  //   overflow-wrap: break-word;
+  //   transition: @transition-theme !important;
+  //   transition-property: color, font-size;
+  // }
 }
 .lyric-space {
   height: 70%;
@@ -537,18 +643,51 @@ export default {
   color: @color-theme;
   font-size: 1.2em;
 }
+
+.comment {
+  flex: 0 0 0;
+  opacity: 0;
+  margin-left: 10px;
+}
+
 .footer {
   flex: 0 0 100px;
   overflow: hidden;
   display: flex;
   align-items: center;
 }
-.left {
+.footerLeft {
   flex: auto;
   display: flex;
   flex-flow: column nowrap;
-  align-items: center;
+  padding: 13px;
-  padding-top: 13px;
+  overflow: hidden;
+}
+.footerLeftControlBtns {
+  color: @color-theme_2-font;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
+.footerLeftControlBtn {
+  width: 18px;
+  height: 18px;
+  opacity: .5;
+  cursor: pointer;
+  transition: opacity @transition-theme;
+
+  &:hover {
+    opacity: .9;
+  }
+
+  +.footerLeftControlBtn {
+    margin-left: 6px;
+  }
+
+  &.active {
+    color: @color-theme;
+    opacity: .8;
+  }
 }
 .progress-container {
   width: 100%;
@@ -608,6 +747,7 @@ export default {
 }
 .time-label {
   width: 100%;
+  height: 18px;
   display: flex;
   justify-content: space-between;
   span {
@@ -656,6 +796,7 @@ each(@themes, {
     .container {
       border-left-color: ~'@{color-@{value}-theme}';
       background-color: ~'@{color-@{value}-theme_2-background_1}';
+      // color: ~'@{color-@{value}-theme_2-font}';
     }
     .right {
       &:before {
@@ -686,13 +827,40 @@ each(@themes, {
       }
     }
     .img {
-      img {
+      box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
-        border-color: ~'@{color-@{value}-theme-hover}';
+      // border-color: ~'@{color-@{value}-theme-hover}';
+    }
+    .lyric {
+      :global {
+        .lrc-content {
+          color: ~'@{color-@{value}-player-detail-lyric}';
+
+          &.active {
+            .translation {
+              color: ~'@{color-@{value}-player-detail-lyric-active}';
+            }
+            .line {
+              color: ~'@{color-@{value}-player-detail-lyric-active}';
             }
           }
-    .lrc-active {
+          span {
+            background-color: ~'@{color-@{value}-player-detail-lyric}';
+            background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-player-detail-lyric-active}', ~'@{color-@{value}-player-detail-lyric-active}');
+          }
+        }
+      }
+    }
+    // .lrc-active {
+    //   color: ~'@{color-@{value}-theme}';
+    // }
+    .footerLeftControlBtns {
+      color: ~'@{color-@{value}-theme_2-font}';
+    }
+    .footerLeftControlBtn {
+      &.active {
         color: ~'@{color-@{value}-theme}';
       }
+    }
     .progress {
       background-color: ~'@{color-@{value}-player-progress}';
     }