Merge branch 'dev'

.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

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

.eslintrc

@@ -16,7 +16,9 @@
     "no-multiple-empty-lines": [1, {"max": 2}],
     "comma-dangle": [2, "always-multiline"],
     "standard/no-callback-literal": "off",
-    "prefer-const": "off"
+    "prefer-const": "off",
+    "no-labels": "off",
+    "node/no-callback-literal": "off"
   },
   "settings": {
     "html/html-extensions": [".html", ".vue"]

.github/workflows/beta-pack.yml

@@ -0,0 +1,233 @@
+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 arm64
+        run: npm run pack:win:setup:arm64
+      - name: Upload Artifact Setup arm64
+        uses: actions/upload-artifact@v2
+        with:
+          name: lx-music-desktop-arm64-Setup
+          path: build/* arm64 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 pack:mac:dmg
+          npm run pack: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,136 @@
+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:arm64
+          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 }}

.ncurc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  upgrade: true,
+  reject: [
+    'vue-loader',
+    'webpack-dev-server',
+    // 'eslint-config-standard'
+  ]
+}

.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,19 @@
+{
+  "path-intellisense.mappings": {
+    "@main/*": "${workspaceFolder}/src/main/*",
+    "@renderer/*": "${workspaceFolder}/src/renderer/*",
+    "@lyric/*": "${workspaceFolder}/src/renderer-lyric/*",
+    "@static/*": "${workspaceFolder}/src/static/*",
+    "@common/*": "${workspaceFolder}/src/common/*",
+  },
+  "i18n-ally.localesPaths": [
+    "src/renderer/lang"
+  ],
+  "i18n-ally.displayLanguage": "zh-cn",
+  "i18n-ally.sourceLanguage": "zh-cn",
+  "i18n-ally.namespace": true,
+  "i18n-ally.translate.engines": ["google-cn", "google"],
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
+  "i18n-ally.keystyle": "flat",
+  "i18n-ally.sortKeys": true
+}

CHANGELOG.md

@@ -6,6 +6,203 @@ 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.13.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.12.2...v1.13.0) - 2021-09-05
+
+如果你喜欢并经常使用洛雪音乐，并想要第一时间尝鲜洛雪的新功能，可以加入测试企鹅群768786588，
+注意：测试版的功可能会不稳定，打算潜水的勿加。
+
+### 新增
+
+- 歌曲搜索框新增清理按钮，点击此按钮可以清理搜索框并返回初始搜索界面
+- 新增“下载的歌词文件编码格式”设置，默认下载的歌词编码仍是`UTF-8`，对于某些在设备(如车机)上出现歌词中文乱码的用户可以尝试选择以`GBK`编码格式保存歌词文件
+- 新增设置-桌面歌词-歌词字体设置，此设置可用于设置桌面歌词的字体（已知的问题：Windows 7 下可能会出现字体列表为空的情况，这是当前系统的 Powershell 版本小于5.1导致的，请自行**尝试**看常见解决）
+
+### 优化
+
+- 支持网易源“我喜欢”歌单以注入token的方式打开。由于网易源的“我喜欢”歌单需要登录才能打开（若你看不懂后半句就去阅读 常见问题-无法打开外部歌单），现若想要打开此类歌单，需要在歌单链接后面拼上 `###` 再加上有效的token，拼接格式：`[id|url]###token`，例子（最后面的xxxxxx替换成你的token）：`https://music.163.com/#/playlist?id=123456&userid=123456###xxxxxx`
+- 软件内快捷键的最小化触发时，如果已启用托盘，则隐藏程序，否则最小化程序
+
+### 修复
+
+- 修复某些情况下同步功能会导致切歌混乱的问题
+- 修复从电脑浏览器复制的企鹅歌单链接无法打开的问题
+
+## [1.12.2](https://github.com/lyswhut/lx-music-desktop/compare/v1.12.1...v1.12.2) - 2021-08-11
+
+### 修复
+
+- 修复播放下载列表的歌曲时切歌的问题
+- 修复播放下载列表的歌曲时歌词无法显示的问题
+- 修复下载列表稍后播放功能无效的问题
+- 修复同步服务器启动失败时，关闭同步服务不会清空失败信息的问题
+
+## [1.12.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.12.0...v1.12.1) - 2021-08-08
+
+### 修复
+
+- 修复随机播放下无法切歌的问题
+
+## [1.12.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.11.0...v1.12.0) - 2021-08-08
+
+### 新增
+
+- 新增局域网同步功能（实验性，首次使用前建议先备份一次列表），此功能需要配合PC端使用，移动端与PC端处在同一个局域网（路由器的网络）下时，可以多端实时同步歌曲列表，使用问题请看"常见问题"。
+
+### 优化
+
+- 添加播放器对系统媒体控制与显示的兼容处理，现在在windows下的锁屏界面可以正确显示当前播放的音乐信息及切换歌曲了
+
+### 修复
+
+- 修复导入kg歌单最多只能加载100、500首歌曲的问题。注：现在可以加载1000+首歌曲的歌单，但出于未知原因会导致部分歌曲无法加载（可能是无版权导致的），目前酷狗码仍然最多只能加载500首歌
+- 修复某些情况下所显示的歌词、封面图片与当前正在播放的歌曲不一致的问题
+
+## [1.11.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.10.2...v1.11.0) - 2021-07-18
+
+### 新增
+
+- 添加 win arm64 架构的安装包构建
+- 新增“添加歌曲到列表时的位置”设置，可选项为列表的“顶部”与“底部”
+
+### 优化
+
+- 优化网络请求，尝试去解决无法连接服务器的问题
+- 优化mg源打开歌单的链接兼容
+
+### 修复
+
+- 修复mg源搜索失效的问题
+
+### 移除
+
+- 因wy源的歌单列表已没有“最新”排序的选项，所以现跟随移除wy源歌单列表按“最新”排序的按钮
+
+### 变更
+
+- 添加歌曲到列表时从原来的底部改为顶部，若你想要将你的列表歌曲顺序反转以适应这一变更，可先按住`shift`键的情况下点击列表的最后一首歌，然后再点击列表的第一首歌，完成倒序选中，最后随便右击列表的任意一首歌，在弹出的菜单中选择调整顺序，在弹出框输入1后确定即可反转列表。
+若你想要恢复原来的行为则可以去更改“添加歌曲到列表时的位置”设置项。
+
+### 其他
+
+- 更新electron到v13.1.7
+
+## [1.10.2](https://github.com/lyswhut/lx-music-desktop/compare/v1.10.1...v1.10.2) - 2021-05-25
+
+### 修复
+
+- 修复企鹅音乐搜索歌曲没有结果的问题
+
+## [1.10.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.10.0...v1.10.1) - 2021-05-25
+
+### 修复
+
+- 修复企鹅音乐搜索歌曲没有结果的问题
+- 修复播放在空的歌单列表点击播放全部时报错的问题
+
+## [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
 
 ### 新增

FAQ.md

@@ -8,7 +8,24 @@
 
 ## 歌曲无法试听与下载
 
-该问题解决顺序如下：
+### 所有歌曲都提示 `请求异常😮，可以多试几次，若还是不行就换一首吧。。。`
+
+尝试更换网络，如切换到移动网络，若移动网络还是不行则尝试开关下手机的飞行模式后再试，<br>
+若使用家庭网络的话，可尝试将光猫断电5分钟左右再通电联网后播放。
+
+### 提示 `getaddrinfo EAI_AGAIN ...` 或 `无法连接到服务器`
+
+尝试在在浏览器打开这个地址`http://ts.tempmusic.tk`，浏览器显示404是正常的，如果不是404那就证明所在网络无法访问接口服务器。
+若网页无法打开或打开来不是404，则可能是DNS的问题，可以尝试以下办法：
+
+1. 将DNS改成自动获取试试（注：改完可能需要清理下系统DNS缓存才生效）
+2. 手动把DNS改一下，不要用360的DNS，可以把DNS改成`223.6.6.6`、`8.8.8.8`（注：改完可能需要清理下系统DNS缓存才生效）
+
+改完DNS后可能需要重启软件才生效
+
+### 通用解决方法
+
+尝试按以下顺序解决：
 
 1. 尝试更新到最新版本
 2. 尝试切换其他歌曲（或直接搜索该歌曲），若全部歌曲都无法试听与下载则进行下一步
@@ -21,7 +38,7 @@
 若网页无法打开或打来不是404，则应该是DNS的问题，可以尝试以下办法：
 
 1. 将DNS改成自动获取试试
-2. 手动把DNS改一下，不要用360的DNS，可以把DNS改成`114.114.114.114`、`8.8.8.8`
+2. 手动把DNS改一下，不要用360的DNS，可以把DNS改成`223.6.6.6`、`8.8.8.8`
 
 ## 列表多选
 
@@ -45,6 +62,65 @@
 对于分享出来的歌单，若打开失败，可尝试先在浏览器中打开后，再从浏览器地址栏复制URL地址到软件打开；<br>
 或者如果你知道歌单 id 也可以直接输入歌单 id 打开。<br>
 
+注：网易源的“我喜欢”歌单无法在未登录的情况下打开，所以你需要手动创建一个歌单后将“我喜欢”里的歌曲移动到该歌单打开
+
+### 打开网易源“我喜欢”歌单
+
+由于网易源的“我喜欢”歌单需要登录才能打开，从v1.13.0起提供了可以以注入token的方式打开网易源“我喜欢”歌单的功能，现若想要打开此类歌单，需要在歌单链接或id后面拼上 `###` 再加上有效的token，拼接格式：`[id|url]###token`，例子（最后面的xxxxxx替换成你的token）：
+- `https://music.163.com/#/playlist?id=11332&userid=123456###xxxxxx`
+- `11332###xxxxxx`
+
+即：将 `歌单链接或者歌单ID`、`###`、`token` 这三者拼到一起。
+
+#### `token`的获取方法
+
+**注：`token`是你账号的临时身份令牌，不要随便泄露给他人**<br>
+在浏览器打开登录网易云音乐并**登录**后，按`F12`，此时将会打开开发者窗口，然后按你使用的浏览器操作：
+
+##### Chrome、360、QQ等浏览器
+
+这些浏览器打开此窗口时界面可能是中文也可能是英文，英文的话按括号里的来
+
+1. 点击窗口顶部`应用程序(application)`
+2. 展开左侧 `Cookies`
+3. 点击 `https://music.163.com`
+4. 在右侧窗口找到 `名称(Name)` 为 `MUSIC_U` 的这行，这行的第二列（`值(Value)`）内的那串内容就是`token`，双击它进入编辑状态，然后按`ctrl + c`键就可以将它复制
+
+##### 火狐浏览器
+
+1. 点击窗口顶部`存储`
+2. 展开左侧 `Cookie`
+3. 点击 `https://music.163.com`
+4. 在右侧窗口找到 `名称` 为 `MUSIC_U` 的这行，这行的最后一列（`值`）内的那串内容就是`token`，双击它进入编辑状态，然后按`ctrl + c`键就可以将它复制
+
+## 更新已收藏的在线歌单
+
+该功能仅对直接从歌单详情页点“收藏”按钮收藏的歌单有效，可右击已收藏的列表名从弹出的菜单中选择“更新”使用该功能，
+
+需要注意的是：这将会覆盖本地的目标列表，歌曲将被替换成最新的在线列表。
+
+
+## 同步功能的使用（实验性，首次使用前建议先备份一次列表）
+
+**注意：由于同步传输时的数据是明文传输，请在受信任的网络下使用此功能！**<br>
+此功能需要配合移动端使用，PC端与移动端处在同一个局域网（路由器的网络）下时，可以多端实时同步歌曲列表，使用方法：
+
+1. 在PC端的设置-数据同步开启同步功能（这时如果出现安全软件、防火墙等提示网络连接弹窗时需要点击允许）
+2. 在移动端的设置-同步-同步服务器地址输入PC端显示的同步服务器地址（如果显示可以多个，则输入与**移动端上显示的本机地址**最相似的那个），端口号与PC端的同步端口一致（**输入完毕后需要按一下键盘上的回车键使输入的内容生效**）
+3. 输入完这两项后点击“启动同步”
+4. 若连接成功，对于首次同步时，若两边的设备的列表不为空，则PC端会弹出选择列表同步方式的弹窗，同步方式的说明弹窗下面有介绍
+
+#### 关于同步弹窗的说明
+
+对于首次同步时，若两边的设备的列表不为空，则PC端会弹出选择列表同步方式的弹窗，此弹窗内的同步方式仅针对**首次同步**，<br>
+第一次同步成功后，以后再同步时将会自动根据两边设备的列表内容合并同步，不信你可以在同步完成后断开两边的连接，然后在两边增删一些歌曲或列表后再同步试试看~😉
+
+#### 连接同步服务失败的可能原因
+
+- 此功能需要PC端与移动端都连接在同一个路由器下的网络才能使用
+- 检查防火墙是否拦截了PC端的服务端口
+- 路由器若开启了AP隔离，则此功能无法使用
+
 ## 界面异常（界面显示不完整）
 
 ### Windows 7 下界面异常
@@ -55,6 +131,8 @@
 因此，当 win7 没有使用**AERO**主题时界面将会显示异常，开启AERO的方法请自行百度：`win7开启aero效果`（开启后可看到任务栏变透明）。<br>
 从`0.14.0`版本起不再强制要求开启透明效果，若你实在不想开启（若非电脑配置太低，墙裂建议开启！），可通过添加运行参数`-dt`来运行程序即可，例如：`.\lx-music-desktop.exe -dt`，添加方法可自行百度“给快捷方式加参数”，该参数的作用是用来控制程序是否使用非透明窗口运行。
 
+注：启用**AERO**主题后，若软件出现黑边框，则重启软件即可恢复正常。
+
 对于一些完全无法正常显示界面、开启了AERO后问题仍未解决的情况，请阅读下面的 **软件启动后，界面无法显示** 解决。
 
 ### Linux 下界面异常
@@ -78,6 +156,14 @@
 - 添加启动参数`-dha`运行（添加的方法请自行百度“给快捷方式加参数”）
 - 尝试将绿色版的软件放在**桌面**或**我的文档**运行
 
+## Windows 7 下桌面歌词字体列表为空
+
+Windows 7 系统系统需要安装 Powershell 5.1及以上版本才可正常获取系统字体列表。
+
+想要查看当前 Powershell 版本可以在 Powershell 窗口输入命令：`Get-Host`
+
+最新 Powershell 安装包可以去官方 [Github releases](https://github.com/PowerShell/PowerShell/releases) 页下载，安装过程中若出现错误，请自行按照提示或者百度/Google解决。
+
 ## 安装版安装失败，提示安装程序并未成功地运行完成
 
 对于部分电脑出现安装失败的问题，可以做出以下尝试：
@@ -97,7 +183,7 @@
 
 ### Windows 7 系统桌面歌词显示异常
 
-Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的 **Windows 7 下界面异常（界面显示不完整）** 方法解决。
+Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看上面的 **Windows 7 下界面异常** 方法解决。
 
 ### MAC OS 系统、桌面歌词有残留阴影
 
@@ -113,19 +199,15 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的
 
 其他 Linux 系统未测试，如有异常也是意料之中，目前不打算去处理 Linux 平台的桌面歌词问题，但你可以尝试按照`Linux 下界面异常`的解决方案去解决。
 
-## 歌曲下载失败
-
-### 提示 `ENOENT: no such file or directory, mkdir`
+## 歌曲下载失败，提示 `ENOENT: no such file or directory, mkdir`
 
 更换下载歌曲目录即可解决（一般是设置的歌曲下载目录没有读写权限导致的）。
 
-### 提示 `请求异常` 或 `Fail`
+## 使用软件时导致耳机意外关机
 
-尝试更换网络，如切换到移动网络。
-
-### 其他错误
-
-按照前面的 "歌曲无法试听与下载" 方案解决。
+据反馈，漫步者部分型号的耳机与本软件一起使用时将会导致耳机意外关机，
+详情看：<https://github.com/lyswhut/lx-music-desktop/issues/457>，
+若出现该问题可尝试添加`-dhmkh`启动参数解决，启动参数添加方法请自行百度“windows给快捷方式添加启动参数”。
 
 ## 软件安装包说明
 
@@ -137,9 +219,9 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的
 
 以 **`.dmg`** 结尾的文件为 MAC 版本；
 
-以 **`.AppImage`**、**`.deb`** 结尾的为 Linux 版本。
+以 **`.AppImage`**、**`.deb`**、**`.rpm`**、**`.pacman`** 结尾的为 Linux 版本。
 
-带有`x64`的为64位的系统版本，带`x86`的为32位的系统版本；若两个都带有的则为集合版，安装时会自动根据系统位数选择对应的版本安装。
+带有`x64`的为64位的系统版本，带`x86`的为32位的系统版本；若两个都带有的则为集合版，安装时会自动根据系统位数选择对应的版本安装；带有`arm`的为arm架构系统的版本。
 
 ## 软件更新
 
@@ -147,13 +229,13 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的
 若下载未完成时软件被关闭，下次启动软件会再次自动下载。<br>
 若还是**更新失败**，可能是无法访问GitHub导致的，这时需要手动更新，即下载最新安装包直接覆盖安装即可。<br>
 注意：**绿色版**的软件自动更新功能**不可用**，建议使用安装版！！<br>
-注意：**Mac版**、**Linux deb**版不支持自动更新！
+注意：**Mac版**、**Linux**版不支持自动更新！
 
-## 更新已收藏的在线歌单
+### Windows 安装版在升级后，卸载了旧版本，但没有安装新版本
 
-该功能仅对直接从歌单详情页点“收藏”按钮收藏的歌单有效，可右击已收藏的列表名从弹出的菜单中选择“同步”使用该功能，
+出现这个问题的原因一般是你当初在安装本软件的时候是以管理员身份安装的，运行软件的时候没有以管理员身份运行，所以卸载后无法再装上。
 
-需要注意的是：这将会覆盖本地的目标列表，歌曲将被替换成最新的在线列表。
+安装本软件时建议选择 `为当前用户安装`，并安装在当前用户目录或者安装在不需要管理员权限的目录（即其他分区下），不要选`为所有用户安装`。
 
 ## 缺少`xxx.dll`
 
@@ -164,10 +246,172 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的
 
 ## 杀毒软件提示有病毒或恶意行为
 
-本人只能保证我写的代码不包含任何**恶意代码**、**收集用户信息**的行为，并且软件代码已开源，请自行查阅，软件安装包也是由CI拉取源代码构建，构建日志：[windows包](https://ci.appveyor.com/project/lyswhut/lx-music-desktop)、[Mac/Linux包](https://travis-ci.com/github/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>
 当然，以上说明建立的前提是在你所用的安装包是从**本项目主页上写的链接**下载的，或者有相关能力者还可以下载源代码自己构建安装包。
 
 从`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
+ */
+
+
+const { EVENT_NAMES, request, on, send } = window.lx
+
+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://travis-ci.com/lyswhut/lx-music-desktop"><img src="https://travis-ci.com/lyswhut/lx-music-desktop.svg?branch=master" 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://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 9
+- Electron 13
 - 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://www.lanzoux.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
 # 开发模式
@@ -82,7 +82,15 @@ npm run pack:linux
 
 - `-search`  启动软件时自动在搜索框搜索指定的内容，例如：`-search="突然的自我 - 伍佰"`
 - `-dha`  禁用硬件加速启动（Disable Hardware Acceleration），窗口显示有问题时可以尝试添加此参数启动（v1.6.0起新增）
-- `-dt` 以非透明模式启动（Disable Transparent），对于未开启AERO效果的win7系统可加此参数启动以确保界面正常显示，原来的`-nt`参数已重命名为`-dt`（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"`
+
 
 ### 常见问题
 

build-config/css-loader.config.js

@@ -2,7 +2,8 @@ const isDev = process.env.NODE_ENV === 'development'
 
 module.exports = {
   modules: {
-    localIdentName: isDev ? '[folder]-[name]--[local]--[hash:base64:5]' : '[hash:base64:5]',
+    localIdentName: isDev ? '[path][name]__[local]--[hash:base64:5]' : '[hash:base64:5]',
     exportLocalsConvention: 'camelCase',
   },
+  sourceMap: isDev,
 }

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

@@ -29,11 +29,10 @@ module.exports = {
         exclude: /node_modules/,
         enforce: 'pre',
       },
-      // {
-      //   test: /\.js$/,
-      //   loader: 'babel-loader',
-      //   exclude: /node_modules/,
-      // },
+      {
+        test: /\.node$/,
+        use: 'node-loader',
+      },
     ],
   },
   performance: {

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

@@ -17,8 +17,8 @@ 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

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

@@ -1,6 +1,7 @@
 const path = require('path')
 const { merge } = require('webpack-merge')
 const webpack = require('webpack')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 const baseConfig = require('./webpack.config.base')
 
@@ -14,12 +15,25 @@ module.exports = merge(baseConfig, {
   },
   externals: [
     ...Object.keys(dependencies || {}),
+    // 'font-list',
   ],
   node: {
     __dirname: false,
     __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/renderer-lyric/webpack.config.base.js

@@ -2,6 +2,7 @@ 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')
@@ -17,7 +18,7 @@ module.exports = {
     filename: '[name].js',
     libraryTarget: 'commonjs2',
     path: path.join(__dirname, '../../dist/electron'),
-    publicPath: './',
+    publicPath: 'auto',
   },
   resolve: {
     alias: {
@@ -37,11 +38,16 @@ module.exports = {
           loader: 'eslint-loader',
           options: {
             formatter: require('eslint-formatter-friendly'),
+            emitWarning: isDev,
           },
         },
         exclude: /node_modules/,
         enforce: 'pre',
       },
+      {
+        test: /\.node$/,
+        use: 'node-loader',
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
@@ -62,15 +68,11 @@ module.exports = {
           loader: 'less-loader',
           options: {
             sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoader({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
+            lessOptions: {
+              plugins: [
+                new CleanCSSPlugin({ advanced: true }),
+              ],
+            },
           },
         }),
       },
@@ -90,26 +92,38 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'imgs/[name]--[folder].[ext]',
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
+        },
+        generator: {
+          filename: 'imgs/[name]-[contenthash:8][ext]',
         },
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'media/[name]--[folder].[ext]',
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
+        },
+        generator: {
+          filename: 'media/[name]-[contenthash:8][ext]',
         },
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'fonts/[name]--[folder].[ext]',
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
+        },
+        generator: {
+          filename: 'fonts/[name]-[contenthash:8][ext]',
         },
       },
     ],
@@ -123,6 +137,7 @@ 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(),

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

@@ -11,7 +11,6 @@ module.exports = merge(baseConfig, {
   devtool: 'eval-source-map',
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
     new FriendlyErrorsPlugin(),
     new webpack.DefinePlugin({
       'process.env': {

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

@@ -1,6 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const { merge } = require('webpack-merge')
@@ -34,10 +34,9 @@ module.exports = merge(baseConfig, {
     }),
   ],
   optimization: {
-    chunkIds: 'named',
     minimizer: [
       new TerserPlugin(),
-      new OptimizeCSSAssetsPlugin({}),
+      new CssMinimizerPlugin(),
     ],
   },
   performance: {

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

@@ -2,6 +2,7 @@ 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')
@@ -17,7 +18,7 @@ module.exports = {
     filename: '[name].js',
     libraryTarget: 'commonjs2',
     path: path.join(__dirname, '../../dist/electron'),
-    publicPath: './',
+    publicPath: 'auto',
   },
   resolve: {
     alias: {
@@ -37,11 +38,16 @@ module.exports = {
           loader: 'eslint-loader',
           options: {
             formatter: require('eslint-formatter-friendly'),
+            emitWarning: isDev,
           },
         },
         exclude: /node_modules/,
         enforce: 'pre',
       },
+      {
+        test: /\.node$/,
+        use: 'node-loader',
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
@@ -62,15 +68,11 @@ module.exports = {
           loader: 'less-loader',
           options: {
             sourceMap: true,
-          },
-        }),
-      },
-      {
-        test: /\.styl(:?us)?$/,
-        oneOf: mergeCSSLoader({
-          loader: 'stylus-loader',
-          options: {
-            sourceMap: true,
+            lessOptions: {
+              plugins: [
+                new CleanCSSPlugin({ advanced: true }),
+              ],
+            },
           },
         }),
       },
@@ -90,26 +92,38 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'imgs/[name]--[folder].[ext]',
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
+        },
+        generator: {
+          filename: 'imgs/[name]-[contenthash:8][ext]',
         },
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'media/[name]--[folder].[ext]',
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
+        },
+        generator: {
+          filename: 'media/[name]-[contenthash:8][ext]',
         },
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'fonts/[name]--[folder].[ext]',
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
+        },
+        generator: {
+          filename: 'fonts/[name]-[contenthash:8][ext]',
         },
       },
     ],
@@ -123,6 +137,7 @@ module.exports = {
       template: path.join(__dirname, '../../src/renderer/index.pug'),
       isProd: process.env.NODE_ENV == 'production',
       browser: process.browser,
+      scriptLoading: 'blocking',
       __dirname,
     }),
     new VueLoaderPlugin(),

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

@@ -11,7 +11,6 @@ module.exports = merge(baseConfig, {
   devtool: 'eval-source-map',
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
     new FriendlyErrorsPlugin(),
     new webpack.DefinePlugin({
       'process.env': {

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

@@ -1,6 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const { merge } = require('webpack-merge')
@@ -34,10 +34,9 @@ module.exports = merge(baseConfig, {
     }),
   ],
   optimization: {
-    chunkIds: 'named',
     minimizer: [
       new TerserPlugin(),
-      new OptimizeCSSAssetsPlugin({}),
+      new CssMinimizerPlugin(),
     ],
   },
   performance: {

build-config/runner-dev.js

@@ -16,7 +16,8 @@ const rendererLyricConfig = require('./renderer-lyric/webpack.config.dev')
 
 let electronProcess = null
 let manualRestart = false
-let hotMiddleware
+let hotMiddlewareRenderer
+let hotMiddlewareRendererLyric
 
 
 function startRenderer() {
@@ -24,7 +25,7 @@ function startRenderer() {
     // rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
     // rendererConfig.mode = 'development'
     const compiler = webpack(rendererConfig)
-    hotMiddleware = webpackHotMiddleware(compiler, {
+    hotMiddlewareRenderer = webpackHotMiddleware(compiler, {
       log: false,
       heartbeat: 2500,
     })
@@ -32,15 +33,15 @@ function startRenderer() {
     compiler.hooks.compilation.tap('compilation', compilation => {
       // console.log(Object.keys(compilation.hooks))
       HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
-        hotMiddleware.publish({ action: 'reload' })
+        hotMiddlewareRenderer.publish({ action: 'reload' })
         cb()
       })
     })
 
-    compiler.hooks.done.tap('done', stats => {
-      // logStats('Renderer', 'Compile done')
-      // logStats('Renderer', stats)
-    })
+    // compiler.hooks.done.tap('done', stats => {
+    //   // logStats('Renderer', 'Compile done')
+    //   // logStats('Renderer', stats)
+    // })
 
     const server = new WebpackDevServer(
       compiler,
@@ -54,7 +55,7 @@ function startRenderer() {
           errors: true,
         },
         before(app, ctx) {
-          app.use(hotMiddleware)
+          app.use(hotMiddlewareRenderer)
           ctx.middleware.waitUntilValid(() => {
             resolve()
           })
@@ -71,7 +72,7 @@ function startRendererLyric() {
     // rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
     // rendererConfig.mode = 'development'
     const compiler = webpack(rendererLyricConfig)
-    hotMiddleware = webpackHotMiddleware(compiler, {
+    hotMiddlewareRendererLyric = webpackHotMiddleware(compiler, {
       log: false,
       heartbeat: 2500,
     })
@@ -79,15 +80,15 @@ function startRendererLyric() {
     compiler.hooks.compilation.tap('compilation', compilation => {
       // console.log(Object.keys(compilation.hooks))
       HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
-        hotMiddleware.publish({ action: 'reload' })
+        hotMiddlewareRendererLyric.publish({ action: 'reload' })
         cb()
       })
     })
 
-    compiler.hooks.done.tap('done', stats => {
-      // logStats('Renderer', 'Compile done')
-      // logStats('Renderer', stats)
-    })
+    // compiler.hooks.done.tap('done', stats => {
+    //   // logStats('Renderer', 'Compile done')
+    //   // logStats('Renderer', stats)
+    // })
 
     const server = new WebpackDevServer(
       compiler,
@@ -101,7 +102,7 @@ function startRendererLyric() {
           errors: true,
         },
         before(app, ctx) {
-          app.use(hotMiddleware)
+          app.use(hotMiddlewareRendererLyric)
           ctx.middleware.waitUntilValid(() => {
             resolve()
           })
@@ -120,7 +121,8 @@ function startMain() {
     const compiler = webpack(mainConfig)
 
     compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
-      hotMiddleware.publish({ action: 'compiling' })
+      hotMiddlewareRenderer.publish({ action: 'compiling' })
+      hotMiddlewareRendererLyric.publish({ action: 'compiling' })
       done()
     })
 
@@ -179,6 +181,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,8 +2,6 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const cssLoaderConfig = require('./css-loader.config')
 const chalk = require('chalk')
 
-const isDev = process.env.NODE_ENV === 'development'
-
 // merge css-loader
 exports.mergeCSSLoader = beforeLoader => {
   const loader = [
@@ -14,7 +12,7 @@ exports.mergeCSSLoader = beforeLoader => {
         {
           loader: MiniCssExtractPlugin.loader,
           options: {
-            hmr: isDev,
+            esModule: false,
           },
         },
         {
@@ -30,7 +28,7 @@ exports.mergeCSSLoader = beforeLoader => {
         {
           loader: MiniCssExtractPlugin.loader,
           options: {
-            hmr: isDev,
+            esModule: false,
           },
         },
         'css-loader',

jsconfig.json

@@ -1,19 +1,13 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
-    "target": "es6",
-    // This is the line you want to add
-    "allowSyntheticDefaultImports": true,
-
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
-      "@main": ["src/main"],
-      "@renderer": ["src/renderer"],
-      "@lyric": ["src/renderer-lyric"],
-      "@static": ["src/static"],
-      "@common": ["src/common"],
+      "@main/*": ["src/main/*"],
+      "@renderer/*": ["src/renderer/*"],
+      "@lyric/*": ["src/renderer-lyric/*"],
+      "@static/*": ["src/static/*"],
+      "@common/*": ["src/common/*"],
     }
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/**/*"]
+  "exclude": ["node_modules", "build", "dist"]
 }

package.json

@@ -1,70 +1,79 @@
 {
   "name": "lx-music-desktop",
-  "version": "1.7.0",
+  "version": "1.13.0",
   "description": "一个免费的音乐查找助手",
   "main": "./dist/electron/main.js",
   "productName": "lx-music-desktop",
   "scripts": {
     "pack": "node build-config/pack.js && npm run pack:win:setup:x64",
-    "pack:win": "node build-config/pack.js && npm run pack:win:setup:x86_64 && npm run pack:win:7z",
-    "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=win_安装版 ARCH=x64 electron-builder -w=nsis --x64",
-    "pack:win:setup:x86": "cross-env TARGET=win_安装版 ARCH=x86 electron-builder -w=nsis --ia32",
+    "pack:win": "node build-config/pack.js && npm run pack:win:setup:x64 && npm run pack:win:setup:x86 && npm run pack:win:setup:arm64 && 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:x64": "cross-env TARGET=Setup ARCH=x64 electron-builder -w=nsis --x64 -p never",
+    "pack:win:setup:x86": "cross-env TARGET=Setup ARCH=x86 electron-builder -w=nsis --ia32 -p never",
+    "pack:win:setup:arm64": "cross-env TARGET=Setup ARCH=arm64 electron-builder -w=nsis --arm64 -p never",
     "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:x64": "cross-env TARGET=便携版 ARCH=x64 electron-builder -w=portable --x64",
-    "pack:win:portable:x86": "cross-env TARGET=便携版 ARCH=x86 electron-builder -w=portable --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=portable ARCH=x64 electron-builder -w=portable --x64 -p never",
+    "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:x86": "cross-env TARGET=win_绿色版 ARCH=x86 electron-builder -w=7z --ia32",
+    "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=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": "npm run publish:win:7z && npm run publish:win:setup",
-    "publish:win:setup": "cross-env TARGET=Setup ARCH=x86_64 electron-builder -w=nsis --x64 --ia32 -p onTagOrDraft",
+    "publish:win:setup:x64:always": "cross-env TARGET=Setup ARCH=x64 electron-builder -w=nsis --x64 -p always",
+    "publish:win:setup:x64": "cross-env TARGET=Setup ARCH=x64 electron-builder -w=nsis --x64 -p always",
+    "publish:win:setup:x86": "cross-env TARGET=Setup ARCH=x86 electron-builder -w=nsis --ia32 -p onTagOrDraft",
+    "publish:win:setup:arm64": "cross-env TARGET=Setup ARCH=arm64 electron-builder -w=nsis --arm64 -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 always",
+    "publish:win:7z:x64": "cross-env TARGET=green ARCH=win_x64 electron-builder -w=7z --x64 -p onTagOrDraft",
     "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:mac": "npm run publish:mac:dmg",
+    "publish:win:7z:arm64": "cross-env TARGET=green ARCH=win_arm64 electron-builder -w=7z --arm64 -p onTagOrDraft",
+    "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:linux": "npm run publish:linux:deb && npm run publish:linux:appImage && npm run publish:linux:rpm && npm run publish:linux:pacman",
-    "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 && npm run publish:linux:deb:arm64",
+    "publish:mac:dmg:arm64": "electron-builder -m=dmg --arm64 -p onTagOrDraft",
+    "publish:linux:deb:x64:always": "cross-env ARCH=x64 electron-builder -l=deb --x64 -p always",
     "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 && npm run pack:linux:deb:arm64",
-    "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:deb:arm64": "cross-env ARCH=arm64 electron-builder -l=deb --arm64",
-    "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": "rimraf dist && rimraf build",
-    "build:main": "cross-env NODE_ENV=production webpack --config build-config/main/webpack.config.prod.js --progress --hide-modules",
-    "build:renderer": "cross-env NODE_ENV=production webpack --config build-config/renderer/webpack.config.prod.js --progress --hide-modules",
-    "build:renderer-lyric": "cross-env NODE_ENV=production webpack --config build-config/renderer-lyric/webpack.config.prod.js --progress --hide-modules",
+    "build:src": "node build-config/pack.js",
+    "build:main": "cross-env NODE_ENV=production webpack --config build-config/main/webpack.config.prod.js --progress",
+    "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 i"
   },
   "browserslist": [
-    "Electron 9.3.4"
+    "Electron 13.3.0"
   ],
   "engines": {
-    "node": ">= 12"
+    "node": ">= 14"
   },
   "build": {
     "appId": "cn.toside.music.desktop",
@@ -74,6 +83,9 @@
     "files": [
       "dist/electron/**/*"
     ],
+    "asar": {
+      "smartUnpack": false
+    },
     "extraResources": [
       "./licenses"
     ],
@@ -132,12 +144,6 @@
         "provider": "github",
         "owner": "lyswhut",
         "repo": "lx-music-desktop"
-      },
-      {
-        "package": "lx-music-desktop",
-        "repo": "lx-music-desktop",
-        "user": "lyswhut",
-        "provider": "bintray"
       }
     ]
   },
@@ -160,81 +166,89 @@
   },
   "homepage": "https://github.com/lyswhut/lx-music-desktop#readme",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.15.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-umd": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/plugin-transform-modules-umd": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-env": "^7.15.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
-    "babel-minify-webpack-plugin": "^0.3.1",
     "babel-preset-minify": "^0.5.1",
-    "cfonts": "^2.9.1",
-    "chalk": "^4.1.0",
+    "browserslist": "^4.16.8",
+    "cfonts": "^2.9.3",
+    "chalk": "^4.1.2",
     "changelog-parser": "^2.8.0",
-    "copy-webpack-plugin": "^6.4.1",
-    "core-js": "^3.8.3",
+    "copy-webpack-plugin": "^9.0.1",
+    "core-js": "^3.17.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^4.3.0",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "del": "^6.0.0",
-    "electron": "^9.4.2",
-    "electron-builder": "^22.9.1",
+    "electron": "^13.3.0",
+    "electron-builder": "^22.11.7",
     "electron-debug": "^3.2.0",
-    "electron-devtools-installer": "^3.1.1",
-    "eslint": "^7.18.0",
-    "eslint-config-standard": "^14.1.1",
+    "electron-devtools-installer": "^3.2.0",
+    "electron-to-chromium": "^1.3.830",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
     "eslint-formatter-friendly": "^7.0.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-html": "^6.1.1",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-html": "^6.1.2",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-standard": "^4.1.0",
     "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "html-webpack-plugin": "^4.5.1",
-    "less": "^3.13.1",
-    "less-loader": "^7.3.0",
-    "markdown-it": "^12.0.4",
-    "mini-css-extract-plugin": "^0.12.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss-loader": "^4.2.0",
-    "postcss-pxtorem": "^5.1.1",
-    "pug": "^3.0.0",
+    "html-webpack-plugin": "^5.3.2",
+    "less": "^4.1.1",
+    "less-loader": "^10.0.1",
+    "less-plugin-clean-css": "^1.5.1",
+    "markdown-it": "^12.2.0",
+    "mini-css-extract-plugin": "^2.2.2",
+    "node-loader": "^2.0.0",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "postcss-pxtorem": "^6.0.0",
+    "pug": "^3.0.2",
     "pug-loader": "^2.4.0",
     "pug-plain-loader": "^1.1.0",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "spinnies": "^0.5.1",
-    "stylus": "^0.54.8",
-    "stylus-loader": "^4.3.3",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.2.3",
     "url-loader": "^4.1.1",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
+    "vue-loader": "^15.9.8",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.52.0",
+    "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.7.3"
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "crypto-js": "^4.0.0",
-    "dnscache": "^1.0.2",
-    "electron-log": "^4.3.1",
-    "electron-store": "^6.0.1",
-    "electron-updater": "^4.3.5",
-    "iconv-lite": "^0.6.2",
-    "image-size": "^0.9.3",
-    "js-htmlencode": "^0.3.0",
-    "lrc-file-parser": "^1.0.5",
-    "needle": "^2.6.0",
-    "node-id3": "^0.2.2",
+    "bufferutil": "^4.0.3",
+    "crypto-js": "^4.1.1",
+    "electron-log": "^4.4.1",
+    "electron-store": "^8.0.0",
+    "electron-updater": "^4.3.9",
+    "font-list": "git+https://github.com/lyswhut/node-font-list.git#c6caf4060e471afe143a4aca30d554644522966d",
+    "http-terminator": "^3.0.0",
+    "iconv-lite": "^0.6.3",
+    "image-size": "^1.0.0",
+    "koa": "^2.13.1",
+    "long": "^4.0.0",
+    "lrc-file-parser": "^1.1.2",
+    "needle": "^3.0.0",
+    "node-id3": "^0.2.3",
     "request": "^2.88.2",
-    "vue": "^2.6.12",
-    "vue-i18n": "^8.22.4",
-    "vue-router": "^3.5.1",
+    "socket.io": "^4.2.0",
+    "utf-8-validate": "^5.0.5",
+    "vue": "^2.6.14",
+    "vue-i18n": "^8.25.0",
+    "vue-router": "^3.5.2",
     "vuex": "^3.6.2",
     "vuex-router-sync": "^5.0.0"
   }

publish/changeLog.md

@@ -1,20 +1,18 @@
+如果你喜欢并经常使用洛雪音乐，并想要第一时间尝鲜洛雪的新功能，可以加入测试企鹅群768786588，
+注意：测试版的功可能会不稳定，打算潜水的勿加。
+
 ### 新增
 
-- 搜索界面新增搜索状态的提示
-- 新增“稍后播放”功能，可在歌曲列表右键菜单使用
-- 新增“记住播放进度”功能的控制，该功能默认不再开启，可到播放设置-记住播放进度开启
+- 歌曲搜索框新增清理按钮，点击此按钮可以清理搜索框并返回初始搜索界面
+- 新增“下载的歌词文件编码格式”设置，默认下载的歌词编码仍是`UTF-8`，对于某些在设备(如车机)上出现歌词中文乱码的用户可以尝试选择以`GBK`编码格式保存歌词文件
+- 新增设置-桌面歌词-歌词字体设置，此设置可用于设置桌面歌词的字体（已知的问题：Windows 7 下可能会出现字体列表为空的情况，这是当前系统的 Powershell 版本小于5.1导致的，请自行**尝试**看常见解决）
 
 ### 优化
 
-- 优化播放歌曲换源匹配
-- 优化设置界面设置项的展示
+- 支持网易源“我喜欢”歌单以注入token的方式打开。由于网易源的“我喜欢”歌单需要登录才能打开（若你看不懂后半句就去阅读 常见问题-无法打开外部歌单），现若想要打开此类歌单，需要在歌单链接后面拼上 `###` 再加上有效的token，拼接格式：`[id|url]###token`，例子（最后面的xxxxxx替换成你的token）：`https://music.163.com/#/playlist?id=123456&userid=123456###xxxxxx`
+- 软件内快捷键的最小化触发时，如果已启用托盘，则隐藏程序，否则最小化程序
 
 ### 修复
 
-- 修复快速切换歌曲时, 会出现播放的歌曲和界面展示的歌曲不一致的问题
-- 修复了一个由版本更新日志显示导致的潜在远程代码执行攻击漏洞，该漏洞影响v1.6.1及之前的所有版本，请务必更新到最新版本
-- 修复xm搜索源验证问题
-
-### 其他
-
-- 更新electron到9.4.2
+- 修复某些情况下同步功能会导致切歌混乱的问题
+- 修复从电脑浏览器复制的企鹅歌单链接无法打开的问题

publish/utils/updateChangeLog.js

@@ -44,8 +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()
+  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/defaultSetting.js

@@ -2,7 +2,7 @@ const path = require('path')
 const os = require('os')
 
 const defaultSetting = {
-  version: '1.0.39',
+  version: '1.0.45',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -11,7 +11,8 @@ const defaultSetting = {
     isMute: false,
     mediaDeviceId: 'default',
     isMediaDeviceRemovedStopPlay: false,
-    isShowLyricTransition: true,
+    isShowLyricTranslation: false,
+    isPlayLxlrc: true,
     isSavePlayTime: false,
   },
   desktopLyric: {
@@ -25,6 +26,7 @@ const defaultSetting = {
     theme: 0,
     isLockScreen: true,
     style: {
+      font: '',
       fontSize: 120,
       opacity: 95,
       isZoomActiveLrc: true,
@@ -35,6 +37,7 @@ const defaultSetting = {
     isShowSource: true,
     prevSelectListId: 'default',
     isSaveScrollLocation: true,
+    addMusicLocationType: 'top',
   },
   download: {
     enable: false,
@@ -42,8 +45,10 @@ const defaultSetting = {
     fileName: '歌名 - 歌手',
     maxDownloadNum: 3,
     isDownloadLrc: false,
+    lrcFormat: 'utf8',
     isEmbedPic: true,
     isEmbedLyric: false,
+    isUseOtherSource: false,
   },
   leaderboard: {
     source: 'kw',
@@ -82,6 +87,10 @@ const defaultSetting = {
     isToTray: false,
     themeId: 0,
   },
+  sync: {
+    enable: false,
+    port: '23332',
+  },
   windowSizeId: 2,
   themeId: 0,
   langId: null,

src/common/ipc.js

@@ -2,11 +2,17 @@ const { ipcMain, ipcRenderer } = require('electron')
 const names = require('./ipcNames')
 
 
-exports.mainOn = (event, callback) => {
-  ipcMain.on(event, callback)
+exports.mainOn = (name, callback) => {
+  ipcMain.on(name, callback)
 }
-exports.mainOnce = (event, callback) => {
-  ipcMain.once(event, callback)
+exports.mainOnce = (name, 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

@@ -22,6 +22,7 @@ const names = {
     set_app_setting: 'set_app_setting',
     set_window_size: 'set_window_size',
     show_save_dialog: 'show_save_dialog',
+    get_system_fonts: 'get_system_fonts',
 
     handle_request: 'handle_request',
     cancel_request: 'cancel_request',
@@ -50,6 +51,29 @@ const names = {
     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',
+
+    sync_enable: 'sync_enable',
+    sync_status: 'sync_status',
+    sync_get_status: 'sync_get_status',
+    sync_generate_code: 'sync_generate_code',
+    sync_action_list: 'sync_action_list',
+    sync_list: 'sync_list',
   },
   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,11 +1,8 @@
 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')
-const { dialog, app } = require('electron')
-const path = require('path')
-const fs = require('fs')
 
 exports.isLinux = process.platform == 'linux'
 exports.isWin = process.platform == 'win32'
@@ -115,10 +112,10 @@ exports.mergeSetting = (setting, version) => {
     setting = defaultSettingCopy
   }
 
-  if (!apiSource.some(api => api.id === setting.apiSource && !api.disabled)) {
-    let api = apiSource.find(api => !api.disabled)
-    if (api) setting.apiSource = api.id
-  }
+  // if (!apiSource.some(api => api.id === setting.apiSource && !api.disabled)) {
+  //   let api = apiSource.find(api => !api.disabled)
+  //   if (api) setting.apiSource = api.id
+  // }
 
   return { setting, version: defaultVersion }
 }
@@ -126,30 +123,13 @@ exports.mergeSetting = (setting, version) => {
 /**
  * 初始化设置
  * @param {*} setting
+ * @param {*} isShowErrorAlert
  */
-exports.initSetting = () => {
-  let electronStore_list
-  try {
-    electronStore_list = new Store({
-      name: 'playList',
-      clearInvalidConfig: false,
-    })
-  } catch (error) {
-    log.error(error)
-    const backPath = path.join(app.getPath('userData'), 'playList.json.bak')
-    fs.copyFileSync(path.join(app.getPath('userData'), 'playList.json'), backPath)
-    dialog.showMessageBoxSync({
-      type: 'error',
-      message: 'Playlist data loading error',
-      detail: `We have helped you back up the old list file to ${backPath}\nYou can try to repair and restore it manually\n\nError detail: ${error.message}`,
-    })
-    electronStore_list = new Store({
-      name: 'playList',
-    })
-  }
-  const electronStore_config = new Store({
-    name: 'config',
-  })
+exports.initSetting = isShowErrorAlert => {
+  const electronStore_list = getStore('playList', true, isShowErrorAlert)
+  const electronStore_config = getStore('config')
+  const electronStore_downloadList = getStore('downloadList')
+
   let setting = electronStore_config.get('setting')
   if (setting) {
     let version = electronStore_config.get('version')
@@ -165,7 +145,7 @@ 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')
       }
     }
@@ -179,6 +159,18 @@ exports.initSetting = () => {
       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'))
@@ -187,8 +179,7 @@ exports.initSetting = () => {
   if (!newSetting.leaderboard.tabId.includes('__')) newSetting.leaderboard.tabId = 'kw__16'
 
   // newSetting.controlBtnPosition = 'right'
-  electronStore_config.set('version', settingVersion)
-  electronStore_config.set('setting', newSetting)
+  electronStore_config.set({ version: settingVersion, setting: newSetting })
   return { version: settingVersion, setting: newSetting }
 }
 
@@ -196,9 +187,7 @@ exports.initSetting = () => {
  * 初始化快捷键设置
  */
 exports.initHotKey = () => {
-  const electronStore_hotKey = new Store({
-    name: 'hotKey',
-  })
+  const electronStore_hotKey = getStore('hotKey')
 
   let localConfig = electronStore_hotKey.get('local')
   if (!localConfig) {

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

src/main/events/Common.js

@@ -1,16 +1,18 @@
 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) {
-    if (config) updateSetting(config)
-    this.emit(COMMON_EVENT_NAME.config, name)
+  configStatus(name) {
+    this.emit(COMMON_EVENT_NAME.configStatus, name)
+  }
+
+  saveMyList(data) {
+    this.emit(COMMON_EVENT_NAME.saveMyList, data)
   }
 }
 

src/main/events/_name.js

@@ -1,6 +1,7 @@
 exports.common = {
   initConfig: 'initConfig',
-  config: 'config',
+  configStatus: 'config',
+  saveMyList: 'saveMyList',
 }
 
 exports.mainWindow = {

src/main/events/index.js

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

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) => {
@@ -28,14 +28,19 @@ require('./env')
 
 // 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 } = require('./utils')
-const { isMac, isLinux, initSetting, initHotKey } = require('../common/utils')
+const { getWindowSizeInfo, initSetting, updateSetting } = require('./utils')
+const { isMac, isLinux, initHotKey } = require('../common/utils')
 
 
 // https://github.com/electron/electron/issues/18397
@@ -50,12 +55,12 @@ app.on('web-contents-created', (event, contents) => {
     if (!navigationUrlWhiteList.some(url => url.test(navigationUrl))) return event.preventDefault()
     console.log('navigation to url:', navigationUrl)
   })
-  contents.on('new-window', async(event, navigationUrl) => {
-    event.preventDefault()
-    if (/^devtools/.test(navigationUrl)) return
-    console.log(navigationUrl)
-    if (!/^https?:\/\//.test(navigationUrl)) return
-    await shell.openExternal(navigationUrl)
+  contents.setWindowOpenHandler(({ url }) => {
+    if (!/^devtools/.test(url) && /^https?:\/\//.test(url)) {
+      shell.openExternal(url)
+    }
+    console.log(url)
+    return { action: 'deny' }
   })
   contents.on('will-attach-webview', (event, webPreferences, params) => {
     // Strip away preload scripts if unused or verify their location is legitimate
@@ -110,7 +115,7 @@ function createWindow() {
     fullscreenable: false,
     show: false,
     webPreferences: {
-      // contextIsolation: true,
+      contextIsolation: false,
       webSecurity: !isDev,
       nodeIntegration: true,
     },
@@ -130,11 +135,16 @@ global.appHotKey = {
   state: null,
 }
 
+global.lx_core = {
+  setAppConfig(setting, name) {
+    updateSetting(setting)
+    global.lx_event.common.configStatus(name)
+  },
+}
+
 function init() {
   console.log('init')
-  const info = initSetting()
-  global.appSetting = info.setting
-  global.appSettingVersion = info.version
+  initSetting()
   global.appHotKey.config = initHotKey()
   global.lx_event.common.initSetting()
   global.lx_event.hotKey.init()

src/main/modules/index.js

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

src/main/modules/sync/event/event.js

@@ -0,0 +1,23 @@
+const { EventEmitter } = require('events')
+const SYNC_EVENT_NAME = require('./name')
+
+class Sync extends EventEmitter {
+  status(status) {
+    this.emit(SYNC_EVENT_NAME.status, status)
+  }
+
+  sync_list(data) {
+    this.emit(SYNC_EVENT_NAME.sync_list, data)
+  }
+
+  sync_handle_list(data) {
+    this.emit(SYNC_EVENT_NAME.sync_handle_list, data)
+  }
+
+  action_list(data) {
+    this.emit(SYNC_EVENT_NAME.sync_action_list, data)
+  }
+}
+
+module.exports = Sync
+

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

@@ -0,0 +1,6 @@
+module.exports = {
+  sync_action_list: 'sync_action_list',
+  sync_list: 'sync_list',
+  sync_handle_list: 'sync_handle_list',
+  status: 'status',
+}

src/main/modules/sync/index.js

@@ -0,0 +1,15 @@
+const Event = require('./event/event')
+const eventNames = require('./event/name')
+const modules = require('./modules')
+const { startServer, stopServer, getStatus, generateCode } = require('./server/server')
+
+
+module.exports = {
+  startServer,
+  stopServer,
+  getStatus,
+  generateCode,
+  Event,
+  eventNames,
+  modules,
+}

src/main/modules/sync/modules/index.js

@@ -0,0 +1 @@
+exports.list = require('./list')

src/main/modules/sync/modules/list.js

@@ -0,0 +1,41 @@
+const { encryptMsg, decryptMsg } = require('../server/utils')
+let io
+
+const handleListAction = ({ action, data }) => {
+  // console.log(action, data)
+  global.lx_event.sync.action_list({ action, data })
+}
+
+// const addMusic = (orderId, callback) => {
+//   // ...
+// }
+
+const broadcast = async(action, data, excludeIds = []) => {
+  if (!io) return
+  const sockets = await io.fetchSockets()
+  for (const socket of sockets) {
+    if (excludeIds.includes(socket.data.keyInfo.clientId)) continue
+    socket.emit(action, encryptMsg(socket.data.keyInfo, data))
+  }
+}
+
+exports.sendListAction = (action, data) => {
+  // io.sockets
+  return broadcast('list:action', JSON.stringify({ action, data }))
+}
+
+exports.registerListHandler = (_io, socket) => {
+  io = _io
+  socket.on('list:action', msg => {
+    // console.log(msg)
+    msg = decryptMsg(socket.data.keyInfo, msg)
+    if (!msg) return
+    handleListAction(JSON.parse(msg))
+    broadcast('list:action', msg, [socket.data.keyInfo.clientId])
+    // socket.broadcast.emit('list:action', { action: 'list_remove', data: { id: 'default', index: 0 } })
+  })
+  // socket.on('list:add', addMusic)
+}
+exports.unregisterListHandler = () => {
+  io = null
+}

src/main/modules/sync/server/auth.js

@@ -0,0 +1,69 @@
+const { aesEncrypt, aesDecrypt, createClientKeyInfo, getClientKeyInfo, setClientKeyInfo } = require('./utils')
+
+const authMsg = 'lx-music auth::'
+const helloMsg = 'Hello~::^-^::'
+
+exports.authCode = async(req, res, authCode) => {
+  let code = 401
+  let msg = 'Forbidden'
+  // console.log(req.headers)
+  if (req.headers.m) {
+    label:
+    if (req.headers.i) {
+      const keyInfo = getClientKeyInfo(req.headers.i)
+      if (!keyInfo) break label
+      let text
+      try {
+        text = aesDecrypt(req.headers.m, keyInfo.key, keyInfo.iv)
+      } catch (err) {
+        break label
+      }
+      console.log(text)
+      if (text.startsWith(authMsg)) {
+        code = 200
+        const deviceName = text.replace(authMsg, '') || 'Unknown'
+        if (deviceName != keyInfo.deviceName) {
+          keyInfo.deviceName = deviceName
+          setClientKeyInfo(keyInfo)
+        }
+        msg = aesEncrypt(helloMsg, keyInfo.key, keyInfo.iv)
+      }
+    } else {
+      let key = ''.padStart(16, Buffer.from(authCode).toString('hex'))
+      const iv = Buffer.from(key.split('').reverse().join('')).toString('base64')
+      key = Buffer.from(key).toString('base64')
+      // console.log(authCode, key, iv)
+      let text
+      try {
+        text = aesDecrypt(req.headers.m, key, iv)
+      } catch (err) {
+        break label
+      }
+      console.log(text)
+      if (text.startsWith(authMsg)) {
+        code = 200
+        const deviceName = text.replace(authMsg, '') || 'Unknown'
+        msg = aesEncrypt(JSON.stringify(createClientKeyInfo(deviceName)), key, iv)
+      }
+    }
+  }
+  res.writeHead(code)
+  res.end(msg)
+}
+
+exports.authConnect = async req => {
+  const { i, t } = req._query
+  label:
+  if (i && t) {
+    const keyInfo = getClientKeyInfo(i)
+    if (!keyInfo) break label
+    let text
+    try {
+      text = aesDecrypt(t, keyInfo.key, keyInfo.iv)
+    } catch (err) {
+      break label
+    }
+    if (text == 'lx-music connect') return
+  }
+  throw new Error('failed')
+}

src/main/modules/sync/server/index.js

@@ -0,0 +1,7 @@
+const { startServer, stopServer, getStatus } = require('./server')
+
+module.exports = {
+  startServer,
+  stopServer,
+  getStatus,
+}

src/main/modules/sync/server/server.js

@@ -0,0 +1,172 @@
+const http = require('http')
+const sio = require('socket.io')
+const { createHttpTerminator } = require('http-terminator')
+const modules = require('../modules')
+const { authCode, authConnect } = require('./auth')
+const { getAddress, getServerId, generateCode, getClientKeyInfo } = require('./utils')
+const syncList = require('./syncList')
+
+
+let status = {
+  status: false,
+  message: '',
+  address: [],
+  code: '',
+  devices: [],
+}
+
+const handleConnection = (io, socket) => {
+  console.log('connection')
+  // console.log(socket.handshake.query)
+  for (const module of Object.values(modules)) {
+    module.registerListHandler(io, socket)
+  }
+}
+
+const authConnection = (req, callback) => {
+  // console.log(req.headers)
+  // // console.log(req.auth)
+  // console.log(req._query.authCode)
+  authConnect(req).then(() => {
+    callback(null, true)
+  }).catch(err => {
+    callback(err, false)
+  })
+}
+
+let httpTerminator = null
+let io = null
+
+const handleStartServer = (port = 9527) => new Promise((resolve, reject) => {
+  const httpServer = http.createServer((req, res) => {
+    // console.log(req.url)
+    let code
+    let msg
+    switch (req.url) {
+      case '/hello':
+        code = 200
+        msg = 'Hello~::^-^::'
+        break
+      case '/id':
+        code = 200
+        msg = 'OjppZDo6' + getServerId()
+        break
+      case '/ah':
+        authCode(req, res, status.code)
+        break
+      default:
+        code = 401
+        msg = 'Forbidden'
+        break
+    }
+    if (!code) return
+    res.writeHead(code)
+    res.end(msg)
+  })
+  httpTerminator = createHttpTerminator({
+    server: httpServer,
+  })
+  io = sio(httpServer, {
+    path: '/sync',
+    serveClient: false,
+    connectTimeout: 10000,
+    pingTimeout: 30000,
+    maxHttpBufferSize: 3e6,
+    allowRequest: authConnection,
+    transports: ['websocket'],
+  })
+
+  io.on('connection', async socket => {
+    socket.on('disconnect', reason => {
+      console.log('disconnect', reason)
+      status.devices.splice(status.devices.findIndex(k => k.clientId == keyInfo.clientId), 1)
+      global.lx_event.sync.status(status)
+    })
+    const keyInfo = getClientKeyInfo(socket.handshake.query.i)
+    // socket.lx_keyInfo = keyInfo
+    socket.data.keyInfo = keyInfo
+    try {
+      await syncList(io, socket)
+    } catch (err) {
+      console.log(err)
+      return
+    }
+    status.devices.push(keyInfo)
+    handleConnection(io, socket, keyInfo)
+    global.lx_event.sync.status(status)
+  })
+
+  httpServer.on('error', error => {
+    console.log(error)
+    reject(error)
+  })
+
+  httpServer.on('listening', () => {
+    const addr = httpServer.address()
+    const bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port
+    console.info(`Listening on ${bind}`)
+    resolve()
+  })
+
+  httpServer.listen(port)
+})
+
+const handleStopServer = async() => {
+  if (!httpTerminator) return
+  await io.close()
+  await httpTerminator.terminate().catch(() => {})
+  io = null
+  httpTerminator = null
+}
+
+exports.stopServer = async() => {
+  if (!status.status) {
+    status.status = false
+    status.message = ''
+    status.address = []
+    status.code = ''
+    global.lx_event.sync.status(status)
+    return
+  }
+  console.log('stoping sync server...')
+  return handleStopServer().then(() => {
+    console.log('sync server stoped')
+    status.status = false
+    status.message = ''
+    status.address = []
+    status.code = ''
+  }).catch(err => {
+    console.log(err)
+    status.message = err.message
+  }).finally(() => {
+    global.lx_event.sync.status(status)
+  })
+}
+exports.startServer = async port => {
+  if (status.status) await handleStopServer()
+
+  console.log('starting sync server...')
+  return handleStartServer(port).then(() => {
+    console.log('sync server started')
+    status.status = true
+    status.message = ''
+    status.address = getAddress()
+    status.code = generateCode()
+  }).catch(err => {
+    console.log(err)
+    status.status = false
+    status.message = err.message
+    status.address = []
+    status.code = ''
+  }).finally(() => {
+    global.lx_event.sync.status(status)
+  })
+}
+
+exports.getStatus = () => status
+
+exports.generateCode = async() => {
+  status.code = generateCode()
+  global.lx_event.sync.status(status)
+  return status.code
+}

src/main/modules/sync/server/syncList.js

@@ -0,0 +1,394 @@
+const path = require('path')
+const fs = require('fs')
+const fsPromises = fs.promises
+const { app } = require('electron')
+const { encryptMsg, decryptMsg } = require('./utils')
+const SYNC_EVENT_NAMES = require('../event/name')
+const { common: COMMON_EVENT_NAME } = require('@main/events/_name')
+const { throttle } = require('@common/utils')
+
+let io
+let syncingId = null
+const wait = (time = 1000) => new Promise((resolve, reject) => setTimeout(resolve, time))
+
+const getRemoteListData = socket => new Promise((resolve, reject) => {
+  console.log('getRemoteListData')
+  const handleError = reason => {
+    reject(new Error(reason))
+  }
+  const handleSuccess = enData => {
+    socket.removeListener('disconnect', handleError)
+    socket.removeListener('list:sync', handleSuccess)
+    console.log('getRemoteListData', 'handleSuccess')
+    const data = JSON.parse(decryptMsg(socket.data.keyInfo, enData))
+    if (!data) return reject(new Error('Get remote list data failed'))
+    if (data.action != 'getData') return
+    resolve(data.data)
+  }
+
+  socket.on('disconnect', handleError)
+  socket.on('list:sync', handleSuccess)
+  socket.emit('list:sync', encryptMsg(socket.data.keyInfo, JSON.stringify({ action: 'getData', data: 'all' })))
+})
+
+const getLocalListData = () => new Promise((resolve, reject) => {
+  const handleSuccess = ({ action, data }) => {
+    if (action !== 'getData') return
+    global.lx_event.sync.off(SYNC_EVENT_NAMES.sync_handle_list, handleSuccess)
+    resolve(data)
+  }
+  global.lx_event.sync.on(SYNC_EVENT_NAMES.sync_handle_list, handleSuccess)
+  global.lx_event.sync.sync_list({
+    action: 'getData',
+  })
+})
+const getSyncMode = keyInfo => new Promise((resolve, reject) => {
+  const handleSuccess = ({ action, data }) => {
+    if (action !== 'selectMode') return
+    global.lx_event.sync.off(SYNC_EVENT_NAMES.sync_handle_list, handleSuccess)
+    resolve(data)
+  }
+  global.lx_event.sync.on(SYNC_EVENT_NAMES.sync_handle_list, handleSuccess)
+  global.lx_event.sync.sync_list({
+    action: 'selectMode',
+    data: keyInfo,
+  })
+})
+
+const finishedSync = socket => {
+  return socket.emit('list:sync', encryptMsg(socket.data.keyInfo, JSON.stringify({
+    action: 'finished',
+  })))
+}
+
+const setLocalList = listData => {
+  global.lx_event.sync.sync_list({
+    action: 'setData',
+    data: listData,
+  })
+}
+const setRemotelList = async(socket, listData) => {
+  if (!io) return
+  const sockets = await io.fetchSockets()
+  for (const socket of sockets) {
+    // if (excludeIds.includes(socket.data.keyInfo.clientId)) continue
+    socket.emit('list:sync', encryptMsg(socket.data.keyInfo, JSON.stringify({ action: 'setData', data: listData })))
+  }
+}
+
+let writeFilePromises = {}
+const updateSnapshot = (path, data) => {
+  console.log('updateSnapshot', path)
+  let writeFilePromise = writeFilePromises[path] || Promise.resolve()
+  return writeFilePromise.then(() => {
+    writeFilePromise = writeFilePromises[path] = fsPromises.writeFile(path, data)
+    return writeFilePromise
+  })
+}
+
+
+const createListDataObj = listData => {
+  const listDataObj = {}
+  for (const list of listData.userList) listDataObj[list.id] = list
+  return listDataObj
+}
+
+const handleMergeList = (sourceList, targetList, addMusicLocationType) => {
+  let newList
+  switch (addMusicLocationType) {
+    case 'top':
+      newList = [...targetList.list, ...sourceList.list]
+      break
+    case 'bottom':
+    default:
+      newList = [...sourceList.list, ...targetList.list]
+      break
+  }
+  const map = {}
+  const ids = []
+  switch (addMusicLocationType) {
+    case 'top':
+      newList = [...targetList.list, ...sourceList.list]
+      for (let i = newList.length - 1; i > -1; i--) {
+        const item = newList[i]
+        if (map[item.songmid]) continue
+        ids.unshift(item.songmid)
+        map[item.songmid] = item
+      }
+      break
+    case 'bottom':
+    default:
+      newList = [...sourceList.list, ...targetList.list]
+      for (const item of newList) {
+        if (map[item.songmid]) continue
+        ids.push(item.songmid)
+        map[item.songmid] = item
+      }
+      break
+  }
+  return {
+    ...sourceList,
+    list: ids.map(id => map[id]),
+  }
+}
+const mergeList = (sourceListData, targetListData) => {
+  const addMusicLocationType = global.appSetting.list.addMusicLocationType
+  const newListData = {}
+  newListData.defaultList = handleMergeList(sourceListData.defaultList, targetListData.defaultList, addMusicLocationType)
+  newListData.loveList = handleMergeList(sourceListData.loveList, targetListData.loveList, addMusicLocationType)
+
+  const listDataObj = createListDataObj(sourceListData)
+  newListData.userList = [...sourceListData.userList]
+
+  for (const list of targetListData.userList) {
+    const targetList = listDataObj[list.id]
+    if (targetList) {
+      targetList.list = handleMergeList(targetList, list, addMusicLocationType).list
+    } else {
+      newListData.userList.push(list)
+    }
+  }
+
+  return newListData
+}
+const overwriteList = (sourceListData, targetListData) => {
+  const newListData = {}
+  newListData.defaultList = sourceListData.defaultList
+  newListData.loveList = sourceListData.loveList
+
+  const listDataObj = createListDataObj(sourceListData)
+  newListData.userList = [...sourceListData.userList]
+
+  for (const list of targetListData.userList) {
+    const targetList = listDataObj[list.id]
+    if (targetList) continue
+    newListData.userList.push(list)
+  }
+
+  return newListData
+}
+
+const handleMergeListData = async socket => {
+  let isSelectingMode = false
+  const handleDisconnect = () => {
+    if (!isSelectingMode) return
+    global.lx_event.sync.sync_list({
+      action: 'closeSelectMode',
+    })
+  }
+  socket.on('disconnect', handleDisconnect)
+  isSelectingMode = true
+  const mode = await getSyncMode(socket.data.keyInfo)
+  isSelectingMode = false
+  const [remoteListData, localListData] = await Promise.all([getRemoteListData(socket), getLocalListData()])
+  console.log('handleMergeListData', 'remoteListData, localListData')
+  let listData
+  switch (mode) {
+    case 'merge_local_remote':
+      listData = mergeList(localListData, remoteListData)
+      break
+    case 'merge_remote_local':
+      listData = mergeList(remoteListData, localListData)
+      break
+    case 'overwrite_local_remote':
+      listData = overwriteList(localListData, remoteListData)
+      break
+    case 'overwrite_remote_local':
+      listData = overwriteList(remoteListData, localListData)
+      break
+    case 'overwrite_local_remote_full':
+      listData = localListData
+      break
+    case 'overwrite_remote_local_full':
+      listData = remoteListData
+      break
+    case 'none': return
+    case 'cancel':
+      socket.disconnect(true)
+      throw new Error('cancel')
+  }
+  return listData
+}
+
+const handleSyncList = async socket => {
+  const [remoteListData, localListData] = await Promise.all([getRemoteListData(socket), getLocalListData()])
+  console.log('handleSyncList', 'remoteListData, localListData')
+  const listData = {}
+  if (localListData.defaultList.list.length || localListData.loveList.list.length || localListData.userList.length) {
+    if (remoteListData.defaultList.list.length || remoteListData.loveList.list.length || remoteListData.userList.length) {
+      const mergedList = await handleMergeListData(socket)
+      console.log('handleMergeListData', 'mergedList')
+      console.log(mergedList)
+      if (!mergedList) return
+      listData.defaultList = mergedList.defaultList
+      listData.loveList = mergedList.loveList
+      listData.userList = mergedList.userList
+      setLocalList(mergedList)
+      setRemotelList(socket, mergedList)
+    } else {
+      setRemotelList(socket, localListData)
+      listData.defaultList = localListData.defaultList
+      listData.loveList = localListData.loveList
+      listData.userList = localListData.userList
+    }
+  } else {
+    if (remoteListData.defaultList.list.length || remoteListData.loveList.list.length || remoteListData.userList.length) {
+      setLocalList(remoteListData)
+      listData.defaultList = remoteListData.defaultList
+      listData.loveList = remoteListData.loveList
+      listData.userList = remoteListData.userList
+    } else {
+      listData.defaultList = localListData.defaultList
+      listData.loveList = localListData.loveList
+      listData.userList = localListData.userList
+    }
+  }
+  return updateSnapshot(socket.data.snapshotFilePath, JSON.stringify({
+    defaultList: listData.defaultList,
+    loveList: listData.loveList,
+    userList: listData.userList,
+  })).then(() => {
+    socket.data.isCreatedSnapshot = true
+    return listData
+  })
+}
+
+const mergeListDataFromSnapshot = (sourceList, targetList, snapshotList, addMusicLocationType) => {
+  const removedListIds = new Set()
+  const sourceListItemIds = new Set()
+  const targetListItemIds = new Set()
+  for (const m of sourceList.list) sourceListItemIds.add(m.songmid)
+  for (const m of targetList.list) targetListItemIds.add(m.songmid)
+  for (const m of snapshotList.list) {
+    if (!sourceListItemIds.has(m.songmid)) removedListIds.add(m.songmid)
+  }
+  for (const m of snapshotList.list) {
+    if (!targetListItemIds.has(m.songmid)) removedListIds.add(m.songmid)
+  }
+
+  let newList
+  const map = {}
+  const ids = []
+  switch (addMusicLocationType) {
+    case 'top':
+      newList = [...targetList.list, ...sourceList.list]
+      for (let i = newList.length - 1; i > -1; i--) {
+        const item = newList[i]
+        if (map[item.songmid] || removedListIds.has(item.songmid)) continue
+        ids.unshift(item.songmid)
+        map[item.songmid] = item
+      }
+      break
+    case 'bottom':
+    default:
+      newList = [...sourceList.list, ...targetList.list]
+      for (const item of newList) {
+        if (map[item.songmid] || removedListIds.has(item.songmid)) continue
+        ids.push(item.songmid)
+        map[item.songmid] = item
+      }
+      break
+  }
+  return {
+    ...sourceList,
+    list: ids.map(id => map[id]),
+  }
+}
+const handleMergeListDataFromSnapshot = async(socket, snapshot) => {
+  const addMusicLocationType = global.appSetting.list.addMusicLocationType
+  const [remoteListData, localListData] = await Promise.all([getRemoteListData(socket), getLocalListData()])
+  console.log('handleMergeListDataFromSnapshot', 'remoteListData, localListData')
+  const newListData = {}
+  newListData.defaultList = mergeListDataFromSnapshot(localListData.defaultList, remoteListData.defaultList, snapshot.defaultList, addMusicLocationType)
+  newListData.loveList = mergeListDataFromSnapshot(localListData.loveList, remoteListData.loveList, snapshot.loveList, addMusicLocationType)
+  const localUserListData = createListDataObj(localListData)
+  const remoteUserListData = createListDataObj(remoteListData)
+  const snapshotUserListData = createListDataObj(snapshot)
+  const removedListIds = new Set()
+  const localUserListIds = new Set()
+  const remoteUserListIds = new Set()
+  for (const l of localListData.userList) localUserListIds.add(l.id)
+  for (const l of remoteListData.userList) remoteUserListIds.add(l.id)
+
+  for (const l of snapshot.userList) {
+    if (!localUserListIds.has(l.id)) removedListIds.add(l.id)
+  }
+  for (const l of snapshot.userList) {
+    if (!remoteUserListIds.has(l.id)) removedListIds.add(l.id)
+  }
+
+  let newUserList = []
+  for (const list of localListData.userList) {
+    if (removedListIds.has(list.id)) continue
+    const remoteList = remoteUserListData[list.id]
+    let newList
+    if (remoteList) {
+      newList = mergeListDataFromSnapshot(list, remoteList, snapshotUserListData[list.id], addMusicLocationType)
+    } else {
+      newList = { ...list }
+    }
+    newUserList.push(newList)
+  }
+  for (const list of remoteListData.userList) {
+    if (removedListIds.has(list.id) || localUserListData[list.id]) continue
+    newUserList.push({ ...list })
+  }
+  newListData.userList = newUserList
+  setLocalList(newListData)
+  setRemotelList(socket, newListData)
+  return updateSnapshot(socket.data.snapshotFilePath, JSON.stringify({
+    defaultList: newListData.defaultList,
+    loveList: newListData.loveList,
+    userList: newListData.userList,
+  })).then(() => {
+    socket.data.isCreatedSnapshot = true
+    return newListData
+  })
+}
+
+const registerUpdateSnapshotTask = (socket, snapshot) => {
+  if (!socket.data.isCreatedSnapshot) return
+  const handleUpdateSnapshot = throttle(({ defaultList, loveList, userList }) => {
+    if (defaultList != null) snapshot.defaultList = defaultList
+    if (loveList != null) snapshot.loveList = loveList
+    if (userList != null) snapshot.userList = userList
+    updateSnapshot(socket.data.snapshotFilePath, JSON.stringify(snapshot))
+  }, 10000)
+  global.lx_event.common.on(COMMON_EVENT_NAME.saveMyList, handleUpdateSnapshot)
+  socket.on('disconnect', () => {
+    global.lx_event.common.off(COMMON_EVENT_NAME.saveMyList, handleUpdateSnapshot)
+  })
+}
+
+const syncList = async socket => {
+  socket.data.snapshotFilePath = path.join(app.getPath('userData'), `snapshot-${Buffer.from(socket.data.keyInfo.clientId).toString('hex').substring(0, 10)}.json`)
+  let fileData
+  let isSyncRequired = false
+  try {
+    fileData = await fsPromises.readFile(socket.data.snapshotFilePath)
+    fileData = JSON.parse(fileData)
+  } catch (err) {
+    if (err.code !== 'ENOENT') throw err
+    isSyncRequired = true
+  }
+  console.log('isSyncRequired', isSyncRequired)
+  if (isSyncRequired) return handleSyncList(socket)
+  return handleMergeListDataFromSnapshot(socket, fileData)
+}
+
+const checkSyncQueue = async() => {
+  if (!syncingId) return
+  await wait()
+  return checkSyncQueue()
+}
+module.exports = async(_io, socket) => {
+  io = _io
+  await checkSyncQueue()
+  syncingId = socket.data.keyInfo.clientId
+  return syncList(socket).then(newListData => {
+    registerUpdateSnapshotTask(socket, { ...newListData })
+    return finishedSync(socket)
+  }).finally(() => {
+    syncingId = null
+  })
+}

src/main/modules/sync/server/utils.js

@@ -0,0 +1,93 @@
+const { networkInterfaces } = require('os')
+const { randomBytes, createCipheriv, createDecipheriv } = require('crypto')
+const getStore = require('@common/store')
+const STORE_NAME = 'sync'
+
+exports.getAddress = () => {
+  const nets = networkInterfaces()
+  const results = []
+  // console.log(nets)
+
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name]) {
+      // Skip over non-IPv4 and internal (i.e. 127.0.0.1) addresses
+      if (net.family === 'IPv4' && !net.internal) {
+        results.push(net.address)
+      }
+    }
+  }
+  return results
+}
+
+let serverId
+exports.getServerId = () => {
+  if (serverId) return serverId
+  const store = getStore(STORE_NAME)
+  serverId = store.get('serverId')
+  if (!serverId) {
+    serverId = randomBytes(4 * 4).toString('base64')
+    store.set('serverId', serverId)
+  }
+  return serverId
+}
+
+let keyInfos
+exports.createClientKeyInfo = deviceName => {
+  const keyInfo = {
+    clientId: randomBytes(4 * 4).toString('base64'),
+    key: randomBytes(16).toString('base64'),
+    iv: randomBytes(16).toString('base64'),
+    deviceName,
+  }
+  const store = getStore(STORE_NAME)
+  if (!keyInfos) keyInfos = store.get('keys') || {}
+  if (Object.keys(keyInfos).length > 101) throw new Error('max keys')
+
+  keyInfos[keyInfo.clientId] = keyInfo
+  store.set('keys', keyInfos)
+  return keyInfo
+}
+exports.setClientKeyInfo = keyInfo => {
+  keyInfos[keyInfo.clientId] = keyInfo
+  const store = getStore(STORE_NAME)
+  store.set('keys', keyInfos)
+}
+exports.getClientKeyInfo = clientId => {
+  if (!keyInfos) {
+    const store = getStore(STORE_NAME)
+    keyInfos = store.get('keys') || {}
+  }
+  return keyInfos[clientId] || null
+}
+
+exports.generateCode = () => {
+  return Math.random().toString().substring(2, 8)
+}
+
+exports.aesEncrypt = (buffer, key, iv) => {
+  const cipher = createCipheriv('aes-128-cbc', Buffer.from(key, 'base64'), Buffer.from(iv, 'base64'))
+  return Buffer.concat([cipher.update(buffer), cipher.final()]).toString('base64')
+}
+
+exports.aesDecrypt = (text, key, iv) => {
+  const decipher = createDecipheriv('aes-128-cbc', Buffer.from(key, 'base64'), Buffer.from(iv, 'base64'))
+  return Buffer.concat([decipher.update(Buffer.from(text, 'base64')), decipher.final()]).toString()
+}
+
+exports.encryptMsg = (keyInfo, msg) => {
+  return msg
+  // if (!keyInfo) return ''
+  // return exports.aesEncrypt(msg, keyInfo.key, keyInfo.iv)
+}
+
+exports.decryptMsg = (keyInfo, enMsg) => {
+  return enMsg
+  // if (!keyInfo) return ''
+  // let msg = ''
+  // try {
+  //   msg = exports.aesDecrypt(enMsg, keyInfo.key, keyInfo.iv)
+  // } catch (err) {
+  //   console.log(err)
+  // }
+  // return msg
+}

src/main/modules/tray.js

@@ -16,7 +16,7 @@ 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
@@ -70,55 +70,63 @@ const destroyTray = () => {
 const createMenu = tray => {
   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 && menu.push(global.modules.mainWindow.isVisible()
+    ? {
+        label: '隐藏主界面',
+        click() {
+          global.modules.mainWindow.hide()
+        },
       }
-      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)
-    },
-  } : {
-    label: '开启桌面歌词',
-    click() {
-      global.lx_event.common.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)
-    },
-  } : {
-    label: '锁定桌面歌词',
-    click() {
-      global.lx_event.common.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)
-    },
-  } : {
-    label: '置顶歌词',
-    click() {
-      global.lx_event.common.setAppConfig({ desktopLyric: { isAlwaysOnTop: true } }, TRAY_EVENT_NAME.name)
-    },
-  })
+    : {
+        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_core.setAppConfig({ desktopLyric: { enable: false } }, TRAY_EVENT_NAME.name)
+        },
+      }
+    : {
+        label: '开启桌面歌词',
+        click() {
+          global.lx_core.setAppConfig({ desktopLyric: { enable: true } }, TRAY_EVENT_NAME.name)
+        },
+      })
+  menu.push(global.appSetting.desktopLyric.isLock
+    ? {
+        label: '解锁桌面歌词',
+        click() {
+          global.lx_core.setAppConfig({ desktopLyric: { isLock: false } }, TRAY_EVENT_NAME.name)
+        },
+      }
+    : {
+        label: '锁定桌面歌词',
+        click() {
+          global.lx_core.setAppConfig({ desktopLyric: { isLock: true } }, TRAY_EVENT_NAME.name)
+        },
+      })
+  menu.push(global.appSetting.desktopLyric.isAlwaysOnTop
+    ? {
+        label: '取消置顶',
+        click() {
+          global.lx_core.setAppConfig({ desktopLyric: { isAlwaysOnTop: false } }, TRAY_EVENT_NAME.name)
+        },
+      }
+    : {
+        label: '置顶歌词',
+        click() {
+          global.lx_core.setAppConfig({ desktopLyric: { isAlwaysOnTop: true } }, TRAY_EVENT_NAME.name)
+        },
+      })
   menu.push({
     label: '退出',
     click() {

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,97 @@
+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,
+
+      spellcheck: false,
+      autoplayPolicy: 'document-user-activation-required',
+      enableWebSQL: false,
+      disableDialogs: true,
+      webgl: false,
+      images: 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) => {
+    // eslint-disable-next-line node/no-callback-literal
+    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

@@ -13,7 +13,8 @@ const setLrcConfig = () => {
     mainSend(global.modules.lyricWindow, ipcWinLyricNames.set_lyric_config, {
       config: desktopLyric,
       languageId: global.appSetting.langId,
-      isShowLyricTransition: global.appSetting.player.isShowLyricTransition,
+      isShowLyricTranslation: global.appSetting.player.isShowLyricTranslation,
+      isPlayLxlrc: global.appSetting.player.isPlayLxlrc,
     })
     if (isLock != desktopLyric.isLock) {
       isLock = desktopLyric.isLock
@@ -48,7 +49,7 @@ 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()
 })
@@ -76,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

@@ -21,7 +21,7 @@ const setLyricsConfig = debounce(config => {
   // 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 => {
@@ -109,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

@@ -20,11 +20,16 @@ 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, isShowLyricTransition: global.appSetting.player.isShowLyricTransition }
+  return {
+    config: global.appSetting.desktopLyric,
+    languageId: global.appSetting.langId,
+    isShowLyricTranslation: global.appSetting.player.isShowLyricTranslation,
+    isPlayLxlrc: global.appSetting.player.isPlayLxlrc,
+  }
 })
 
 mainOn(ipcWinLyricNames.set_win_bounds, (event, options) => {

src/main/rendererEvents/appSetting.js

@@ -1,9 +1,11 @@
 const { mainWindow: MAIN_WINDOW_EVENT_NAME } = require('../events/_name')
-const { mainOn, NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
+const { NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
 
-mainOn(ipcMainWindowNames.set_app_setting, (event, config) => {
+
+mainHandle(ipcMainWindowNames.set_app_setting, (event, config) => {
   if (!config) return
-  global.lx_event.common.setAppConfig(config, MAIN_WINDOW_EVENT_NAME.name)
+  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/data.js

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

src/main/rendererEvents/hotKey.js

@@ -1,10 +1,8 @@
-const Store = require('electron-store')
 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 electronStore_hotKey = new Store({
-  name: 'hotKey',
-})
 // const { registerHotkey, unRegisterHotkey } = require('../modules/hotKey/utils')
 
 // mainHandle(ipcMainWindowNames.set_hot_key_config, async(event, { action, data }) => {
@@ -19,10 +17,13 @@ const electronStore_hotKey = new Store({
 //   }
 // })
 
-mainHandle(ipcMainWindowNames.get_hot_key, async() => ({
-  local: electronStore_hotKey.get('local'),
-  global: electronStore_hotKey.get('global'),
-}))
+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())

src/main/rendererEvents/index.js

@@ -17,7 +17,11 @@ require('./getDataPath')
 require('./showDialog')
 require('./playList')
 require('./data')
-
-require('./xm_verify')
+require('./lyric')
+require('./musicUrl')
+require('./systemFonts')
 
 require('./kw_decodeLyric')
+
+require('./userApi')
+require('./sync')

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

@@ -1,23 +1,33 @@
-const Store = require('electron-store')
 const { mainOn, NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
+const getStore = require('@common/store')
 
 
-let electronStore_list
-
 mainHandle(ipcMainWindowNames.get_playlist, async(event, isIgnoredError = false) => {
-  if (!electronStore_list) {
-    electronStore_list = new Store({
-      name: 'playList',
-      clearInvalidConfig: !isIgnoredError,
-    })
-  }
+  const electronStore_list = getStore('playList', isIgnoredError, false)
 
   return {
     defaultList: electronStore_list.get('defaultList'),
     loveList: electronStore_list.get('loveList'),
     userList: electronStore_list.get('userList'),
-    downloadList: electronStore_list.get('downloadList'),
+    downloadList: getStore('downloadList').get('list'),
   }
 })
 
-mainOn(ipcMainWindowNames.save_playlist, (event, { type, data }) => electronStore_list && electronStore_list.set(type, data))
+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)
+      global.lx_event.common.saveMyList(data)
+      break
+    case 'downloadList':
+      getStore('downloadList').set('list', data)
+      break
+  }
+})

src/main/rendererEvents/sync.js

@@ -0,0 +1,33 @@
+const { mainSend, NAMES: { mainWindow: ipcMainWindowNames }, mainOn, mainHandle } = require('@common/ipc')
+const { eventNames, modules, startServer, stopServer, getStatus, generateCode } = require('../modules/sync')
+
+
+mainOn(ipcMainWindowNames.sync_action_list, (event, { action, data }) => {
+  modules.list.sendListAction(action, data)
+})
+
+mainHandle(ipcMainWindowNames.sync_enable, (event, { enable, port }) => {
+  return enable ? startServer(port) : stopServer()
+})
+
+mainHandle(ipcMainWindowNames.sync_get_status, () => {
+  return getStatus()
+})
+
+mainHandle(ipcMainWindowNames.sync_generate_code, () => {
+  return generateCode()
+})
+
+mainOn(ipcMainWindowNames.sync_list, (event, { action, data }) => {
+  global.lx_event.sync.sync_handle_list({ action, data })
+})
+
+global.lx_event.sync.on(eventNames.sync_action_list, ({ action, data }) => {
+  mainSend(global.modules.mainWindow, ipcMainWindowNames.sync_action_list, { action, data })
+})
+global.lx_event.sync.on(eventNames.status, status => {
+  mainSend(global.modules.mainWindow, ipcMainWindowNames.sync_status, status)
+})
+global.lx_event.sync.on(eventNames.sync_list, ({ action, data }) => {
+  mainSend(global.modules.mainWindow, ipcMainWindowNames.sync_list, { action, data })
+})

src/main/rendererEvents/systemFonts.js

@@ -0,0 +1,5 @@
+const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('@common/ipc')
+const { getFonts } = require('@main/utils/fontManage')
+
+mainHandle(ipcMainWindowNames.get_system_fonts, getFonts)
+

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/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,79 +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)
-  //     })
-  // })
-  view.webContents.session.webRequest.onCompleted({ urls: ['*://www.xiami.com/*'] }, details => {
-    if (/\/_____tmd_____\/slide\?/.test(details.url)) {
-      for (const item of details.responseHeaders['set-cookie']) {
-        if (!/^x5sec=/.test(item)) continue
-        const x5sec = /x5sec=(\w+);.+$/.exec(item)
-        isActioned = true
-        closeView().finally(() => {
-          if (!x5sec) return reject(new Error('get x5sec failed'))
-          resolve(x5sec[1])
-        })
-      }
-    }
-  })
-  // console.log(url)
-  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/autoUpdate.js

@@ -1,4 +1,4 @@
-const { log } = require('../../common/utils')
+const { log, isWin } = require('../../common/utils')
 const { autoUpdater } = require('electron-updater')
 const { mainOn, mainSend, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')
 
@@ -120,6 +120,11 @@ module.exports = () => {
     }, 1000)
   })
 
-  autoUpdater.checkForUpdates()
+  // 由于集合安装包中不包含win arm版，这将会导致arm版更新失败
+  if (isWin && process.arch.includes('arm')) {
+    handleSendEvent({ type: ipcMainWindowNames.update_error, info: 'failed' })
+  } else {
+    autoUpdater.checkForUpdates()
+  }
 }
 

src/main/utils/fontManage.js

@@ -0,0 +1,9 @@
+// const { getAvailableFontFamilies } = require('electron-font-manager')
+
+
+// exports.getAvailableFontFamilies = getAvailableFontFamilies
+
+
+const fontList = require('font-list')
+
+exports.getFonts = fontList.getFonts

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 => {
-  electronStore_config.set('setting', n)
-})
-exports.updateSetting = settings => {
+// const saveSetting = throttle(n => {
+//   electronStore_config.set('setting', n)
+// })
+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/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" :isShowLyricTransition="isShowLyricTransition")
+    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)")
@@ -39,61 +39,53 @@ export default {
         y: -1,
         theme: 0,
         style: {
+          font: '',
           fontSize: 125,
           opacity: 80,
           isZoomActiveLrc: true,
         },
       },
-      isShowLyricTransition: 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',
         },
       ],
@@ -118,9 +110,10 @@ export default {
     document.removeEventListener('mouseup', this.handleMouseUp)
   },
   methods: {
-    handleUpdateConfig({ config, languageId, isShowLyricTransition }) {
+    handleUpdateConfig({ config, languageId, isShowLyricTranslation, isPlayLxlrc }) {
       this.lrcConfig = config
-      this.isShowLyricTransition = isShowLyricTransition
+      this.isShowLyricTranslation = isShowLyricTranslation
+      this.isPlayLxlrc = isPlayLxlrc
       if (this.$i18n.locale !== languageId && languageId != null) this.$i18n.locale = languageId
     },
     handleMouseDown(origin, event) {

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-left: (@bar-height - 24px) / 2;
+  padding-top: @bar-height-padding;
+  padding-left: @bar-height-padding;
   box-sizing: border-box;
 }
 
 .btnBack {
-  margin-top: -(@bar-height - 24px) / 2;
-  margin-left: -(@bar-height - 24px) / 2;
+  margin-top: -@bar-height-padding;
+  margin-left: -@bar-height-padding;
 }
 
 .theme-item {
   display: block;
-  margin-bottom: (@bar-height - 24px) / 2;
-  margin-right: (@bar-height - 24px) / 2;
+  margin-right: @bar-height-padding;
   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
 
@@ -20,6 +21,7 @@ export default {
       default() {
         return {
           style: {
+            font: '',
             fontSize: 125,
             opacity: 80,
             isZoomActiveLrc: true,
@@ -27,7 +29,11 @@ export default {
         }
       },
     },
-    isShowLyricTransition: {
+    isPlayLxlrc: {
+      type: Boolean,
+      default: true,
+    },
+    isShowLyricTranslation: {
       type: Boolean,
       default: true,
     },
@@ -65,12 +71,14 @@ export default {
       lyrics: {
         lyric: '',
         tlyric: '',
+        lxlyric: '',
       },
     }
   },
   computed: {
     lrcStyles() {
       return {
+        fontFamily: this.lrcConfig.style.font,
         fontSize: this.lrcConfig.style.fontSize / 100 + 'rem',
         opacity: this.lrcConfig.style.opacity / 100,
       }
@@ -85,7 +93,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 {
@@ -97,7 +105,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)
@@ -105,7 +113,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()
           })
         }
@@ -120,8 +128,11 @@ export default {
       },
       immediate: true,
     },
-    isShowLyricTransition(n) {
-      console.log(n)
+    isShowLyricTranslation() {
+      this.setLyric()
+      rendererSend(NAMES.winLyric.get_lyric_info, 'status')
+    },
+    isPlayLxlrc() {
       this.setLyric()
       rendererSend(NAMES.winLyric.get_lyric_info, 'status')
     },
@@ -129,6 +140,11 @@ export default {
   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
@@ -136,6 +152,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
       },
@@ -159,6 +181,7 @@ export default {
         case 'lyric':
           this.lyrics.lyric = data.lrc
           this.lyrics.tlyric = data.tlrc
+          this.lyrics.lxlyric = data.lxlrc
           this.setLyric()
           break
         case 'play':
@@ -171,8 +194,9 @@ export default {
           break
         case 'info':
           // console.log('info', data)
-          this.lyrics.lyric = data.lyric
-          this.lyrics.tlyric = data.tlyric
+          this.lyrics.lyric = data.lrc
+          this.lyrics.tlyric = data.tlrc
+          this.lyrics.lxlyric = data.lxlrc
           this.setLyric()
           this.$nextTick(() => {
             this.lyric.line = data.line
@@ -211,7 +235,10 @@ export default {
       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
@@ -279,7 +306,11 @@ export default {
       rendererSend(NAMES.winLyric.close)
     },
     setLyric() {
-      window.lrc.setLyric((this.isShowLyricTransition && this.lyrics.tlyric ? (this.lyrics.tlyric + '\n') : '') + (this.lyrics.lyric || ''))
+      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 || ''),
+      )
     },
   },
 }
@@ -292,34 +323,93 @@ export default {
   text-align: center;
   height: 100%;
   overflow: hidden;
-  font-size: 68px;
-  padding: 0 5px;
-  opacity: .6;
-  transition: opacity @transition-theme;
-  &.draging {
-    .lrc-line {
-      cursor: grabbing;
+  font-size: 16px;
+  color: @color-theme-lyric;
+  cursor: move;
+
+  :global {
+    .lrc-content {
+      line-height: 1.2;
+      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;
-}
+// .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%;
 }
@@ -334,9 +424,28 @@ export default {
     // -webkit-text-stroke: thin #124628;
   }
 }
+.draging {
+  :global {
+    .lrc-content {
+      .font, .translation {
+        cursor: grabbing;
+      }
+    }
+  }
+}
 .lrc-active-zoom {
-  .lrc-active;
-  font-size: 1.2em;
+  :global {
+    .lrc-content {
+      &.active {
+        .translation {
+          font-size: 1em;
+        }
+        span {
+          font-size: 1.2em;
+        }
+      }
+    }
+  }
 }
 .footer {
   flex: 0 0 100px;
@@ -348,14 +457,33 @@ export default {
 
 each(@themes, {
   :global(#container.@{value}) {
-    .lrc-line {
-      color: ~'@{color-@{value}-theme-lyric}';
-    }
+    // .lrc-line {
+    //   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

@@ -6,9 +6,9 @@
     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")
+  material-sync-mode-modal(v-show="globalObj.sync.isShowSyncMode")
 #container(v-else :class="theme")
   core-aside#left
   #right
@@ -16,26 +16,35 @@
     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")
+  material-sync-mode-modal(v-show="globalObj.sync.isShowSyncMode")
 </template>
 
 <script>
-import dnscache from 'dnscache'
 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, getPlayList } from './utils'
-import { base as eventBaseName } from './event/names'
+import { throttle, openUrl, compareVer, getPlayList, parseUrlParams, saveSetting } from './utils'
+import { base as eventBaseName, sync as eventSyncName } from './event/names'
+import apiSourceInfo from './utils/music/api-source-info'
 
 window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
-dnscache({
-  enable: true,
-  ttl: 21600,
-  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() {
@@ -44,12 +53,20 @@ export default {
       isDT: false,
       isLinux,
       globalObj: {
-        apiSource: 'test',
+        apiSource: null,
         proxy: {},
         isShowPact: false,
         qualityList: {},
-        xm: {
-          isShowVerify: false,
+        userApi: {
+          list: [],
+          status: false,
+          message: 'initing',
+          apis: {},
+        },
+        sync: {
+          enable: false,
+          isShowSyncMode: false,
+          deviceName: '',
         },
       },
       updateTimeout: null,
@@ -70,24 +87,12 @@ export default {
     }),
   },
   created() {
-    this.saveDefaultList = throttle(n => {
+    this.saveMyList = listThrottle(data => {
       rendererSend(NAMES.mainWindow.save_playlist, {
-        type: 'defaultList',
-        data: n,
+        type: 'myList',
+        data,
       })
-    }, 500)
-    this.saveLoveList = throttle(n => {
-      rendererSend(NAMES.mainWindow.save_playlist, {
-        type: 'loveList',
-        data: n,
-      })
-    }, 500)
-    this.saveUserList = throttle(n => {
-      rendererSend(NAMES.mainWindow.save_playlist, {
-        type: 'userList',
-        data: n,
-      })
-    }, 500)
+    }, 300)
     this.saveDownloadList = throttle(n => {
       rendererSend(NAMES.mainWindow.save_playlist, {
         type: 'downloadList',
@@ -105,29 +110,38 @@ export default {
     document.body.classList.add(this.isDT ? 'disableTransparent' : 'transparent')
     window.eventHub.$emit(eventBaseName.bindKey)
     this.init()
+    window.eventHub.$on(eventSyncName.handle_action_list, this.handleSyncAction)
+    window.eventHub.$on(eventSyncName.handle_sync_list, this.handleSyncList)
+    if (this.setting.sync.enable && this.setting.sync.port) {
+      rendererInvoke(NAMES.mainWindow.sync_enable, {
+        enable: this.setting.sync.enable,
+        port: this.setting.sync.port,
+      })
+    }
   },
   watch: {
     setting: {
       handler(n, o) {
-        rendererSend(NAMES.mainWindow.set_app_setting, n)
+        saveSetting(n)
+        global.appSetting = 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,
     },
@@ -140,14 +154,40 @@ export default {
     searchHistoryList(n) {
       this.saveSearchHistoryList(n)
     },
-    'globalObj.apiSource'(n) {
-      this.globalObj.qualityList = music.supportQuality[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
     },
@@ -169,7 +209,25 @@ export default {
   methods: {
     ...mapActions(['getVersionInfo']),
     ...mapMutations(['setNewVersion', 'setVersionModalVisible', 'setDownloadProgress', 'setSetting', 'setDesktopLyricConfig']),
-    ...mapMutations('list', ['initList']),
+    ...mapMutations('list', {
+      list_initList: 'initList',
+      list_setList: 'setList',
+      list_listAdd: 'listAdd',
+      list_listMove: 'listMove',
+      list_listAddMultiple: 'listAddMultiple',
+      list_listMoveMultiple: 'listMoveMultiple',
+      list_listRemove: 'listRemove',
+      list_listRemoveMultiple: 'listRemoveMultiple',
+      list_listClear: 'listClear',
+      list_updateMusicInfo: 'updateMusicInfo',
+      list_createUserList: 'createUserList',
+      list_removeUserList: 'removeUserList',
+      list_setUserListName: 'setUserListName',
+      list_moveupUserList: 'moveupUserList',
+      list_movedownUserList: 'movedownUserList',
+      list_setMusicPosition: 'setMusicPosition',
+      list_setSyncListData: 'setSyncListData',
+    }),
     ...mapMutations('download', ['updateDownloadList']),
     ...mapMutations('search', {
       setSearchHistoryList: 'setHistory',
@@ -177,10 +235,12 @@ export default {
     ...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) => {
@@ -244,14 +304,24 @@ export default {
       }, 60 * 30 * 1000)
 
       this.listenEvent()
-      this.initData()
+      asyncTask.push(this.initData())
+      asyncTask.push(this.initUserApi())
+      this.globalObj.sync.enable = this.setting.sync.enable
       this.globalObj.apiSource = this.setting.apiSource
-      this.globalObj.qualityList = music.supportQuality[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.isDT) return
@@ -265,12 +335,14 @@ export default {
     },
 
     initData() { // 初始化数据
-      this.initLocalList() // 初始化播放列表
+      return Promise.all([
+        this.initMyList(), // 初始化播放列表
+        this.initSearchHistoryList(), // 初始化搜索历史列表
+      ])
       // this.initDownloadList() // 初始化下载列表
-      this.initSearchHistoryList() // 初始化搜索历史列表
     },
-    initLocalList() {
-      getPlayList().then(({ defaultList, loveList, userList, downloadList }) => {
+    initMyList() {
+      return getPlayList().then(({ defaultList, loveList, userList, downloadList }) => {
         if (!defaultList) defaultList = this.defaultList
         if (!loveList) loveList = this.loveList
         if (userList) {
@@ -284,14 +356,14 @@ export default {
             l.sourceListId = id
             if (!needSave) needSave = true
           })
-          if (needSave) this.saveUserList(userList)
+          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.list_initList({ defaultList, loveList, userList })
         this.initDownloadList(downloadList) // 初始化下载列表
         this.initPlayInfo()
       })
@@ -326,10 +398,10 @@ export default {
         if (info.listId) {
           const list = window.allList[info.listId]
           // console.log(list)
-          if (!list) return
+          if (!list || !list.list[info.index]) return
           info.list = list.list
         }
-
+        if (!info.list || !info.list[info.index]) return
         window.restorePlayInfo = info
         this.setPlayList({
           list: {
@@ -340,6 +412,72 @@ export default {
         })
       })
     },
+    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)
@@ -389,18 +527,91 @@ export default {
         document.body.addEventListener('mouseenter', this.dieableIgnoreMouseEvents)
         document.body.addEventListener('mouseleave', this.enableIgnoreMouseEvents)
       }
+      this.handleInitEnvParamSearch()
+      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
 
-      if (this.envParams.search != null) {
-        this.$router.push({
-          path: 'search',
-          query: {
-            text: this.envParams.search,
-          },
-        })
+
+            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() {
-      music.xm.closeVerifyModal()
+    async playSongListDetail(source, link, playIndex) {
+      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)
@@ -414,6 +625,84 @@ export default {
       event.target.value = ''
       event.target.blur()
     },
+    handleSyncAction({ action, data }) {
+      if (typeof data == 'object') data.isSync = true
+      // console.log(action, data)
+
+      switch (action) {
+        case 'set_list':
+          this.list_setList(data)
+          break
+        case 'list_add':
+          this.list_listAdd(data)
+          break
+        case 'list_move':
+          this.list_listMove(data)
+          break
+        case 'list_add_multiple':
+          this.list_listAddMultiple(data)
+          break
+        case 'list_move_multiple':
+          this.list_listMoveMultiple(data)
+          break
+        case 'list_remove':
+          this.list_listRemove(data)
+          break
+        case 'list_remove_multiple':
+          this.list_listRemoveMultiple(data)
+          break
+        case 'list_clear':
+          this.list_listClear(data)
+          break
+        case 'update_music_info':
+          this.list_updateMusicInfo(data)
+          break
+        case 'create_user_list':
+          this.list_createUserList(data)
+          break
+        case 'remove_user_list':
+          this.list_removeUserList(data)
+          break
+        case 'set_user_list_name':
+          this.list_setUserListName(data)
+          break
+        case 'moveup_user_list':
+          this.list_moveupUserList(data)
+          break
+        case 'movedown_user_list':
+          this.list_movedownUserList(data)
+          break
+        case 'set_music_position':
+          this.list_setMusicPosition(data)
+          break
+        default:
+          break
+      }
+    },
+    handleSyncList({ action, data }) {
+      switch (action) {
+        case 'getData':
+          global.eventHub.$emit(eventSyncName.send_sync_list, {
+            action: 'getData',
+            data: {
+              defaultList: this.defaultList,
+              loveList: this.loveList,
+              userList: this.userList,
+            },
+          })
+          break
+        case 'setData':
+          this.list_setSyncListData(data)
+          break
+        case 'selectMode':
+          this.globalObj.sync.deviceName = data.deviceName
+          this.globalObj.sync.isShowSyncMode = true
+          break
+        case 'closeSelectMode':
+          this.globalObj.sync.isShowSyncMode = false
+          break
+      }
+    },
   },
   beforeDestroy() {
     this.clearUpdateTimeout()
@@ -462,6 +751,10 @@ body {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+
+  #view { // 偏移5px距离解决非透明模式下右侧滚动条无法拖动的问题
+    margin-right: 5Px;
+  }
 }
 
 #container {
@@ -497,7 +790,7 @@ body {
 }
 #view {
   flex: auto;
-  height: 0;
+  min-height: 0;
 }
 
 each(@themes, {

src/renderer/assets/styles/index.less

@@ -123,6 +123,9 @@ small {
 .small {
   font-size: .9em;
 }
+.tip {
+  color: @color-theme_2-font-label;
+}
 strong {
   font-weight: bold;
 }
@@ -192,6 +195,9 @@ each(@themes, {
     button, input, textarea, a {
       color: ~'@{color-@{value}-theme_2-font}';
     }
+    .tip {
+      color: ~'@{color-@{value}-theme_2-font-label}';
+    }
 
     .hover, a {
       &:hover {

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;
@@ -51,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%);
@@ -78,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;
@@ -114,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;
@@ -136,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;
@@ -172,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;
@@ -193,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;
@@ -229,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;
@@ -250,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;
@@ -286,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;
@@ -307,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;
@@ -343,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%);
@@ -366,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;
@@ -402,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;
@@ -423,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;
@@ -459,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;
@@ -480,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;
@@ -516,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;
@@ -538,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;
@@ -574,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%);
@@ -598,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;
@@ -634,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;
@@ -653,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;
@@ -692,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;
@@ -750,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;
@@ -807,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;
@@ -864,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/Icons.vue

@@ -202,7 +202,7 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       path(d='M69.148,97.826l17.7-17.651,333,334-17.7,17.652Z')
 
     g#icon-add-2(fill='currentColor')
-      //- 0 0 1024 1024
+      //- 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')
 

src/renderer/components/core/Player.vue

@@ -41,7 +41,8 @@ div(:class="$style.player")
       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}}
@@ -85,13 +86,12 @@ 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, throttle, assertApiSupport } from '../../utils'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import { requestMsg } from '../../utils/message'
 import { player as eventPlayerNames } from '../../../common/hotKey'
-import musicSdk from '@renderer/utils/music'
 import path from 'path'
 
 let audio
@@ -216,8 +216,9 @@ export default {
             singer: this.musicInfo.singer,
             name: this.musicInfo.name,
             album: this.musicInfo.album,
-            lyric: this.musicInfo.lrc,
-            tlyric: this.musicInfo.tlrc,
+            lrc: this.musicInfo.lrc,
+            tlrc: this.musicInfo.tlrc,
+            lxlrc: this.musicInfo.lxlrc,
             isPlay: this.isPlay,
             line: this.lyric.line,
             played_time: audio.currentTime * 1000,
@@ -235,6 +236,7 @@ export default {
           break
       }
     })
+    this.registerMediaSessionHandler()
     navigator.mediaDevices.addEventListener('devicechange', this.handleMediaListChange)
     document.addEventListener('mousemove', this.handleVolumeMsMove)
     document.addEventListener('mouseup', this.handleVolumeMsUp)
@@ -254,6 +256,8 @@ export default {
       if (window.restorePlayInfo) {
         this.handleRestorePlay(window.restorePlayInfo)
         window.restorePlayInfo = null
+        navigator.mediaSession.playbackState = 'paused'
+        this.updateMediaSessionInfo()
         return
       }
       // console.log('changePlay')
@@ -264,7 +268,7 @@ export default {
     'setting.player.togglePlayMethod'(n) {
       audio.loop = n === 'singleLoop'
       if (this.playedList.length) this.clearPlayedList()
-      if (n == 'random') this.setPlayedList(this.playMusicInfo)
+      if (n == 'random' && this.playMusicInfo && !this.playMusicInfo.isTempPlay) this.setPlayedList(this.playMusicInfo)
     },
     'setting.player.isMute'(n) {
       audio.muted = n
@@ -272,10 +276,14 @@ export default {
     'setting.player.mediaDeviceId'(n) {
       this.setMediaDevice()
     },
-    'setting.player.isShowLyricTransition'() {
+    '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)
@@ -327,6 +335,7 @@ export default {
   },
   methods: {
     ...mapActions('player', ['getUrl', 'getPic', 'getLrc', 'playPrev', 'playNext']),
+    ...mapActions('list', ['getOtherSource']),
     ...mapMutations('player', [
       'setPlayMusicInfo',
       'setPlayIndex',
@@ -405,7 +414,7 @@ export default {
           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 })
+          this.updateMusicInfo({ listId: this.listId, id: this.targetSong.songmid, musicInfo: this.targetSong, data: { interval: formatPlayTime2(this.maxPlayTime) } })
         }
       })
       audio.addEventListener('loadstart', () => {
@@ -452,6 +461,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
@@ -463,17 +476,18 @@ export default {
           this.lyric.lines = lines
           this.lyric.line = 0
         },
-        offset: 80,
+        // offset: 80,
       })
 
       this.handleRegisterEvent('on')
     },
     async play() {
       this.clearDelayNextTimeout()
+      this.updateMediaSessionInfo()
 
       const targetSong = this.targetSong
 
-      if (this.setting.player.togglePlayMethod == 'random') this.setPlayedList(this.playMusicInfo)
+      if (this.setting.player.togglePlayMethod == 'random' && !this.playMusicInfo.isTempPlay) this.setPlayedList(this.playMusicInfo)
       this.retryNum = 0
       this.restorePlayTime = 0
 
@@ -492,7 +506,7 @@ export default {
         this.setImg(targetSong.musicInfo)
         this.setLrc(targetSong.musicInfo)
       } else {
-        if (!this.assertApiSupport(targetSong.source)) return this.playNext()
+        // if (!this.assertApiSupport(targetSong.source)) return this.playNext()
         this.musicInfo.songmid = targetSong.songmid
         this.musicInfo.singer = targetSong.singer
         this.musicInfo.name = targetSong.name
@@ -541,20 +555,28 @@ export default {
       this.handleUpdateWinLyricInfo('play', audio.currentTime * 1000)
       this.setAppTitle()
       this.sendProgressEvent(this.progress, 'normal')
+      navigator.mediaSession.playbackState = 'playing'
     },
     stopPlay() {
       this.isPlay = false
       window.lrc.pause()
       this.handleUpdateWinLyricInfo('pause')
-      this.sendProgressEvent(this.progress, 'paused')
       this.clearAppTitle()
+      this.$nextTick(() => {
+        if (this.playMusicInfo) {
+          this.sendProgressEvent(this.progress, 'paused')
+          navigator.mediaSession.playbackState = 'paused'
+        } else {
+          this.sendProgressEvent(this.progress, 'none')
+          navigator.mediaSession.playbackState = 'none'
+        }
+      })
     },
     handleSetProgress(event) {
-      this.setProgress(event.offsetX / this.pregessWidth)
+      this.setProgress(event.offsetX / this.pregessWidth * this.maxPlayTime)
     },
-    setProgress(pregress) {
+    setProgress(time) {
       if (!audio.src) return
-      const time = pregress * this.maxPlayTime
       if (this.restorePlayTime) this.restorePlayTime = time
       if (this.mediaBuffer.playTime) {
         this.clearBufferTimeout()
@@ -573,7 +595,7 @@ export default {
     togglePlay() {
       if (!audio.src) {
         if (this.restorePlayTime != null) {
-          if (!this.assertApiSupport(this.targetSong.source)) return this.playNext()
+          // if (!this.assertApiSupport(this.targetSong.source)) return this.playNext()
           this.setUrl(this.targetSong)
         }
         return
@@ -595,40 +617,28 @@ export default {
       if (highQuality && songInfo._types['320k'] && list && list.includes('320k')) type = '320k'
       return type
     },
-    setUrl(targetSong, isRefresh, isRetryed = false, retryedSource = [], originMusic = null) {
-      if (!retryedSource.includes(targetSong.source)) retryedSource.push(targetSong.source)
-
+    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, originMusic, type, isRefresh }).then(url => {
-        if ((targetSong !== this.targetSong && originMusic !== this.targetSong) || this.isPlay) return
+      return this.getUrl({
+        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
-        if (!isRetryed) return this.setUrl(targetSong, isRefresh, true, retryedSource, originMusic)
-        if (!originMusic) originMusic = targetSong
-
-        this.status = this.statusText = 'Try toggle source...'
-
-        return (originMusic.otherSource && originMusic.otherSource.length ? Promise.resolve(originMusic.otherSource) : musicSdk.findMusic(originMusic)).then(res => {
-          this.updateMusicInfo({ id: this.listId, index: this.playIndex, data: { otherSource: res }, musicInfo: originMusic })
-          return res
-        }).then(otherSource => {
-          console.log('find otherSource', otherSource)
-          if (otherSource.length) {
-            for (const item of otherSource) {
-              if (retryedSource.includes(item.source) || !this.assertApiSupport(item.source)) continue
-              console.log('try toggle to: ', item.source, item.name, item.singer, item.interval)
-              return this.setUrl(item, isRefresh, false, retryedSource, originMusic)
-            }
-          }
-          this.status = this.statusText = err.message
-          this.addDelayNextTimeout()
-          return Promise.reject(err)
-        })
+        if (!isRetryed) return this.setUrl(targetSong, isRefresh, true)
+        this.status = this.statusText = err.message
+        this.addDelayNextTimeout()
+        return Promise.reject(err)
       })
     },
     setImg(targetSong) {
@@ -636,18 +646,22 @@ export default {
 
       if (!this.musicInfo.img) {
         this.getPic(targetSong).then(() => {
+          if (targetSong.songmid !== this.musicInfo.songmid) return
           this.musicInfo.img = targetSong.img
+          this.updateMediaSessionInfo()
         })
       }
     },
     setLrc(targetSong) {
-      this.getLrc(targetSong).then(() => {
-        this.musicInfo.lrc = targetSong.lrc
-        this.musicInfo.tlrc = targetSong.tlrc
+      this.getLrc(targetSong).then(({ lyric, tlyric, lxlyric }) => {
+        if (targetSong.songmid !== this.musicInfo.songmid) return
+        this.musicInfo.lrc = lyric
+        this.musicInfo.tlrc = tlyric
+        this.musicInfo.lxlrc = lxlyric
       }).catch(() => {
         this.status = this.statusText = this.$t('core.player.lyric_error')
       }).finally(() => {
-        this.handleUpdateWinLyricInfo('lyric', { lrc: this.musicInfo.lrc, tlrc: this.musicInfo.tlrc })
+        this.handleUpdateWinLyricInfo('lyric', { lrc: this.musicInfo.lrc, tlrc: this.musicInfo.tlrc, lxlrc: this.musicInfo.lxlrc })
         this.setLyric()
       })
     },
@@ -661,6 +675,7 @@ export default {
       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
@@ -834,7 +849,7 @@ export default {
           this.playNext()
           break
         case 'progress':
-          this.setProgress(data)
+          this.handleSetProgress(data)
           break
         case 'volume':
           break
@@ -851,7 +866,15 @@ export default {
       })
     },
     setLyric() {
-      window.lrc.setLyric((this.setting.player.isShowLyricTransition && this.musicInfo.tlrc ? (this.musicInfo.tlrc + '\n') : '') + (this.musicInfo.lrc || ''))
+      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)
@@ -894,6 +917,59 @@ export default {
 
       if (this.setting.player.togglePlayMethod == 'random') this.setPlayedList(this.playMusicInfo)
     },
+    updateMediaSessionInfo() {
+      const mediaMetadata = {
+        title: this.targetSong.name,
+        artist: this.targetSong.singer,
+        album: this.targetSong.albumName,
+      }
+      if (this.targetSong.img) mediaMetadata.artwork = [{ src: this.targetSong.img }]
+      navigator.mediaSession.metadata = new window.MediaMetadata(mediaMetadata)
+    },
+    registerMediaSessionHandler() {
+      // navigator.mediaSession.setActionHandler('play', () => {
+      //   if (this.isPlay || !this.playMusicInfo) return
+      //   console.log('play')
+      //   this.startPlay()
+      // })
+      // navigator.mediaSession.setActionHandler('pause', () => {
+      //   if (!this.isPlay || !this.playMusicInfo) return
+      //   console.log('pause')
+      //   this.stopPlay()
+      // })
+      navigator.mediaSession.setActionHandler('stop', () => {
+        if (!this.isPlay || !this.playMusicInfo) return
+        console.log('stop')
+        this.stopPlay()
+      })
+      navigator.mediaSession.setActionHandler('seekbackward', details => {
+        if (!this.isPlay || !this.playMusicInfo) return
+        console.log('seekbackward')
+        this.setProgress(Math.max(audio.currentTime - details.seekOffset, 0))
+      })
+      navigator.mediaSession.setActionHandler('seekforward', details => {
+        if (!this.isPlay || !this.playMusicInfo) return
+        console.log('seekforward')
+        this.setProgress(Math.min(audio.currentTime + details.seekOffset, audio.duration))
+      })
+      navigator.mediaSession.setActionHandler('seekto', details => {
+        console.log('seekto', details.seekTime)
+        let time = Math.min(details.seekTime, audio.duration)
+        time = Math.max(time, 0)
+        this.setProgress(time)
+      })
+      navigator.mediaSession.setActionHandler('previoustrack', () => {
+        console.log('previoustrack')
+        this.playPrev()
+      })
+      navigator.mediaSession.setActionHandler('nexttrack', () => {
+        console.log('nexttrack')
+        this.playNext()
+      })
+      // navigator.mediaSession.setActionHandler('skipad', () => {
+      //   console.log('')
+      // })
+    },
   },
 }
 </script>
@@ -1042,7 +1118,7 @@ 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);
 }
 
@@ -1060,14 +1136,14 @@ export default {
   margin-left: 5px;
   height: 100%;
   width: 20px;
-  color: @color-theme;
+  color: @color-btn;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
 
   transition: opacity 0.2s ease;
-  opacity: .5;
+  opacity: .6;
   cursor: pointer;
 
   svg {
@@ -1115,7 +1191,7 @@ export default {
 
 .progress {
   width: 100%;
-  height: 3px;
+  height: 4px;
   // overflow: hidden;
   transition: @transition-theme;
   transition-property: background-color;
@@ -1148,6 +1224,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 {
@@ -1211,10 +1288,10 @@ each(@themes, {
       // }
     }
     .titleBtn {
-      color: ~'@{color-@{value}-theme}';
+      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));
       }
@@ -1224,7 +1301,7 @@ each(@themes, {
     }
 
     .volume-bar {
-      background-color: ~'@{color-@{value}-theme}';
+      background-color: ~'@{color-@{value}-btn}';
     }
 
 

src/renderer/components/core/PlayerDetail.vue

@@ -29,7 +29,8 @@
       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")
@@ -58,7 +59,7 @@
           div(:class="$style.progressContent")
             div(:class="$style.progress")
               //- 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(${playInfo.progress || 0})`, willChange: isPlay || isActiveTransition ? 'transform' : 'auto' }")
+              div(:class="[$style.progressBar, $style.progressBar2, isActiveTransition ? $style.barTransition : '']" @transitionend="handleTransitionEnd" :style="{ transform: `scaleX(${playInfo.progress || 0})` }")
             div(:class="$style.progressMask" @click='setProgress' ref="dom_progress")
         div(:class="$style.timeLabel")
           span(style="margin-left: 15px") {{playInfo.status}}
@@ -158,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 {
@@ -174,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)
@@ -182,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()
           })
         }
@@ -235,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()
@@ -250,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()
     },
@@ -269,7 +282,7 @@ export default {
     setProgress(event) {
       this.$emit('action', {
         type: 'progress',
-        data: event.offsetX / this.pregessWidth,
+        data: event,
       })
     },
     setProgressWidth() {
@@ -540,6 +553,7 @@ export default {
 
   &:before {
     position: absolute;
+    z-index: 1;
     top: 0;
     left: 0;
     content: ' ';
@@ -568,13 +582,59 @@ export default {
   &.draging {
     cursor: grabbing;
   }
-  p {
-    padding: 8px 0;
-    line-height: 1.2;
-    overflow-wrap: break-word;
-    transition: @transition-theme !important;
-    transition-property: color, font-size;
+  :global {
+    .lrc-content {
+      line-height: 1.2;
+      margin: 16px 0;
+      overflow-wrap: break-word;
+      color: @color-player-detail-lyric;
+
+      .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%;
@@ -736,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 {
@@ -769,9 +830,29 @@ each(@themes, {
       box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
       // border-color: ~'@{color-@{value}-theme-hover}';
     }
-    .lrc-active {
-      color: ~'@{color-@{value}-theme}';
+    .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}';
+            }
+          }
+          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}';
     }

src/renderer/components/material/AasideList.vue

@@ -1,319 +0,0 @@
-<template lang="pug">
-div(:class="$style.lists")
-  h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
-  ul.scroll(:class="$style.listsContent")
-    li(:class="$style.listsItem" v-for="item in lists" :key="item.id") {{item.name}}
-
-  transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-    div(v-show="!list.length" :class="$style.noitem")
-      p(v-html="noItem")
-  material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { scrollTo, clipboardWriteText, assertApiSupport } from '../../utils'
-export default {
-  name: 'MaterialSongList',
-  model: {
-    prop: 'selectdData',
-    event: 'input',
-  },
-  props: {
-    list: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    page: {
-      type: Number,
-      required: true,
-    },
-    limit: {
-      type: Number,
-      required: true,
-    },
-    total: {
-      type: Number,
-      required: true,
-    },
-    selectdData: {
-      type: Array,
-      required: true,
-    },
-    source: {
-      type: String,
-    },
-    noItem: {
-      type: String,
-      default: '列表加载中...',
-    },
-  },
-  computed: {
-    ...mapGetters(['setting']),
-  },
-  watch: {
-    selectdList(n) {
-      const len = n.length
-      if (len) {
-        this.isShowEditBtn = true
-      } else {
-        this.isShowEditBtn = false
-      }
-    },
-    selectdData(n) {
-      const len = n.length
-      if (len) {
-        this.isShowEditBtn = true
-        this.selectdList = [...n]
-      } else {
-        this.isShowEditBtn = false
-        this.removeAllSelect()
-      }
-    },
-    list(n) {
-      this.removeAllSelect()
-      if (!this.list.length) return
-      this.$nextTick(() => scrollTo(this.$refs.dom_scrollContent, 0))
-    },
-  },
-  data() {
-    return {
-      clickTime: 0,
-      clickIndex: -1,
-      isShowEditBtn: false,
-      selectdList: [],
-      keyEvent: {
-        isShiftDown: false,
-        isModDown: false,
-        isADown: false,
-        aDownTimeout: null,
-      },
-      lastSelectIndex: 0,
-    }
-  },
-  created() {
-    this.listenEvent()
-  },
-  beforeDestroy() {
-    this.unlistenEvent()
-  },
-  methods: {
-    listenEvent() {
-      window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
-      window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
-      window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
-      window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
-      window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$on('key_mod+a_up', this.handle_key_mod_a_up)
-    },
-    unlistenEvent() {
-      window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
-      window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
-      window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
-      window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
-      window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
-      window.eventHub.$off('key_mod+a_up', this.handle_key_mod_a_up)
-    },
-    handle_key_shift_down() {
-      if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
-    },
-    handle_key_shift_up() {
-      if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
-    },
-    handle_key_mod_down() {
-      if (!this.keyEvent.isModDown) this.keyEvent.isModDown = true
-    },
-    handle_key_mod_up() {
-      if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
-    },
-    handle_key_mod_a_down() {
-      if (!this.keyEvent.isADown) {
-        this.keyEvent.isModDown = false
-        this.keyEvent.isADown = true
-        this.handleSelectAllData()
-        if (this.keyEvent.aDownTimeout) clearTimeout(this.keyEvent.aDownTimeout)
-        this.keyEvent.aDownTimeout = setTimeout(() => {
-          this.keyEvent.aDownTimeout = null
-          this.keyEvent.isADown = false
-        }, 500)
-      }
-    },
-    handle_key_mod_a_up() {
-      if (this.keyEvent.isADown) {
-        if (this.keyEvent.aDownTimeout) {
-          clearTimeout(this.keyEvent.aDownTimeout)
-          this.keyEvent.aDownTimeout = null
-        }
-        this.keyEvent.isADown = false
-      }
-    },
-    handleDoubleClick(event, index) {
-      if (event.target.classList.contains('select')) return
-
-      this.handleSelectData(event, index)
-
-      if (
-        window.performance.now() - this.clickTime > 400 ||
-        this.clickIndex !== index
-      ) {
-        this.clickTime = window.performance.now()
-        this.clickIndex = index
-        return
-      }
-      this.emitEvent(this.assertApiSupport(this.source) ? 'testPlay' : 'search', index)
-      this.clickTime = 0
-      this.clickIndex = -1
-    },
-    handleSelectData(event, clickIndex) {
-      if (this.keyEvent.isShiftDown) {
-        if (this.selectdList.length) {
-          let lastSelectIndex = this.lastSelectIndex
-          this.removeAllSelect()
-          if (lastSelectIndex != clickIndex) {
-            let isNeedReverse = false
-            if (clickIndex < lastSelectIndex) {
-              let temp = lastSelectIndex
-              lastSelectIndex = clickIndex
-              clickIndex = temp
-              isNeedReverse = true
-            }
-            this.selectdList = this.list.slice(lastSelectIndex, clickIndex + 1)
-            if (isNeedReverse) this.selectdList.reverse()
-            let nodes = this.$refs.dom_tbody.childNodes
-            do {
-              nodes[lastSelectIndex].classList.add('active')
-              lastSelectIndex++
-            } while (lastSelectIndex <= clickIndex)
-          }
-        } else {
-          event.currentTarget.classList.add('active')
-          this.selectdList.push(this.list[clickIndex])
-          this.lastSelectIndex = clickIndex
-        }
-      } else if (this.keyEvent.isModDown) {
-        this.lastSelectIndex = clickIndex
-        let item = this.list[clickIndex]
-        let index = this.selectdList.indexOf(item)
-        if (index < 0) {
-          this.selectdList.push(item)
-          event.currentTarget.classList.add('active')
-        } else {
-          this.selectdList.splice(index, 1)
-          event.currentTarget.classList.remove('active')
-        }
-      } else if (this.selectdList.length) {
-        this.removeAllSelect()
-      } else return
-      this.$emit('input', [...this.selectdList])
-    },
-    removeAllSelect() {
-      this.selectdList = []
-      let dom_tbody = this.$refs.dom_tbody
-      if (!dom_tbody) return
-      let nodes = dom_tbody.querySelectorAll('.active')
-      for (const node of nodes) {
-        if (node.parentNode == dom_tbody) node.classList.remove('active')
-      }
-    },
-    handleListBtnClick(info) {
-      this.emitEvent('listBtnClick', info)
-    },
-    handleSelectAllData() {
-      this.removeAllSelect()
-      this.selectdList = [...this.list]
-      let nodes = this.$refs.dom_tbody.childNodes
-      for (const node of nodes) {
-        node.classList.add('active')
-      }
-      this.$emit('input', [...this.selectdList])
-    },
-    handleTogglePage(page) {
-      this.emitEvent('togglePage', page)
-    },
-    handleFlowBtnClick(action) {
-      this.emitEvent('flowBtnClick', action)
-    },
-    emitEvent(action, data) {
-      this.$emit('action', { action, data })
-    },
-    handleChangeSelect() {
-      this.$emit('input', [...this.selectdList])
-    },
-    handleContextMenu(event) {
-      if (!event.target.classList.contains('select')) return
-      let classList = this.$refs.dom_scrollContent.classList
-      classList.add(this.$style.copying)
-      window.requestAnimationFrame(() => {
-        let str = window.getSelection().toString()
-        classList.remove(this.$style.copying)
-        str = str.trim()
-        if (!str.length) return
-        clipboardWriteText(str)
-      })
-    },
-    assertApiSupport(source) {
-      return assertApiSupport(source)
-    },
-  },
-}
-</script>
-
-
-<style lang="less" module>
-@import '../../assets/styles/layout.less';
-.lists {
-  flex: none;
-  width: 15%;
-  display: flex;
-  flex-flow: column nowrap;
-}
-.title {
-  font-size: 12px;
-  line-height: 28px;
-  padding: 5px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  flex: none;
-}
-.list {
-  flex: auto;
-  min-width: 0;
-}
-.item {
-
-}
-.noitem {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-
-  p {
-    font-size: 24px;
-    color: @color-theme_2-font-label;
-  }
-}
-
-each(@themes, {
-  :global(#container.@{value}) {
-    .tbody {
-      td {
-        &:first-child {
-          color: ~'@{color-@{value}-theme_2-font-label}';
-        }
-      }
-    }
-    .noitem {
-      p {
-        color: ~'@{color-@{value}-theme_2-font-label}';
-      }
-    }
-  }
-})
-</style>

src/renderer/components/material/Btn.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button(:class="[$style.btn, min ? $style.min : null]" :disabled="disabled" @click="$emit('click', $event)")
+  button(:class="[$style.btn, min ? $style.min : null, outline ? $style.outline : null]" :disabled="disabled" @click="$emit('click', $event)")
     slot
 </template>
 
@@ -9,6 +9,10 @@ export default {
     min: {
       type: Boolean,
     },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -36,6 +40,10 @@ export default {
     opacity: .4;
   }
 
+  &.outline {
+    background-color: transparent;
+  }
+
   &:hover {
     background-color: @color-btn-hover;
   }
@@ -54,6 +62,9 @@ each(@themes, {
     .btn {
       color: ~'@{color-@{value}-btn}';
       background-color: ~'@{color-@{value}-btn-background}';
+      &.outline {
+        background-color: transparent;
+      }
       &:hover {
         background-color: ~'@{color-@{value}-btn-hover}';
       }

src/renderer/components/material/ListAddModal.vue

@@ -6,7 +6,7 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
       span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
       |  {{$t('material.list_add_modal.title_last')}}
     div.scroll(:class="$style.btnContent")
-      material-btn(:class="$style.btn" :tips="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
+      material-btn(:class="$style.btn" :tips="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" :disabled="item.isExist" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
       material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('view.list.lists_new_list_btn')")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
           use(xlink:href='#icon-addTo')
@@ -57,11 +57,12 @@ export default {
   computed: {
     ...mapGetters('list', ['defaultList', 'loveList', 'userList']),
     lists() {
+      if (!this.musicInfo) return []
       return [
         this.defaultList,
         this.loveList,
         ...this.userList,
-      ].filter(l => l.id != this.excludeListId.includes(l.id))
+      ].filter(l => !this.excludeListId.includes(l.id)).map(l => ({ ...l, isExist: l.list.some(s => s.songmid == this.musicInfo.songmid) }))
     },
     spaceNum() {
       return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)

src/renderer/components/material/ListAddMultipleModal.vue

@@ -62,7 +62,7 @@ export default {
         this.defaultList,
         this.loveList,
         ...this.userList,
-      ].filter(l => l.id != this.excludeListId.includes(l.id))
+      ].filter(l => !this.excludeListId.includes(l.id))
     },
     spaceNum() {
       return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)

src/renderer/components/material/Modal.vue

@@ -140,7 +140,7 @@ export default {
   box-shadow: 0 0 3px rgba(0, 0, 0, .3);
   overflow: hidden;
   max-height: 80%;
-  max-width: 70%;
+  max-width: 76%;
   position: relative;
   display: flex;
   flex-flow: column nowrap;

src/renderer/components/material/MusicComment.vue

@@ -50,7 +50,7 @@ export default {
         singer: '',
       },
       page: 1,
-      total: 10,
+      total: 0,
       maxPage: 1,
       limit: 20,
       isHotLoading: true,