Merge branch 'dev'

.github/ISSUE_TEMPLATE/----.md

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

.github/ISSUE_TEMPLATE/--bug.md

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

CHANGELOG.md

@@ -6,6 +6,167 @@ 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.7.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.6.1...v1.7.0) - 2021-01-30
+
+### 新增
+
+- 搜索界面新增搜索状态的提示
+- 新增“稍后播放”功能，可在歌曲列表右键菜单使用
+- 新增“记住播放进度”功能的控制，该功能默认不再开启，可到播放设置-记住播放进度开启
+
+### 优化
+
+- 优化播放歌曲换源匹配
+- 优化设置界面设置项的展示
+
+### 修复
+
+- 修复快速切换歌曲时, 会出现播放的歌曲和界面展示的歌曲不一致的问题
+- 修复了一个由版本更新日志显示导致的潜在远程代码执行攻击漏洞，该漏洞影响v1.6.1及之前的所有版本，请务必更新到最新版本
+- 修复xm搜索源验证问题
+
+### 其他
+
+- 更新electron到9.4.2
+
+## [1.6.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.6.0...v1.6.1) - 2021-01-13
+
+### 优化
+
+- 改进自动换源时的歌曲匹配
+
+### 修复
+
+- 修复某些情况下自动换源的时间过长时会终止换源自动切歌的问题
+- 修复自动换源导致的搜索列表每页变成10条数据的问题
+- 降级electron到9.3.3修复部分系统没有声音的问题
+
+## [1.6.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.5.0...v1.6.0) - 2021-01-10
+
+### 新增
+
+- 我的列表右键菜单新增列表排序功能，可调整单曲、多选后的歌曲的顺序。注意：多选排序还将会按照选中歌曲时的顺序排序
+- 添加鼠标提示的自动关闭功能，鼠标长时间（目前是10秒）不动时鼠标提示将会自动关闭
+- 添加鼠标指向歌曲封面的提示（对于进度条左边的歌曲封面，你可能不知道的操作->右击在“我的列表”定位当前播放的歌曲）
+- 隐藏播放详情页按钮添加快速隐藏详情页提示（你可能不知道的操作->在播放详情页内的任意非窗口可拖动区域右键双击可以快速隐藏详情页）
+- 添加桌面歌词字体、透明度调整按钮微调提示（你可能不知道的操作->对于字体、透明度可右击微调）
+- 我的列表右键菜单添加搜索当前歌曲功能
+- 新增`-dha`参数，添加此启动参数将禁用硬件加速启动（Disable Hardware Acceleration），窗口显示有问题时可以尝试添加此参数启动，Linux系统的界面显示有问题时可尝试添加此参数启动，若不行可尝试添加`-dt`参数启动
+- 新增播放自动换源功能~
+
+### 变更
+
+- `-nt`参数更名为`-dt`（Disable Transparent），目前原来的`-nt`参数仍然可用，但将在后续的版本中移除
+
+### 修复
+
+- 修复恢复上次播放的歌曲时在随机播放模式下不把恢复播放的歌曲放入已播放队列的问题（该问题会导致随机模式下会导致未播放完整个列表前就会再次随机到该歌曲，以及无法通过上一曲切回该歌曲）
+- 修复音乐嵌入的封面在 Mac 系统无法显示的问题
+- 修复`-dt`（原来的`-nt`）启动参数不真正生效的问题
+
+## [1.5.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.4.1...v1.5.0) - 2020-12-13
+
+### 新增
+
+- 直接从歌单详情收藏的列表新增同步功能。注意：这将会覆盖本地的目标列表，歌曲将被替换成最新的在线列表
+
+### 优化
+
+- 优化软件启动时恢复上一次播放的歌曲进度功能
+
+### 修复
+
+- 修复MAC平台上下载歌曲封面嵌入无法显示的问题
+- 修复MAC平台首次运行软件最小化、关闭控制按钮默认在右边的问题
+- 修复酷狗源的某些歌曲没有专辑字段导致的列表加载失败问题
+- 修复某些酷狗源歌单链接无法打开的问题
+
+## [1.4.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.4.0...v1.4.1) - 2020-11-25
+
+
+### 修复
+
+- 修复有歌词翻译与无歌词的音乐间切换会导致歌词翻译残留显示的问题
+- 修复歌曲URL过期时，等待刷新URL的自动切换歌曲时间间隔太短的问题
+- 修复某些电脑上的某些歌曲没有声音的问题（升级Electron9.3.4导致的，现降级到9.3.3）
+
+## [1.4.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.3.0...v1.4.0) - 2020-11-21
+
+### 新增
+
+- 托盘菜单新增显示、隐藏主界面选项，为Linux、MAC版添加托盘菜单
+- 新增播放进度信息保存
+
+### 优化
+
+- 移除kg源的歌词文件开头的空白字符串
+
+### 修复
+
+- 修复专辑图片无法嵌入的问题
+- 修复播放状态栏切换“上一首”歌曲按钮提示错误的问题
+- 修复移动单首歌曲时，如果目标列表存在该歌曲，会导致将源列表与目标列表里的目标歌曲移除
+- 修复kg源歌曲信息带有单引号等特殊字符被转义的问题
+
+## [1.3.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.2...v1.3.0) - 2020-11-01
+
+### 新增
+
+- 播放详情页新增歌曲评论加载显示（某些平台暂不支持显示子评论）
+
+### 优化
+
+- 修改播放详情页的歌曲图片的显示效果
+
+### 修复
+
+- 修复小芸源音乐搜索结果最多只有20条搜索结果的问题
+
+## [1.2.2](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.1...v1.2.2) - 2020-10-18
+
+### 修复
+
+- 降级 Electron 到 9.x.x 版本修复 Linux 版桌面歌词窗口变白的问题
+
+## [1.2.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.0...v1.2.1) - 2020-10-18
+
+### 优化
+
+- Linux版的软件界面默认使用圆角与阴影，顺便修复了桌面歌词窗口变白的问题，已在Ubuntu 18.10测试正常，若显示异常可尝试添加`-nt`参数启动
+
+### 修复
+
+- 修复聚合搜索的分页问题
+- 修复代理输入框输入的内容不生效的问题
+
+## [1.2.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.1.1...v1.2.0) - 2020-09-30
+
+提前祝大家中秋&国庆快乐~
+
+### 新增
+
+- 播放控制栏开启/关闭桌面歌词按钮 新增右击按钮时锁定/解锁桌面歌词功能
+
+### 优化
+
+- 优化我的列表滚动条位置的保存逻辑
+- 更新设置-备份与恢复功能的描述
+- 优化软件内鼠标悬停的提示界面
+
+### 修复
+
+- 修复桌面歌词窗口不允许拖出桌面之外的位置计算偏移Bug
+- 修复网易云KTV嗨榜无法加载的问题
+- 修复初始化搜索历史列表功能
+- 修复重启软件后试听列表与收藏列表无法恢复上次的滚动位置的问题
+- 修复歌曲封面无法嵌入的Bug
+- 修复酷狗歌词格式问题
+- 修复关闭切换动画时从搜索候选列表点击内容无效的问题
+
+### 其他
+
+- 更新 Electron 到 v10.1.3
+
 ## [1.1.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.1.0...v1.1.1) - 2020-09-19
 
 ### 修复

FAQ.md

@@ -2,7 +2,7 @@
 
 在阅读本常见问题后，仍然无法解决你的问题，请提交issue或者加企鹅群`830125506`反馈（无事勿加，入群先看群公告），反馈时请**注明**已阅读常见问题！
 
-## 软件为什么没有桌面歌词与自定义列表功能
+## ~~软件为什么没有桌面歌词与自定义列表功能~~
 
 洛雪音乐的最初定位不是作为播放器开发的，它主要用于**查找歌曲**，软件的播放功能仅用于试听，不建议用作为常用播放器使用。
 
@@ -13,7 +13,7 @@
 1. 尝试更新到最新版本
 2. 尝试切换其他歌曲（或直接搜索该歌曲），若全部歌曲都无法试听与下载则进行下一步
 3. 尝试到 设置-音乐来源 切换到其他接口
-4. 尝试切换网络，比如用手机开热点（目前存在某些网络无法访问接口服务器的情况）
+4. 尝试切换网络，比如用手机开热点（所有歌曲都提示请求异常时可通过此方法解决，或等一两天后再试）
 5. 若还不行请到这个链接查看详情：<https://github.com/lyswhut/lx-music-desktop/issues/5>
 6. 若没有在第5条链接中的第一条评论中看到接口无法使用的说明，则应该是你网络无法访问接口服务器的问题，如果接口有问题我会在那里说明。
 
@@ -33,15 +33,71 @@
 
 用`Shift`或`Ctrl`选择时，鼠标点击未选中的内容会将其选中，点击已选择的内容会将其取消选择，若想全部取消选择，在不按`Shift`或`Alt`键的情况下，随意点击列表里的一项内容即可全部取消选择。(P.S：`Ctrl`键对应Mac OS上的`Command`键)
 
+注：选完后可用鼠标右击弹出右键菜单操作已选的内容
+
 ## 播放整个歌单或排行榜
 
 播放在线列表内的歌曲需要将它们都添加到我的列表才能播放，你可以全选列表内的歌曲然后添加到现有列表或者新创建的列表，然后去播放该列表内的歌曲。
 
+## 无法打开外部歌单
+
+不支持垮源打开歌单，请**确认**你需要打开的歌单平台是否与软件标签所写的**歌单源**对应（不一样的话请通过右上角切换歌单源）；<br>
+对于分享出来的歌单，若打开失败，可尝试先在浏览器中打开后，再从浏览器地址栏复制URL地址到软件打开；<br>
+或者如果你知道歌单 id 也可以直接输入歌单 id 打开。<br>
+
+## 界面异常（界面显示不完整）
+
+### Windows 7 下界面异常
+
+由于软件默认使用了透明窗口，根据Electron官方文档的[说明](https://electronjs.org/docs/api/frameless-window#%E5%B1%80%E9%99%90%E6%80%A7)：
+> 在 windows 操作系统上, 当 DWM 被禁用时, 透明窗口将无法工作。
+
+因此，当 win7 没有使用**AERO**主题时界面将会显示异常，开启AERO的方法请自行百度：`win7开启aero效果`（开启后可看到任务栏变透明）。<br>
+从`0.14.0`版本起不再强制要求开启透明效果，若你实在不想开启（若非电脑配置太低，墙裂建议开启！），可通过添加运行参数`-dt`来运行程序即可，例如：`.\lx-music-desktop.exe -dt`，添加方法可自行百度“给快捷方式加参数”，该参数的作用是用来控制程序是否使用非透明窗口运行。
+
+对于一些完全无法正常显示界面、开启了AERO后问题仍未解决的情况，请阅读下面的 **软件启动后，界面无法显示** 解决。
+
+### Linux 下界面异常
+
+根据Electron里issue的[解决方案](https://github.com/electron/electron/issues/2170#issuecomment-736223269)，<br>
+若你遇到透明问题可尝试添加启动参数 `-dha` 来禁用硬件加速，例如：`.\lx-music-desktop.exe -dha`。
+
+注：v1.6.0及之后的版本才支持`-dha`参数
+
+## 软件启动后，界面无法显示
+
+对于软件启动后，可以在任务栏看到软件，但软件界面在桌面上无任何显示，或者整个界面偶尔闪烁的情况。<br>
+原始问题看：<https://github.com/electron/electron/issues/19569#issuecomment-522231083><br>
+解决办法：下载`.NET Framework 4.7.1`或**更高**版本安装即可(建议安装最新版，若安装过程中遇到问题可尝试自行百度解决)。<br>
+微软官方下载地址：<https://dotnet.microsoft.com/download/dotnet-framework><br>
+下载`Runtime(运行时)`版即可，安装完成后可能需要重启才生效。
+
+若还是不行可尝试以下操作：
+
+- 更新显卡驱动
+- 添加启动参数`-dha`运行（添加的方法请自行百度“给快捷方式加参数”）
+- 尝试将绿色版的软件放在**桌面**或**我的文档**运行
+
+## 安装版安装失败，提示安装程序并未成功地运行完成
+
+对于部分电脑出现安装失败的问题，可以做出以下尝试：
+
+- 若你之前可以安装成功，但现在安装失败，就去**控制面板-程序和功能**或用第三方卸载工具看下有没有之前的版本残留，若同时在不同路径下安装了多个版本就可能会出现该问题，这种情况卸载掉所有版本重新安装即可
+- 清理安装路径下的残留文件
+- 清理注册表（建议用清理工具清理）
+
+## 软件无法联网
+
+软件的排行榜、歌单、搜索列表**都**无法加载：
+
+- 检查是否在设置界面开启了代理（当代理乱设置时软件将无法联网）
+- 检查软件是否被第三方软件/防火墙阻止联网
+
 ## 桌面歌词显示异常
 
 ### Windows 7 系统桌面歌词显示异常
 
-Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的**Windows 7 下界面异常（界面显示不完整）**方法解决。
+Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的 **Windows 7 下界面异常（界面显示不完整）** 方法解决。
 
 ### MAC OS 系统、桌面歌词有残留阴影
 
@@ -52,10 +108,24 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的*
 
 ### Linux 系统下桌面歌词窗口异常
 
-目前在 Ubuntu 18.10 下第一次开启桌面歌词时歌词窗口会变白，需要关闭后再开启，
+`v1.2.1`以前的版本在 Ubuntu 18.10 下第一次开启桌面歌词时歌词窗口会变白，需要关闭后再开启，
+`v1.2.1`及之后的版本已修复该问题。
 
-其他 Linux 系统未测试，如有异常也是意料之中，目前不打算去处理 Linux 平台的桌面歌词问题。
+其他 Linux 系统未测试，如有异常也是意料之中，目前不打算去处理 Linux 平台的桌面歌词问题，但你可以尝试按照`Linux 下界面异常`的解决方案去解决。
 
+## 歌曲下载失败
+
+### 提示 `ENOENT: no such file or directory, mkdir`
+
+更换下载歌曲目录即可解决（一般是设置的歌曲下载目录没有读写权限导致的）。
+
+### 提示 `请求异常` 或 `Fail`
+
+尝试更换网络，如切换到移动网络。
+
+### 其他错误
+
+按照前面的 "歌曲无法试听与下载" 方案解决。
 
 ## 软件安装包说明
 
@@ -79,36 +149,11 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的*
 注意：**绿色版**的软件自动更新功能**不可用**，建议使用安装版！！<br>
 注意：**Mac版**、**Linux deb**版不支持自动更新！
 
-## Windows 7 下界面异常（界面显示不完整）
+## 更新已收藏的在线歌单
 
-由于软件默认使用了透明窗口，根据Electron官方文档的[说明](https://electronjs.org/docs/api/frameless-window#%E5%B1%80%E9%99%90%E6%80%A7)：
-> 在 windows 操作系统上, 当 DWM 被禁用时, 透明窗口将无法工作。
+该功能仅对直接从歌单详情页点“收藏”按钮收藏的歌单有效，可右击已收藏的列表名从弹出的菜单中选择“同步”使用该功能，
 
-因此，当 win7 没有使用**AERO**主题时界面将会显示异常，开启AERO的方法请自行百度：`win7开启aero效果`（开启后可看到任务栏变透明）。<br>
-从`0.14.0`版本起不再强制要求开启透明效果，若你实在不想开启（若非电脑配置太低，墙裂建议开启！），可通过添加运行参数`-nt`来运行程序即可，例如：`.\lx-music-desktop.exe -nt`，添加方法可自行百度“给快捷方式加参数”，该参数的作用是用来控制程序是否使用非透明窗口运行。
-
-对于一些完全无法正常显示界面的情况，请阅读下面的 **软件启动后，界面无法显示**
-
-## 软件启动后，界面无法显示
-
-软件启动后，可以在任务栏看到软件，但软件界面在桌面上无任何显示。<br>
-原始问题看：<https://github.com/electron/electron/issues/19569#issuecomment-522231083><br>
-解决办法：下载`.NET Framework 4.7.1`或**更高**版本安装即可(建议安装最新版，若安装过程中遇到问题可尝试自行百度解决)。<br>
-微软官方下载地址：<https://dotnet.microsoft.com/download/dotnet-framework><br>
-下载`Runtime(运行时)`版即可，安装完成后可能需要重启才生效。
-
-若还是不行可尝试以下操作：
-
-- 更新显卡驱动
-- 尝试将绿色版的软件放在**桌面**或**我的文档**运行
-
-## 安装版安装失败，提示安装程序并未成功地运行完成
-
-对于部分电脑出现安装失败的问题，可以做出以下尝试：
-
-- 若你之前可以安装成功，但现在安装失败，就去**控制面板-程序和功能**或用第三方卸载工具看下有没有之前的版本残留，若同时在不同路径下安装了多个版本就可能会出现该问题，这种情况卸载掉所有版本重新安装即可
-- 清理安装路径下的残留文件
-- 清理注册表（建议用清理工具清理）
+需要注意的是：这将会覆盖本地的目标列表，歌曲将被替换成最新的在线列表。
 
 ## 缺少`xxx.dll`
 
@@ -123,18 +168,6 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看下面的*
 尽管如此，但这不意味着软件是100%安全的，由于软件使用了第三方依赖，当这些依赖存在恶意行为时（[供应链攻击](https://docs.microsoft.com/zh-cn/windows/security/threat-protection/intelligence/supply-chain-malware)），软件也将会受到牵连，所以我只能尽量选择使用较多人用、信任度较高的依赖。<br>
 当然，以上说明建立的前提是在你所用的安装包是从**本项目主页上写的链接**下载的，或者有相关能力者还可以下载源代码自己构建安装包。
 
-从`0.17.0`起，由于加入了音频输出设备切换功能，该功能调用了 [MediaDevices.enumerateDevices()](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices)，可能导致安全软件提示洛雪要访问摄像头（目前发现卡巴斯基会提示），但实际上没有用到摄像头，并且摄像头的提示灯也不会亮，你可以选择阻止访问。
+从`v0.17.0`起，由于加入了音频输出设备切换功能，该功能调用了 [MediaDevices.enumerateDevices()](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices)，可能导致安全软件提示洛雪要访问摄像头（目前发现卡巴斯基会提示），但实际上没有用到摄像头，并且摄像头的提示灯也不会亮，你可以选择阻止访问。
 
 最后，若出现杀毒软件报毒、存在恶意行为，请自行判断选择是否继续使用本软件！
-
-## 软件无法联网
-
-软件的排行榜、歌单、搜索列表**都**无法加载：
-
-- 检查是否在设置界面开启了代理（当代理乱设置时软件将无法联网）
-- 检查软件是否被第三方软件/防火墙阻止联网
-
-## 无法打开外部歌单
-
-对于分享出来的歌单，若打开失败，可尝试先在浏览器中打开后，再从浏览器地址栏复制URL地址到软件打开；<br>
-或者如果你知道歌单 id 也可以直接输入歌单 id 打开。<br>

README.md

@@ -36,7 +36,7 @@
 
 所用技术栈：
 
-- Electron 10
+- Electron 9
 - Vue 2
 
 已支持的平台：
@@ -62,7 +62,7 @@ npm run dev
 npm run pack:dir
 
 # 构建安装包（Windows版）
-npm run pack
+npm run pack:win
 
 # 构建安装包（Mac版）
 npm run pack:mac
@@ -81,7 +81,8 @@ npm run pack:linux
 目前软件已支持的启动参数如下：
 
 - `-search`  启动软件时自动在搜索框搜索指定的内容，例如：`-search="突然的自我 - 伍佰"`
-- `-nt`  以非透明模式启动，对于未开启AERO效果的win7系统可加此参数启动以确保界面正常显示
+- `-dha`  禁用硬件加速启动（Disable Hardware Acceleration），窗口显示有问题时可以尝试添加此参数启动（v1.6.0起新增）
+- `-dt` 以非透明模式启动（Disable Transparent），对于未开启AERO效果的win7系统可加此参数启动以确保界面正常显示，原来的`-nt`参数已重命名为`-dt`（v1.6.0起重命名）
 
 ### 常见问题
 
@@ -100,7 +101,7 @@ npm run pack:linux
 5. 由于使用本项目产生的包括由于本协议或由于使用或无法使用本项目而引起的任何性质的任何直接、间接、特殊、偶然或结果性损害（包括但不限于因商誉损失、停工、计算机故障或故障引起的损害赔偿，或任何及所有其他商业损害或损失）由使用者负责。
 6. 本项目完全免费，且开源发布于 GitHub 面向全世界人用作对技术的学习交流，本项目不对项目内的技术可能存在违反当地法律法规的行为作保证，**禁止在违反当地法律法规的情况下使用本项目**，对于使用者在明知或不知当地法律法规不允许的情况下使用本项目所造成的任何违法违规行为由使用者承担，本项目不承担由此造成的任何直接、间接、特殊、偶然或结果性责任。
 
-若你使用了本项目，将代表你接收以上协议。
+若你使用了本项目，将代表你接受以上协议。
 
 音乐平台不易，请尊重版权，支持正版。<br>
 若对此有疑问请 mail to: lyswhut+qq.com (请将`+`替换成`@`)

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

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

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

@@ -23,7 +23,7 @@ module.exports = merge(baseConfig, {
       onErrors(severity, errors) { // Silent warning from electron-debug
         if (severity != 'warning') return
 
-        for (let i = errors.length; i > -1; i--) {
+        for (let i = errors.length - 1; i > -1; i--) {
           const error = errors[i]
           if (error.file == './node_modules/electron-debug/index.js') errors.splice(i, 1)
         }

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

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

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

@@ -32,15 +32,11 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"production"',
       },
     }),
-    new webpack.NamedChunksPlugin(),
   ],
   optimization: {
+    chunkIds: 'named',
     minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: false, // set to true if you want JS source maps
-      }),
+      new TerserPlugin(),
       new OptimizeCSSAssetsPlugin({}),
     ],
   },

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

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

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

@@ -32,15 +32,11 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"production"',
       },
     }),
-    new webpack.NamedChunksPlugin(),
   ],
   optimization: {
+    chunkIds: 'named',
     minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: false, // set to true if you want JS source maps
-      }),
+      new TerserPlugin(),
       new OptimizeCSSAssetsPlugin({}),
     ],
   },

jsconfig.json

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

package.json

@@ -1,12 +1,12 @@
 {
   "name": "lx-music-desktop",
-  "version": "1.1.1",
-  "description": "一个免费的音乐下载助手",
+  "version": "1.7.0",
+  "description": "一个免费的音乐查找助手",
   "main": "./dist/electron/main.js",
   "productName": "lx-music-desktop",
   "scripts": {
-    "pack": "node build-config/pack.js && npm run pack:win",
-    "pack:win": "npm run pack:win:setup:x86_64 && npm run pack:win:7z",
+    "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",
@@ -34,16 +34,18 @@
     "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",
+    "publish:linux:deb": "npm run publish:linux:deb:x64 && npm run publish:linux:deb:x86 && npm run publish:linux:deb:arm64",
     "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:rpm": "cross-env ARCH=x64 electron-builder -l=rpm --x64 -p onTagOrDraft",
     "publish:linux:pacman": "cross-env ARCH=x64 electron-builder -l=pacman --x64 -p onTagOrDraft",
     "pack:linux": "node build-config/pack.js && npm run pack:linux:deb && npm run pack:linux:appImage && npm run pack:linux:rpm && npm run pack:linux:pacman",
     "pack:linux:appImage": "cross-env ARCH=x64 electron-builder -l=AppImage",
-    "pack:linux:deb": "npm run pack:linux:deb:x64 && npm run pack:linux:deb:x86",
+    "pack:linux:deb": "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",
@@ -59,7 +61,7 @@
     "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-formatter-friendly --fix src"
   },
   "browserslist": [
-    "Electron 10.1.2"
+    "Electron 9.3.4"
   ],
   "engines": {
     "node": ">= 12"
@@ -158,82 +160,82 @@
   },
   "homepage": "https://github.com/lyswhut/lx-music-desktop#readme",
   "devDependencies": {
-    "@babel/core": "^7.11.6",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-umd": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/polyfill": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
+    "@babel/plugin-transform-modules-umd": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-minify-webpack-plugin": "^0.3.1",
     "babel-preset-minify": "^0.5.1",
-    "cfonts": "^2.8.6",
+    "cfonts": "^2.9.1",
     "chalk": "^4.1.0",
     "changelog-parser": "^2.8.0",
-    "copy-webpack-plugin": "^6.1.1",
-    "core-js": "^3.6.5",
-    "cross-env": "^7.0.2",
+    "copy-webpack-plugin": "^6.4.1",
+    "core-js": "^3.8.3",
+    "cross-env": "^7.0.3",
     "css-loader": "^4.3.0",
-    "del": "^5.1.0",
-    "electron": "^10.1.2",
-    "electron-builder": "^22.8.1",
-    "electron-debug": "^3.1.0",
+    "del": "^6.0.0",
+    "electron": "^9.4.2",
+    "electron-builder": "^22.9.1",
+    "electron-debug": "^3.2.0",
     "electron-devtools-installer": "^3.1.1",
-    "eslint": "^7.9.0",
+    "eslint": "^7.18.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-formatter-friendly": "^7.0.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-html": "^6.1.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-html": "^6.1.1",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "file-loader": "^6.1.0",
+    "eslint-plugin-standard": "^4.1.0",
+    "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "html-webpack-plugin": "^4.4.1",
-    "less": "^3.12.2",
-    "less-loader": "^7.0.1",
-    "markdown-it": "^11.0.1",
-    "mini-css-extract-plugin": "^0.11.2",
+    "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.0.2",
+    "postcss-loader": "^4.2.0",
     "postcss-pxtorem": "^5.1.1",
     "pug": "^3.0.0",
     "pug-loader": "^2.4.0",
-    "pug-plain-loader": "^1.0.0",
-    "raw-loader": "^4.0.1",
+    "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": "^3.0.2",
-    "terser-webpack-plugin": "^4.2.1",
-    "url-loader": "^4.1.0",
-    "vue-loader": "^15.9.3",
+    "stylus-loader": "^4.3.3",
+    "terser-webpack-plugin": "^4.2.3",
+    "url-loader": "^4.1.1",
+    "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.44.2",
+    "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.1.4"
+    "webpack-merge": "^5.7.3"
   },
   "dependencies": {
     "crypto-js": "^4.0.0",
     "dnscache": "^1.0.2",
-    "electron-log": "^4.2.4",
-    "electron-store": "^6.0.0",
+    "electron-log": "^4.3.1",
+    "electron-store": "^6.0.1",
     "electron-updater": "^4.3.5",
     "iconv-lite": "^0.6.2",
-    "image-size": "^0.9.1",
+    "image-size": "^0.9.3",
     "js-htmlencode": "^0.3.0",
     "lrc-file-parser": "^1.0.5",
-    "needle": "^2.5.2",
-    "node-id3": "^0.1.18",
+    "needle": "^2.6.0",
+    "node-id3": "^0.2.2",
     "request": "^2.88.2",
     "vue": "^2.6.12",
-    "vue-i18n": "^8.21.1",
-    "vue-router": "^3.4.3",
-    "vuex": "^3.5.1",
+    "vue-i18n": "^8.22.4",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2",
     "vuex-router-sync": "^5.0.0"
   }
 }

publish/changeLog.md

@@ -1,3 +1,20 @@
+### 新增
+
+- 搜索界面新增搜索状态的提示
+- 新增“稍后播放”功能，可在歌曲列表右键菜单使用
+- 新增“记住播放进度”功能的控制，该功能默认不再开启，可到播放设置-记住播放进度开启
+
+### 优化
+
+- 优化播放歌曲换源匹配
+- 优化设置界面设置项的展示
+
 ### 修复
 
-- 修复某些情况下桌面歌词不会播放的问题
+- 修复快速切换歌曲时, 会出现播放的歌曲和界面展示的歌曲不一致的问题
+- 修复了一个由版本更新日志显示导致的潜在远程代码执行攻击漏洞，该漏洞影响v1.6.1及之前的所有版本，请务必更新到最新版本
+- 修复xm搜索源验证问题
+
+### 其他
+
+- 更新electron到9.4.2

publish/utils/updateChangeLog.js

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

src/common/defaultSetting.js

@@ -1,9 +1,8 @@
 const path = require('path')
 const os = require('os')
-const { isMac } = require('./utils')
 
 const defaultSetting = {
-  version: '1.0.38',
+  version: '1.0.39',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -13,6 +12,7 @@ const defaultSetting = {
     mediaDeviceId: 'default',
     isMediaDeviceRemovedStopPlay: false,
     isShowLyricTransition: true,
+    isSavePlayTime: false,
   },
   desktopLyric: {
     enable: false,
@@ -92,7 +92,7 @@ const defaultSetting = {
   randomAnimate: true,
   ignoreVersion: null,
   isAgreePact: false,
-  controlBtnPosition: isMac ? 'left' : 'right',
+  controlBtnPosition: process.platform === 'darwin' ? 'left' : 'right',
 }
 
 const overwriteSetting = {

src/common/hotKey.js

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

src/common/ipcNames.js

@@ -48,7 +48,6 @@ const names = {
     get_playlist: 'get_playlist',
     save_playlist: 'save_playlist',
     get_data: 'get_data',
-    set_data: 'set_data',
     save_data: 'save_data',
     get_hot_key: 'get_hot_key',
   },

src/common/utils.js

@@ -173,10 +173,11 @@ exports.initSetting = () => {
     // 迁移列表滚动位置设置 ~0.18.3
     if (setting.list.scroll) {
       let scroll = setting.list.scroll
-      electronStore_list.set('defaultList.location', scroll.locations.defaultList || 0)
-      electronStore_list.set('loveList.location', scroll.locations.loveList || 0)
+      electronStore_list.set('defaultList.location', scroll.locations.default || 0)
+      electronStore_list.set('loveList.location', scroll.locations.love || 0)
       electronStore_config.delete('setting.list.scroll')
       electronStore_config.set('setting.list.isSaveScrollLocation', scroll.enable)
+      delete setting.list.scroll
     }
   }
 

src/main/events/MainWindow.js

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

src/main/events/_name.js

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

src/main/events/index.js

@@ -1,4 +1,4 @@
-global.lx_event = {}
+if (!global.lx_event) global.lx_event = {}
 
 const Common = require('./Common')
 const MainWindow = require('./MainWindow')

src/main/index.js

@@ -24,14 +24,20 @@ app.on('second-instance', (event, argv, cwd) => {
 
 const isDev = global.isDev = process.env.NODE_ENV !== 'production'
 require('./env')
+// console.log(global.envParams.cmdParams)
+
+// 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
+// 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')
 
 
-// https://github.com/electron/electron/issues/22691
-app.commandLine.appendSwitch('wm-window-animations-disabled')
-
 // https://github.com/electron/electron/issues/18397
 // 开发模式下为true时 多次引入native模块会导致渲染进程卡死
 // https://github.com/electron/electron/issues/22791
@@ -48,6 +54,7 @@ app.on('web-contents-created', (event, contents) => {
     event.preventDefault()
     if (/^devtools/.test(navigationUrl)) return
     console.log(navigationUrl)
+    if (!/^https?:\/\//.test(navigationUrl)) return
     await shell.openExternal(navigationUrl)
   })
   contents.on('will-attach-webview', (event, webPreferences, params) => {
@@ -82,7 +89,7 @@ if (isDev) {
   winURL = 'http://localhost:9080'
 } else {
   global.__static = path.join(__dirname, '/static')
-  winURL = `file://${__dirname}/index.html`
+  winURL = `file://${path.join(__dirname, 'index.html')}`
 }
 
 function createWindow() {
@@ -95,7 +102,7 @@ function createWindow() {
     useContentSize: true,
     width: windowSizeInfo.width,
     frame: false,
-    transparent: !isLinux && !global.envParams.nt,
+    transparent: !global.envParams.cmdParams.dt,
     enableRemoteModule: false,
     // icon: path.join(global.__static, isWin ? 'icons/256x256.ico' : 'icons/512x512.png'),
     resizable: false,
@@ -124,6 +131,7 @@ global.appHotKey = {
 }
 
 function init() {
+  console.log('init')
   const info = initSetting()
   global.appSetting = info.setting
   global.appSettingVersion = info.version
@@ -133,7 +141,8 @@ function init() {
   createWindow()
 }
 
-app.on('ready', init)
+// https://github.com/electron/electron/issues/16809
+app.on('ready', isLinux ? () => setTimeout(init, 300) : init)
 
 app.on('activate', () => {
   if (global.modules.mainWindow) {

src/main/modules/hotKey/utils.js

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

src/main/modules/tray.js

@@ -1,6 +1,6 @@
 const { app, Tray, Menu } = require('electron')
 const { isWin } = require('../../common/utils')
-const { tray: TRAY_EVENT_NAME, common: COMMON_EVENT_NAME } = require('../events/_name')
+const { tray: TRAY_EVENT_NAME, common: COMMON_EVENT_NAME, mainWindow: MAIN_WINDOW_NAME } = require('../events/_name')
 const path = require('path')
 let isEnableTray = null
 let themeId = null
@@ -29,6 +29,16 @@ global.lx_event.common.on(COMMON_EVENT_NAME.config, sourceName => {
   createMenu(global.modules.tray)
 })
 
+global.lx_event.mainWindow.on(MAIN_WINDOW_NAME.ready_to_show, () => {
+  createMenu(global.modules.tray)
+})
+global.lx_event.mainWindow.on(MAIN_WINDOW_NAME.show, () => {
+  createMenu(global.modules.tray)
+})
+global.lx_event.mainWindow.on(MAIN_WINDOW_NAME.hide, () => {
+  createMenu(global.modules.tray)
+})
+
 const createTray = () => {
   if ((global.modules.tray && !global.modules.tray.isDestroyed()) || !global.appSetting.tray || !global.appSetting.tray.isShow) return
 
@@ -58,8 +68,24 @@ const destroyTray = () => {
 }
 
 const createMenu = tray => {
-  if (!global.modules.tray || !isWin) return
+  if (!global.modules.tray) return
   let menu = []
+  global.modules.mainWindow && menu.push(global.modules.mainWindow.isVisible() ? {
+    label: '隐藏主界面',
+    click() {
+      global.modules.mainWindow.hide()
+    },
+  } : {
+    label: '显示主界面',
+    click() {
+      if (!global.modules.mainWindow) return
+      if (!global.modules.mainWindow.isVisible()) {
+        global.modules.mainWindow.show()
+      }
+      global.modules.mainWindow.restore()
+      global.modules.mainWindow.focus()
+    },
+  })
   menu.push(global.appSetting.desktopLyric.enable ? {
     label: '关闭桌面歌词',
     click() {

src/main/modules/winLyric/event.js

@@ -1,7 +1,7 @@
 const { common: COMMON_EVENT_NAME, winLyric: WIN_LYRIC_EVENT_NAME, hotKey: HOT_KEY_EVENT_NAME, mainWindow: MAIN_WINDOW_EVENT_NAME } = require('../../events/_name')
 const { mainSend, NAMES: { winLyric: ipcWinLyricNames } } = require('../../../common/ipc')
 const { desktop_lyric } = require('../../../common/hotKey')
-const { setLyricWindow } = require('./utils')
+const { getLyricWindowBounds } = require('./utils')
 
 let isLock = null
 let isEnable = null
@@ -27,6 +27,17 @@ const setLrcConfig = () => {
       isAlwaysOnTop = desktopLyric.isAlwaysOnTop
       global.modules.lyricWindow.setAlwaysOnTop(desktopLyric.isAlwaysOnTop, 'screen-saver')
     }
+    if (isLockScreen != desktopLyric.isLockScreen) {
+      isLockScreen = desktopLyric.isLockScreen
+      if (desktopLyric.isLockScreen) {
+        global.modules.lyricWindow.setBounds(getLyricWindowBounds(global.modules.lyricWindow.getBounds(), {
+          x: null,
+          y: null,
+          w: desktopLyric.width,
+          h: desktopLyric.height,
+        }))
+      }
+    }
   }
   if (isEnable != desktopLyric.enable) {
     isEnable = desktopLyric.enable
@@ -36,17 +47,6 @@ const setLrcConfig = () => {
       global.lx_event.winLyric.close()
     }
   }
-  if (isLockScreen != desktopLyric.isLockScreen) {
-    isLockScreen = desktopLyric.isLockScreen
-    if (desktopLyric.isLockScreen) {
-      setLyricWindow({
-        x: desktopLyric.x,
-        y: desktopLyric.y,
-        w: desktopLyric.width,
-        h: desktopLyric.height,
-      })
-    }
-  }
 }
 global.lx_event.common.on(COMMON_EVENT_NAME.config, name => {
   if (WIN_LYRIC_EVENT_NAME.name === name) return

src/main/modules/winLyric/index.js

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

src/main/modules/winLyric/rendererEvent.js

@@ -8,7 +8,7 @@ const {
   },
 } = require('../../../common/ipc')
 const { winLyric: WIN_LYRIC_EVENT_NAME } = require('../../events/_name')
-const { setLyricWindow } = require('./utils')
+const { getLyricWindowBounds } = require('./utils')
 
 mainOn(ipcWinLyricNames.get_lyric_info, (event, action) => {
   if (!global.modules.mainWindow) return
@@ -28,5 +28,5 @@ mainHandle(ipcWinLyricNames.get_lyric_config, async() => {
 })
 
 mainOn(ipcWinLyricNames.set_win_bounds, (event, options) => {
-  setLyricWindow(options)
+  global.modules.lyricWindow.setBounds(getLyricWindowBounds(global.modules.lyricWindow.getBounds(), options))
 })

src/main/modules/winLyric/utils.js

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

src/main/rendererEvents/data.js

@@ -9,4 +9,4 @@ const electronStore_data = new Store({
 mainHandle(ipcMainWindowNames.get_data, async(event, path) => electronStore_data.get(path))
 
 
-mainOn(ipcMainWindowNames.save_data, (event, { path, data }) => electronStore_data.get(path, data))
+mainOn(ipcMainWindowNames.save_data, (event, { path, data }) => electronStore_data.set(path, data))

src/main/rendererEvents/playList.js

@@ -2,15 +2,15 @@ const Store = require('electron-store')
 const { mainOn, NAMES: { mainWindow: ipcMainWindowNames }, mainHandle } = require('../../common/ipc')
 
 
-const electronStore_list = new Store({
-  name: 'playList',
-})
+let electronStore_list
 
 mainHandle(ipcMainWindowNames.get_playlist, async(event, isIgnoredError = false) => {
-  let electronStore_list = new Store({
-    name: 'playList',
-    clearInvalidConfig: !isIgnoredError,
-  })
+  if (!electronStore_list) {
+    electronStore_list = new Store({
+      name: 'playList',
+      clearInvalidConfig: !isIgnoredError,
+    })
+  }
 
   return {
     defaultList: electronStore_list.get('defaultList'),
@@ -20,4 +20,4 @@ mainHandle(ipcMainWindowNames.get_playlist, async(event, isIgnoredError = false)
   }
 })
 
-mainOn(ipcMainWindowNames.save_playlist, (event, { type, data }) => electronStore_list.set(type, data))
+mainOn(ipcMainWindowNames.save_playlist, (event, { type, data }) => electronStore_list && electronStore_list.set(type, data))

src/main/rendererEvents/winEvent.js

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

src/main/rendererEvents/xm_verify/xm_verify_view.js

@@ -32,22 +32,35 @@ mainHandle(ipcMainWindowNames.handle_xm_verify_open, (event, url) => new Promise
       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]) => {
+  // 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
-        await closeView()
-        if (!x5sec) return reject(new Error('get x5sec failed'))
-        resolve(x5sec.value)
-      }).catch(async err => {
-        isActioned = true
-        await closeView()
-        reject(err)
-      })
+        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 })

src/main/utils/flacMeta.js

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

src/main/utils/mp3Meta.js

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

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

@@ -279,7 +279,7 @@ 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.isShowLyricTransition && this.lyrics.tlyric ? (this.lyrics.tlyric + '\n') : '') + (this.lyrics.lyric || ''))
     },
   },
 }

src/renderer/App.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-#container(v-if="isProd && !isNt" :class="theme" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
+#container(v-if="isProd && !isDT && !isLinux" :class="theme" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
   core-aside#left
   #right
     core-toolbar#toolbar
@@ -41,7 +41,8 @@ export default {
   data() {
     return {
       isProd: process.env.NODE_ENV === 'production',
-      isNt: false,
+      isDT: false,
+      isLinux,
       globalObj: {
         apiSource: 'test',
         proxy: {},
@@ -94,14 +95,14 @@ export default {
       })
     }, 1000)
     this.saveSearchHistoryList = throttle(n => {
-      rendererSend(NAMES.mainWindow.set_data, {
+      rendererSend(NAMES.mainWindow.save_data, {
         path: 'searchHistoryList',
         data: n,
       })
     }, 500)
   },
   mounted() {
-    document.body.classList.add(this.isNt ? 'noTransparent' : 'transparent')
+    document.body.classList.add(this.isDT ? 'disableTransparent' : 'transparent')
     window.eventHub.$emit(eventBaseName.bindKey)
     this.init()
   },
@@ -173,6 +174,9 @@ export default {
     ...mapMutations('search', {
       setSearchHistoryList: 'setHistory',
     }),
+    ...mapMutations('player', {
+      setPlayList: 'setList',
+    }),
     init() {
       document.documentElement.style.fontSize = this.windowSizeActive.fontSize
 
@@ -250,12 +254,12 @@ export default {
       music.init()
     },
     enableIgnoreMouseEvents() {
-      if (this.isNt) return
+      if (this.isDT) return
       rendererSend(NAMES.mainWindow.set_ignore_mouse_events, false)
       // console.log('content enable')
     },
     dieableIgnoreMouseEvents() {
-      if (this.isNt) return
+      if (this.isDT) return
       // console.log('content disable')
       rendererSend(NAMES.mainWindow.set_ignore_mouse_events, true)
     },
@@ -269,12 +273,27 @@ export default {
       getPlayList().then(({ defaultList, loveList, userList, downloadList }) => {
         if (!defaultList) defaultList = this.defaultList
         if (!loveList) loveList = this.loveList
-        if (!userList) userList = this.userList
+        if (userList) {
+          let needSave = false
+          const getListId = id => id.includes('.') ? getListId(id.substring(0, id.lastIndexOf('_'))) : id
+          userList.forEach(l => {
+            if (!l.id.includes('__') || l.source) return
+            let [source, id] = l.id.split('__')
+            id = getListId(id)
+            l.source = source
+            l.sourceListId = id
+            if (!needSave) needSave = true
+          })
+          if (needSave) this.saveUserList(userList)
+        } else {
+          userList = this.userList
+        }
 
         if (!defaultList.list) defaultList.list = []
         if (!loveList.list) loveList.list = []
         this.initList({ defaultList, loveList, userList })
         this.initDownloadList(downloadList) // 初始化下载列表
+        this.initPlayInfo()
       })
     },
     initDownloadList(downloadList) {
@@ -292,12 +311,35 @@ export default {
       rendererInvoke(NAMES.mainWindow.get_data, 'searchHistoryList').then(historyList => {
         if (historyList == null) {
           historyList = []
-          rendererInvoke(NAMES.mainWindow.set_data, { path: 'searchHistoryList', data: historyList })
+          rendererSend(NAMES.mainWindow.save_data, { path: 'searchHistoryList', data: historyList })
         } else {
           this.setSearchHistoryList(historyList)
         }
       })
     },
+    initPlayInfo() {
+      rendererInvoke(NAMES.mainWindow.get_data, 'playInfo').then(info => {
+        // console.log(info, window.allList)
+        window.restorePlayInfo = null
+        if (!info) return
+        if (info.index < 0) return
+        if (info.listId) {
+          const list = window.allList[info.listId]
+          // console.log(list)
+          if (!list) return
+          info.list = list.list
+        }
+
+        window.restorePlayInfo = info
+        this.setPlayList({
+          list: {
+            list: info.list,
+            id: info.listId,
+          },
+          index: info.index,
+        })
+      })
+    },
     showUpdateModal() {
       (this.version.newVersion && this.version.newVersion.history
         ? Promise.resolve(this.version.newVersion)
@@ -338,12 +380,12 @@ export default {
     },
     handleEnvParamsInit(envParams) {
       this.envParams = envParams
-      this.isNt = isLinux || this.envParams.nt
-      if (this.isNt) {
+      this.isDT = this.envParams.dt
+      if (this.isDT) {
         document.body.classList.remove('transparent')
-        document.body.classList.add('noTransparent')
+        document.body.classList.add('disableTransparent')
       }
-      if (this.isProd && !this.isNt) {
+      if (this.isProd && !this.isDT && !this.isLinux) {
         document.body.addEventListener('mouseenter', this.dieableIgnoreMouseEvents)
         document.body.addEventListener('mouseleave', this.enableIgnoreMouseEvents)
       }
@@ -413,8 +455,13 @@ body {
     background-color: transparent;
   }
 }
-.noTransparent {
+.disableTransparent {
   background-color: #fff;
+
+  #right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 }
 
 #container {

src/renderer/assets/styles/animate.less

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

src/renderer/assets/styles/variables.less

@@ -23,6 +23,7 @@
 @color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
 // @color-theme_2-line: transparent;
 @color-theme_2-line: lighten(@color-theme, 35%);
+@color-reply-floor: fadeout(@color-theme, 95%);
 @color-theme-sidebar: @color-theme;
 @color-btn: lighten(@color-theme, 5%);
 @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
@@ -91,6 +92,7 @@
 @color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
 // @color-green-theme_2-line: transparent;
 @color-green-theme_2-line: lighten(@color-green-theme, 45%);
+@color-green-reply-floor: fadeout(@color-green-theme, 95%);
 @color-green-theme-sidebar: @color-green-theme;
 @color-green-btn: lighten(@color-green-theme, 5%);
 @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
@@ -148,6 +150,7 @@
 @color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
 // @color-yellow-theme_2-line: transparent;
 @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
+@color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
 @color-yellow-theme-sidebar: @color-yellow-theme;
 @color-yellow-btn: darken(@color-yellow-theme, 5%);
 @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
@@ -204,6 +207,7 @@
 @color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
 // @color-orange-theme_2-line: transparent;
 @color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
+@color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
 @color-orange-theme-sidebar: @color-orange-theme;
 @color-orange-btn: lighten(@color-orange-theme, 5%);
 @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
@@ -260,6 +264,7 @@
 @color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
 // @color-blue-theme_2-line: transparent;
 @color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
+@color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
 @color-blue-theme-sidebar: @color-blue-theme;
 @color-blue-btn: lighten(@color-blue-theme, 5%);
 @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
@@ -316,6 +321,7 @@
 @color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
 // @color-red-theme_2-line: transparent;
 @color-red-theme_2-line: lighten(@color-red-theme, 42%);
+@color-red-reply-floor: fadeout(@color-red-theme, 95%);
 @color-red-theme-sidebar: @color-red-theme;
 @color-red-btn: lighten(@color-red-theme, 5%);
 @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
@@ -374,6 +380,7 @@
 @color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
 // @color-pink-theme_2-line: transparent;
 @color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
+@color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
 @color-pink-theme-sidebar: @color-pink-theme;
 @color-pink-btn: darken(@color-pink-theme, 3%);
 @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
@@ -430,6 +437,7 @@
 @color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
 // @color-purple-theme_2-line: transparent;
 @color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
+@color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
 @color-purple-theme-sidebar: @color-purple-theme;
 @color-purple-btn: lighten(@color-purple-theme, 5%);
 @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
@@ -486,6 +494,7 @@
 @color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
 // @color-grey-theme_2-line: transparent;
 @color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
+@color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
 @color-grey-theme-sidebar: @color-grey-theme;
 @color-grey-btn: lighten(@color-grey-theme, 5%);
 @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
@@ -543,6 +552,7 @@
 @color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
 // @color-ming-theme_2-line: transparent;
 @color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
+@color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
 @color-ming-theme-sidebar: @color-ming-theme;
 @color-ming-btn: lighten(@color-ming-theme, 5%);
 @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
@@ -602,6 +612,7 @@
 @color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
 // @color-blue2-theme_2-line: transparent;
 @color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
+@color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);
 @color-blue2-theme-sidebar: @color-blue2-theme;
 @color-blue2-btn: lighten(@color-blue2-theme, 5%);
 @color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
@@ -651,7 +662,7 @@
 @color-mid_autumn-theme-font: rgba(246, 233, 255, 0.9);
 @color-mid_autumn-theme-font-label: fadeout(lighten(@color-mid_autumn-theme, 20%), 20%);
 @color-mid_autumn-theme_2: rgba(255, 255, 255, .9);
-@color-mid_autumn-theme_2-background_1: #e7e7e9;
+@color-mid_autumn-theme_2-background_1: #ececec;
 @color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%);
 @color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
 @color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
@@ -659,6 +670,7 @@
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
 @color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%);
+@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -716,6 +728,7 @@
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
 @color-mid_autumn-theme_2-line: darken(@color-mid_autumn-theme, 18%);
+@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: darken(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -772,6 +785,7 @@
 @color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
 // @color-naruto-theme_2-line: transparent;
 @color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
+@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 12%), 90%);
 @color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
 @color-naruto-btn: lighten(@color-naruto-theme, 2%);
 @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
@@ -828,6 +842,7 @@
 @color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
 // @color-happy_new_year-theme_2-line: transparent;
 @color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
+@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 12%), 85%);
 @color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1);
 @color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%);
 @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);

src/renderer/components/core/Aside.vue

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

src/renderer/components/core/Icons.vue

@@ -75,8 +75,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       // 0 0 512 512
       path(d='M511.563,434.259c-1.728-142.329-124.42-258.242-277.087-263.419V95.999c0-17.645-14.342-31.999-31.974-31.999 c-7.931,0-15.591,3.042-21.524,8.562c0,0-134.828,124.829-173.609,163.755C2.623,241.109,0,248.088,0,255.994 c0,7.906,2.623,14.885,7.369,19.687c38.781,38.915,173.609,163.745,173.609,163.745c5.933,5.521,13.593,8.562,21.524,8.562 c17.631,0,31.974-14.354,31.974-31.999v-74.591c153.479,2.156,255.792,50.603,255.792,95.924c0,5.896,4.767,10.666,10.658,10.666 c0.167,0.021,0.333,0.01,0.416,0c5.891,0,10.658-4.771,10.658-10.666C512,436.259,511.854,435.228,511.563,434.259z')
     g#icon-refresh(fill='currentColor')
-      // 0 0 512 512
-      path(d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z')
+      // 0 0 24 24
+      path(d='M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z')
     g#icon-eraser(fill='currentColor')
       // 0 0 512 512
       path(d='M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z')
@@ -206,5 +206,16 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       path(d='M256,170s-62.469-76.808-141-24C44.762,222.824,84.909,325.08,256,415c21.339-8.361,44-17,44-17,19-6.392,28.155,20.742,16,26-27.589,11.935,5.974-4.141-60,28C-35.524,313.85,43.993,149.031,95,117c86.8-65.89,162,10,162,10s58.158-60.523,140-23c104.032,58.528,64,161.9,45,196-9.152,15.154-39.559-4.159-32-16,20.34-37.888,45.522-107.349-25-150C314.919,103.92,256,170,256,170Z')
       path(d='M383,368c-8.1.01-24.77-.155-40,0-15.713.16-15.282,34.964,0,35,15.1,0.035,40,0,40,0s-0.068,42.8,0,48c0.208,15.961,32.261,15.791,32-1-0.072-4.649,0-47,0-47s38.008-.031,43,0c15.732,0.046,14.947-33.98-1-34-4.884.093-42,0-42,0s-0.053-28.341,0-46c0.046-15.189-32.028-15.512-32,0C383.027,337.74,382.782,365.139,383,368Z')
 
+    g#icon-thumbs-up(fill='currentColor')
+      // 0 0 512 512
+      path(d='M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z')
+
+    g#icon-close(fill='currentColor')
+      // 0 0 24 24
+      path(d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
+
+    g#icon-comment(fill='currentColor')
+      // 0 0 24 24
+      path(d='M16 11H8V9H16V11M22 4V16C22 17.11 21.11 18 20 18H13.9L10.2 21.71C10 21.9 9.75 22 9.5 22H9C8.45 22 8 21.55 8 21V18H4C2.9 18 2 17.11 2 16V4C2 2.89 2.9 2 4 2H20C21.11 2 22 2.9 22 4M20 4H4V16H10V19.08L13.08 16H20V4')
 </template>
 

src/renderer/components/core/Player.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div(:class="$style.player")
-  div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail")
+  div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail" :tips="$t('core.player.pic_tip')")
     img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError")
     svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
       use(:xlink:href='`#${$style.iconPic}`')
@@ -8,19 +8,19 @@ div(:class="$style.player")
     div(:class="$style.middleContainer" v-if="!isShowPlayerDetail")
       div(:class="$style.column1")
         div(:class="$style.container")
-          div(:class="$style.title" @click="handleCopy(title)" :title="title + $t('core.player.copy_title')") {{title}}
+          div(:class="$style.title" @click="handleCopy(title)" :tips="title + $t('core.player.copy_title')") {{title}}
           div(:class="$style.controlBtn")
 
             div(:class="$style.volumeContent")
               div(:class="[$style.volume, setting.player.isMute ? $style.muted : null]")
                 div(:class="$style.volumeBar" :style="{ transform: `scaleX(${volume || 0})` }")
-              div(:class="$style.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :title="`${$t('core.player.volume')}${parseInt(volume * 100)}%`")
-            div(:class="$style.titleBtn" @click='toggleDesktopLyric' :title="setting.desktopLyric.enable ? $t('core.player.desktop_lyric_off') : $t('core.player.desktop_lyric_on')")
+              div(:class="$style.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :tips="`${$t('core.player.volume')}${parseInt(volume * 100)}%`")
+            div(:class="$style.titleBtn" @click='toggleDesktopLyric' @contextmenu="handleToggleLockDesktopLyric" :tips="toggleDesktopLyricBtnTitle")
               svg(v-if="setting.desktopLyric.enable" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
-                use(xlink:href='#icon-desktop-lyric-off')
-              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
                 use(xlink:href='#icon-desktop-lyric-on')
-            div(:class="$style.titleBtn" @click='toggleNextPlayMode' :title="nextTogglePlayName")
+              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
+                use(xlink:href='#icon-desktop-lyric-off')
+            div(:class="$style.titleBtn" @click='toggleNextPlayMode' :tips="nextTogglePlayName")
               svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='80%' viewBox='0 0 24 24' space='preserve')
                 use(xlink:href='#icon-list-loop')
               svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
@@ -31,10 +31,10 @@ div(:class="$style.player")
                 use(xlink:href='#icon-single-loop')
               svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
                 use(xlink:href='#icon-single')
-            div(:class="$style.titleBtn" @click='addMusicTo' :title="$t('core.player.add_music_to')")
+            div(:class="$style.titleBtn" @click='addMusicTo' :tips="$t('core.player.add_music_to')")
               svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='80%' viewBox='0 0 512 512' space='preserve')
                 use(xlink:href='#icon-add-2')
-          //- div(:class="$style.playBtn" @click='handleNext' title="音量")
+          //- div(:class="$style.playBtn" @click='playNext' tips="音量")
             svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve')
               use(xlink:href='#icon-sound')
 
@@ -49,24 +49,26 @@ div(:class="$style.player")
         span(style="margin: 0 5px;") /
         span {{maxPlayTimeStr}}
   div(:class="$style.right")
-    div(:class="$style.playBtn" @click='handlePrev' :title="$t('core.player.next')" style="transform: rotate(180deg);")
+    div(:class="$style.playBtn" @click='playPrev' :tips="$t('core.player.prev')" style="transform: rotate(180deg);")
       svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
         use(xlink:href='#icon-nextMusic')
-    div(:class="$style.playBtn" :title="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click='togglePlay')
+    div(:class="$style.playBtn" :tips="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click='togglePlay')
       svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
         use(xlink:href='#icon-pause')
       svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
         use(xlink:href='#icon-play')
-    div(:class="$style.playBtn" @click='handleNext' :title="$t('core.player.next')")
+    div(:class="$style.playBtn" @click='playNext' :tips="$t('core.player.next')")
       svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
         use(xlink:href='#icon-nextMusic')
   //- transition(enter-active-class="animated lightSpeedIn"
   transition(enter-active-class="animated lightSpeedIn"
       leave-active-class="animated slideOutDown")
-    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="musicInfo"
+    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
                       :lyric="lyric" :list="list" :listId="listId"
                       :playInfo="{ nowPlayTimeStr, maxPlayTimeStr, progress, nowPlayTime, status }"
-                      :isPlay="isPlay" @action="handlePlayDetailAction")
+                      :isPlay="isPlay" @action="handlePlayDetailAction"
+                      :nextTogglePlayName="nextTogglePlayName"
+                      @toggle-next-play-mode="toggleNextPlayMode" @add-music-to="addMusicTo")
 
   material-list-add-modal(:show="isShowAddMusicTo" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong" @close="isShowAddMusicTo = false")
   svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style="display: none;")
@@ -85,11 +87,11 @@ div(:class="$style.player")
 <script>
 import Lyric from 'lrc-file-parser'
 import { rendererSend, rendererOn, NAMES } from '../../../common/ipc'
-import { formatPlayTime2, getRandom, checkPath, setTitle, clipboardWriteText, debounce, assertApiSupport } from '../../utils'
+import { formatPlayTime2, getRandom, checkPath, setTitle, clipboardWriteText, debounce, throttle, assertApiSupport } from '../../utils'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import { requestMsg } from '../../utils/message'
-import { isMac } from '../../../common/utils'
 import { player as eventPlayerNames } from '../../../common/hotKey'
+import musicSdk from '@renderer/utils/music'
 import path from 'path'
 
 let audio
@@ -104,7 +106,6 @@ const playNextModes = [
 export default {
   data() {
     return {
-      show: true,
       volume: 0,
       nowPlayTime: 0,
       maxPlayTime: 0,
@@ -120,7 +121,6 @@ export default {
         singer: '',
         album: '',
       },
-      targetSong: null,
       pregessWidth: 0,
       lyric: {
         lines: [],
@@ -128,9 +128,8 @@ export default {
         line: 0,
       },
       delayNextTimeout: null,
-      audioErrorTime: 0,
+      restorePlayTime: 0,
       retryNum: 0,
-      isMac,
       volumeEvent: {
         isMsDown: false,
         msDownX: 0,
@@ -146,10 +145,19 @@ export default {
   },
   computed: {
     ...mapGetters(['setting']),
-    ...mapGetters('player', ['list', 'playIndex', 'changePlay', 'listId', 'isShowPlayerDetail', 'playedList']),
+    ...mapGetters('player', ['list', 'changePlay', 'playMusicInfo', 'isShowPlayerDetail', 'playInfo', 'playedList']),
     // pic() {
     //   return this.musicInfo.img ? this.musicInfo.img : ''
     // },
+    listId() { // 当前播放歌曲的列表ID
+      return this.playInfo.listId
+    },
+    playIndex() { // 当前播放歌曲所在列表的 播放列表的播放位置
+      return this.playInfo.playIndex
+    },
+    targetSong() {
+      return this.playInfo.musicInfo
+    },
     title() {
       return this.musicInfo.name
         ? this.setting.download.fileName.replace('歌名', this.musicInfo.name).replace('歌手', this.musicInfo.singer)
@@ -173,6 +181,17 @@ export default {
         default: return this.$t('core.player.play_toggle_mode_off')
       }
     },
+    toggleDesktopLyricBtnTitle() {
+      return `${
+        this.setting.desktopLyric.enable
+          ? this.$t('core.player.desktop_lyric_off')
+          : this.$t('core.player.desktop_lyric_on')
+      }（${
+        this.setting.desktopLyric.isLock
+          ? this.$t('core.player.desktop_lyric_unlock')
+          : this.$t('core.player.desktop_lyric_lock')
+      }）`
+    },
   },
   mounted() {
     this.init()
@@ -182,6 +201,12 @@ export default {
     this.handleSaveVolume = debounce(volume => {
       this.setVolume(volume)
     }, 300)
+    this.savePlayInfo = throttle(n => {
+      rendererSend(NAMES.mainWindow.save_data, {
+        path: 'playInfo',
+        data: n,
+      })
+    }, 2000)
 
     rendererOn(NAMES.mainWindow.get_lyric_info, (event, info) => {
       switch (info.action) {
@@ -225,17 +250,21 @@ export default {
   watch: {
     changePlay(n) {
       if (!n) return
+      this.resetChangePlay()
+      if (window.restorePlayInfo) {
+        this.handleRestorePlay(window.restorePlayInfo)
+        window.restorePlayInfo = null
+        return
+      }
       // console.log('changePlay')
       this.handleRemoveMusic()
-      this.resetChangePlay()
-      if (this.playIndex < 0) return
-      this.stopPlay()
+      if (!this.playInfo.musicInfo) return
       this.play()
     },
     'setting.player.togglePlayMethod'(n) {
       audio.loop = n === 'singleLoop'
       if (this.playedList.length) this.clearPlayedList()
-      if (n == 'random' && this.playIndex > -1) this.setPlayedList(this.list[this.playIndex])
+      if (n == 'random') this.setPlayedList(this.playMusicInfo)
     },
     'setting.player.isMute'(n) {
       audio.muted = n
@@ -254,13 +283,13 @@ export default {
         if (index < 0) {
           // console.log(this.playIndex)
           if (n.length) {
-            this.fixPlayIndex(this.playIndex - 1)
-            this.handleNext()
+            this.setPlayIndex(this.playInfo.listPlayIndex - 1)
+            this.playNext()
           } else {
-            this.setPlayIndex(-1)
+            this.setPlayMusicInfo(null)
           }
         } else {
-          this.fixPlayIndex(index)
+          this.setPlayIndex(index)
         }
         // console.log(this.playIndex)
       }
@@ -274,28 +303,47 @@ export default {
     },
     nowPlayTime(n, o) {
       if (Math.abs(n - o) > 2) this.isActiveTransition = true
+      if (this.setting.player.isSavePlayTime && !this.playInfo.isTempPlay) {
+        this.savePlayInfo({
+          time: n,
+          maxTime: this.maxPlayTime,
+          listId: this.listId,
+          list: this.listId == null ? this.list : null,
+          index: this.playIndex,
+        })
+      }
+    },
+    maxPlayTime(maxPlayTime) {
+      if (!this.playInfo.isTempPlay) {
+        this.savePlayInfo({
+          time: this.nowPlayTime,
+          maxTime: maxPlayTime,
+          listId: this.listId,
+          list: this.listId == null ? this.list : null,
+          index: this.playIndex,
+        })
+      }
     },
   },
   methods: {
-    ...mapActions('player', ['getUrl', 'getPic', 'getLrc']),
+    ...mapActions('player', ['getUrl', 'getPic', 'getLrc', 'playPrev', 'playNext']),
     ...mapMutations('player', [
+      'setPlayMusicInfo',
       'setPlayIndex',
-      'fixPlayIndex',
       'resetChangePlay',
       'visiblePlayerDetail',
       'clearPlayedList',
       'setPlayedList',
-      'removePlayedList',
     ]),
-    ...mapMutations(['setVolume', 'setPlayNextMode', 'setVisibleDesktopLyric']),
+    ...mapMutations(['setVolume', 'setPlayNextMode', 'setVisibleDesktopLyric', 'setLockDesktopLyric']),
     ...mapMutations('list', ['updateMusicInfo']),
     ...mapMutations(['setMediaDeviceId']),
     handleRegisterEvent(action) {
       let eventHub = window.eventHub
       let name = action == 'on' ? '$on' : '$off'
       eventHub[name](eventPlayerNames.toggle_play.action, this.togglePlay)
-      eventHub[name](eventPlayerNames.next.action, this.handleNext)
-      eventHub[name](eventPlayerNames.prev.action, this.handlePrev)
+      eventHub[name](eventPlayerNames.next.action, this.playNext)
+      eventHub[name](eventPlayerNames.prev.action, this.playPrev)
       eventHub[name](eventPlayerNames.volume_up.action, this.handleSetVolumeUp)
       eventHub[name](eventPlayerNames.volume_down.action, this.handleSetVolumeDown)
       eventHub[name](eventPlayerNames.volume_mute.action, this.handleSetVolumeMute)
@@ -326,18 +374,19 @@ export default {
         console.log('播放完毕')
         this.stopPlay()
         this.status = this.statusText = this.$t('core.player.end')
-        this.handleNext()
+        this.playNext()
       })
       audio.addEventListener('error', () => {
         // console.log('code', audio.error)
         if (!this.musicInfo.songmid) return
         console.log('出错')
         this.stopPlay()
+        this.clearLoadingTimeout()
         if (this.listId != 'download' && audio.error.code !== 1 && this.retryNum < 2) { // 若音频URL无效则尝试刷新2次URL
           // console.log(this.retryNum)
-          if (!this.audioErrorTime) this.audioErrorTime = audio.currentTime // 记录出错的播放时间
+          if (!this.restorePlayTime) this.restorePlayTime = audio.currentTime // 记录出错的播放时间
           this.retryNum++
-          this.setUrl(this.list[this.playIndex], true)
+          this.setUrl(this.targetSong, true)
           this.status = this.statusText = this.$t('core.player.refresh_url')
           return
         }
@@ -347,15 +396,21 @@ export default {
         this.addDelayNextTimeout()
       })
       audio.addEventListener('loadeddata', () => {
-        this.maxPlayTime = audio.duration
-        if (this.audioErrorTime) {
-          audio.currentTime = this.audioErrorTime
-          this.audioErrorTime = 0
-        }
-        if (!this.targetSong.interval && this.listId != 'download') this.updateMusicInfo({ id: this.listId, index: this.playIndex, data: { interval: formatPlayTime2(this.maxPlayTime) } })
+        console.log('loadeddata')
+        this.clearLoadingTimeout()
         this.status = this.statusText = this.$t('core.player.loading')
+        this.maxPlayTime = audio.duration
+        if (this.restorePlayTime) {
+          audio.currentTime = this.restorePlayTime
+          this.restorePlayTime = 0
+        }
+        if (!this.targetSong.interval && this.listId != 'download') {
+          this.updateMusicInfo({ id: this.listId, index: this.playIndex, data: { interval: formatPlayTime2(this.maxPlayTime) }, musicInfo: this.targetSong })
+        }
       })
       audio.addEventListener('loadstart', () => {
+        console.log('loadstart')
+        this.startLoadingTimeout()
         this.status = this.statusText = this.$t('core.player.loading')
       })
       audio.addEventListener('canplay', () => {
@@ -365,11 +420,10 @@ export default {
           this.mediaBuffer.playTime = 0
           audio.currentTime = playTime
         }
-        if (this.mediaBuffer.timeout) {
-          this.clearBufferTimeout()
-        }
+        this.clearBufferTimeout()
+
         // if (this.musicInfo.lrc) window.lrc.play(audio.currentTime * 1000)
-        this.status = this.statusText = this.$t('core.player.loading')
+        this.status = this.statusText = ''
       })
       // audio.addEventListener('canplaythrough', () => {
       //   console.log('音乐加载完毕')
@@ -378,6 +432,7 @@ export default {
       // })
       audio.addEventListener('emptied', () => {
         this.mediaBuffer.playTime = 0
+        this.clearLoadingTimeout()
         this.clearBufferTimeout()
 
         // console.log('媒介资源元素突然为空，网络错误 or 切换歌曲？')
@@ -414,18 +469,19 @@ export default {
       this.handleRegisterEvent('on')
     },
     async play() {
-      console.log('play', this.playIndex)
-      this.checkDelayNextTimeout()
-      let targetSong = this.targetSong = this.list[this.playIndex]
-      if (this.setting.player.togglePlayMethod == 'random') this.setPlayedList(targetSong)
+      this.clearDelayNextTimeout()
+
+      const targetSong = this.targetSong
+
+      if (this.setting.player.togglePlayMethod == 'random') this.setPlayedList(this.playMusicInfo)
       this.retryNum = 0
-      this.audioErrorTime = 0
+      this.restorePlayTime = 0
 
       if (this.listId == 'download') {
         const filePath = path.join(this.setting.download.savePath, targetSong.fileName)
         // console.log(filePath)
         if (!await checkPath(filePath) || !targetSong.isComplate || /\.ape$/.test(filePath)) {
-          return this.list.length == 1 ? null : this.handleNext()
+          return this.list.length == 1 ? null : this.playNext()
         }
         this.musicInfo.songmid = targetSong.musicInfo.songmid
         this.musicInfo.singer = targetSong.musicInfo.singer
@@ -436,7 +492,7 @@ export default {
         this.setImg(targetSong.musicInfo)
         this.setLrc(targetSong.musicInfo)
       } else {
-        if (!this.assertApiSupport(targetSong.source)) return this.handleNext()
+        if (!this.assertApiSupport(targetSong.source)) return this.playNext()
         this.musicInfo.songmid = targetSong.songmid
         this.musicInfo.singer = targetSong.singer
         this.musicInfo.name = targetSong.name
@@ -451,8 +507,17 @@ export default {
         name: this.musicInfo.name,
         album: this.musicInfo.album,
       })
+      if (!this.playInfo.isTempPlay) {
+        this.savePlayInfo({
+          time: this.nowPlayTime,
+          maxTime: this.maxPlayTime,
+          listId: this.listId,
+          list: this.listId == null ? this.list : null,
+          index: this.playIndex,
+        })
+      }
     },
-    checkDelayNextTimeout() {
+    clearDelayNextTimeout() {
       // console.log(this.delayNextTimeout)
       if (this.delayNextTimeout) {
         clearTimeout(this.delayNextTimeout)
@@ -460,117 +525,13 @@ export default {
       }
     },
     addDelayNextTimeout() {
-      this.checkDelayNextTimeout()
+      this.clearDelayNextTimeout()
       this.delayNextTimeout = setTimeout(() => {
         this.delayNextTimeout = null
-        this.handleNext()
+        this.playNext()
       }, 5000)
     },
-    async filterList() {
-      // if (this.list.listName === null) return
-      let list
-      let playedList = [...this.playedList]
-      if (this.listId == 'download') {
-        list = []
-        for (const item of this.list) {
-          const filePath = path.join(this.setting.download.savePath, item.fileName)
-          if (!await checkPath(filePath) || !item.isComplate || /\.ape$/.test(filePath)) continue
 
-          let index = playedList.indexOf(item)
-          if (index > -1) {
-            playedList.splice(index, 1)
-            continue
-          }
-          list.push(item)
-        }
-      } else {
-        list = this.list.filter(s => {
-          let index = playedList.indexOf(s)
-          if (index > -1) {
-            playedList.splice(index, 1)
-            return false
-          }
-          return this.assertApiSupport(s.source)
-        })
-      }
-      if (!list.length && this.playedList.length) {
-        this.clearPlayedList()
-        return this.filterList()
-      }
-      return list
-    },
-    async handlePrev() {
-      // console.log(playIndex)
-      if (this.setting.player.togglePlayMethod == 'random' && this.playedList.length) {
-        let index = this.playedList.indexOf(this.targetSong)
-        index -= 1
-        if (index > -1) {
-          let listIndex = this.list.indexOf(this.playedList[index])
-          if (listIndex < 0) {
-            this.removePlayedList(index)
-            return this.handlePrev()
-          }
-          this.setPlayIndex(listIndex)
-          return
-        }
-      }
-      let list = await this.filterList()
-      if (!list.length) return this.setPlayIndex(-1)
-      let playIndex = list.indexOf(this.list[this.playIndex])
-      let index
-      switch (this.setting.player.togglePlayMethod) {
-        case 'random':
-          index = this.hanldeListRandom(list, playIndex)
-          break
-        case 'listLoop':
-        case 'list':
-          index = playIndex === 0 ? list.length - 1 : playIndex - 1
-          break
-        default:
-          return
-      }
-      if (index < 0) return
-      index = this.list.indexOf(list[index])
-      this.setPlayIndex(index)
-    },
-    async handleNext() {
-      // if (this.list.listName === null) return
-      // eslint-disable-next-line no-debugger
-      if (this.setting.player.togglePlayMethod == 'random' && this.playedList.length) {
-        let index = this.playedList.indexOf(this.targetSong)
-        index += 1
-        if (index < this.playedList.length) {
-          let listIndex = this.list.indexOf(this.playedList[index])
-          if (listIndex < 0) {
-            this.removePlayedList(index)
-            return this.handleNext()
-          }
-          this.setPlayIndex(listIndex)
-          return
-        }
-      }
-      let list = await this.filterList()
-      if (!list.length) return this.setPlayIndex(-1)
-      let playIndex = list.indexOf(this.list[this.playIndex])
-      // console.log(playIndex)
-      let index
-      switch (this.setting.player.togglePlayMethod) {
-        case 'listLoop':
-          index = playIndex === list.length - 1 ? 0 : playIndex + 1
-          break
-        case 'random':
-          index = this.hanldeListRandom(list, playIndex)
-          break
-        case 'list':
-          index = playIndex === list.length - 1 ? -1 : playIndex + 1
-          break
-        default:
-          return
-      }
-      if (index < 0) return
-      index = this.list.indexOf(list[index])
-      this.setPlayIndex(index)
-    },
     hanldeListRandom(list, index) {
       return getRandom(0, list.length)
     },
@@ -594,7 +555,7 @@ export default {
     setProgress(pregress) {
       if (!audio.src) return
       const time = pregress * this.maxPlayTime
-      if (this.audioErrorTime) this.audioErrorTime = time
+      if (this.restorePlayTime) this.restorePlayTime = time
       if (this.mediaBuffer.playTime) {
         this.clearBufferTimeout()
         this.mediaBuffer.playTime = time
@@ -610,7 +571,13 @@ export default {
       )
     },
     togglePlay() {
-      if (!audio.src) return
+      if (!audio.src) {
+        if (this.restorePlayTime != null) {
+          if (!this.assertApiSupport(this.targetSong.source)) return this.playNext()
+          this.setUrl(this.targetSong)
+        }
+        return
+      }
       if (this.isPlay) {
         audio.pause()
         this.clearBufferTimeout()
@@ -628,20 +595,40 @@ export default {
       if (highQuality && songInfo._types['320k'] && list && list.includes('320k')) type = '320k'
       return type
     },
-    setUrl(targetSong, isRefresh, isRetryed = false) {
+    setUrl(targetSong, isRefresh, isRetryed = false, retryedSource = [], originMusic = null) {
+      if (!retryedSource.includes(targetSong.source)) retryedSource.push(targetSong.source)
+
       let type = this.getPlayType(this.setting.player.highQuality, targetSong)
       this.musicInfo.url = targetSong.typeUrl[type]
       this.status = this.statusText = this.$t('core.player.geting_url')
 
-      return this.getUrl({ musicInfo: targetSong, type, isRefresh }).then(() => {
-        audio.src = this.musicInfo.url = targetSong.typeUrl[type]
+      return this.getUrl({ musicInfo: targetSong, originMusic, type, isRefresh }).then(url => {
+        if ((targetSong !== this.targetSong && originMusic !== 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)
-        this.status = this.statusText = err.message
-        this.addDelayNextTimeout()
-        return Promise.reject(err)
+        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)
+        })
       })
     },
     setImg(targetSong) {
@@ -654,23 +641,15 @@ export default {
       }
     },
     setLrc(targetSong) {
-      this.musicInfo.lrc = targetSong.lrc
-      this.musicInfo.tlrc = targetSong.tlrc
-
-      let lrcP = this.musicInfo.lrc && this.musicInfo.tlrc != null
-        ? Promise.resolve()
-        : this.getLrc(targetSong).then(() => {
-          this.musicInfo.lrc = targetSong.lrc
-          this.musicInfo.tlrc = targetSong.tlrc
-        })
-
-      lrcP
-        .catch(() => {
-          this.status = this.statusText = this.$t('core.player.lyric_error')
-        }).finally(() => {
-          this.handleUpdateWinLyricInfo('lyric', { lrc: this.musicInfo.lrc, tlrc: this.musicInfo.tlrc })
-          this.setLyric()
-        })
+      this.getLrc(targetSong).then(() => {
+        this.musicInfo.lrc = targetSong.lrc
+        this.musicInfo.tlrc = targetSong.tlrc
+      }).catch(() => {
+        this.status = this.statusText = this.$t('core.player.lyric_error')
+      }).finally(() => {
+        this.handleUpdateWinLyricInfo('lyric', { lrc: this.musicInfo.lrc, tlrc: this.musicInfo.tlrc })
+        this.setLyric()
+      })
     },
     handleRemoveMusic() {
       this.stopPlay()
@@ -681,6 +660,7 @@ export default {
       this.status = this.musicInfo.name = this.musicInfo.singer = ''
       this.musicInfo.songmid = null
       this.musicInfo.lrc = null
+      this.musicInfo.tlrc = null
       this.musicInfo.url = null
       this.nowPlayTime = 0
       this.maxPlayTime = 0
@@ -745,23 +725,36 @@ export default {
       this.setProgressWidth()
     },
     handleToMusicLocation() {
-      if (!this.listId || this.listId == 'download') return
+      if (!this.listId || this.listId == '__temp__' || this.listId == 'download') return
       if (this.playIndex == -1) return
       this.$router.push({
         path: 'list',
         query: {
           id: this.listId,
-          scrollIndex: this.playIndex,
+          scrollIndex: this.playInfo.playIndex,
         },
       })
     },
     showPlayerDetail() {
+      if (!this.targetSong) return
       this.visiblePlayerDetail(true)
     },
     handleTransitionEnd(e) {
       // console.log(e)
       this.isActiveTransition = false
     },
+    startLoadingTimeout() {
+      // console.log('start load timeout')
+      this.loadingTimeout = setTimeout(() => {
+        this.playNext()
+      }, 20000)
+    },
+    clearLoadingTimeout() {
+      if (!this.loadingTimeout) return
+      // console.log('clear load timeout')
+      clearTimeout(this.loadingTimeout)
+      this.loadingTimeout = null
+    },
     startBuffering() {
       console.log('start t')
       if (this.mediaBuffer.timeout) return
@@ -772,7 +765,7 @@ export default {
         if (skipTime > this.maxPlayTime) skipTime = (this.maxPlayTime - audio.currentTime) / 2
         if (skipTime - this.mediaBuffer.playTime < 1 || this.maxPlayTime - skipTime < 1) {
           this.mediaBuffer.playTime = 0
-          this.handleNext()
+          this.playNext()
           return
         }
         this.startBuffering()
@@ -832,13 +825,13 @@ export default {
     handlePlayDetailAction({ type, data }) {
       switch (type) {
         case 'prev':
-          this.handlePrev()
+          this.playPrev()
           break
         case 'togglePlay':
           this.togglePlay()
           break
         case 'next':
-          this.handleNext()
+          this.playNext()
           break
         case 'progress':
           this.setProgress(data)
@@ -858,7 +851,7 @@ 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.isShowLyricTransition && 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)
@@ -867,6 +860,9 @@ export default {
     toggleDesktopLyric() {
       this.setVisibleDesktopLyric(!this.setting.desktopLyric.enable)
     },
+    handleToggleLockDesktopLyric() {
+      this.setLockDesktopLyric(!this.setting.desktopLyric.isLock)
+    },
     toggleNextPlayMode() {
       let index = playNextModes.indexOf(this.setting.player.togglePlayMethod)
       if (++index >= playNextModes.length) index = -1
@@ -876,6 +872,28 @@ export default {
       if (!this.musicInfo.songmid) return
       this.isShowAddMusicTo = true
     },
+    handleRestorePlay(restorePlayInfo) {
+      let musicInfo = this.list[restorePlayInfo.index]
+      this.musicInfo.songmid = musicInfo.songmid
+      this.musicInfo.singer = musicInfo.singer
+      this.musicInfo.name = musicInfo.name
+      this.musicInfo.album = musicInfo.albumName
+      this.setImg(musicInfo)
+      this.setLrc(musicInfo)
+      this.nowPlayTime = this.restorePlayTime = restorePlayInfo.time
+      this.maxPlayTime = restorePlayInfo.maxTime || 0
+      this.handleUpdateWinLyricInfo('music_info', {
+        songmid: this.musicInfo.songmid,
+        singer: this.musicInfo.singer,
+        name: this.musicInfo.name,
+        album: this.musicInfo.album,
+      })
+      this.$nextTick(() => {
+        this.sendProgressEvent(this.progress, 'paused')
+      })
+
+      if (this.setting.player.togglePlayMethod == 'random') this.setPlayedList(this.playMusicInfo)
+    },
   },
 }
 </script>
@@ -1147,6 +1165,7 @@ export default {
   display: flex;
   padding-top: 2px;
   // justify-content: space-between;
+  height: 16px;
   align-items: center;
 }
 

src/renderer/components/core/PlayerDetail.vue

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

src/renderer/components/core/Toolbar.vue

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

src/renderer/components/material/CommentFloor.vue

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

src/renderer/components/material/DownloadModal.vue

@@ -5,7 +5,7 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
       | {{ info.name }}
       br
       | {{ info.singer }}
-    material-btn(:class="$style.btn" v-if="checkSource(type.type)" :title="!checkSource(type.type) && $t('material.download_modal.btn_tip')" :disabled="!checkSource(type.type)" :key="type.type" @click="handleClick(type.type)" v-for="type in info.types") {{getTypeName(type.type)}} {{ type.type.toUpperCase() }}{{ type.size && ` - ${type.size.toUpperCase()}` }}
+    material-btn(:class="$style.btn" v-if="checkSource(type.type)" :tips="!checkSource(type.type) && $t('material.download_modal.btn_tip')" :disabled="!checkSource(type.type)" :key="type.type" @click="handleClick(type.type)" v-for="type in info.types") {{getTypeName(type.type)}} {{ type.type.toUpperCase() }}{{ type.size && ` - ${type.size.toUpperCase()}` }}
 
 </template>
 

src/renderer/components/material/Input.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
-  input(:class="$style.input" :type="type" :placeholder="placeholder" v-model.trim="text" :disabled="disabled"
-    @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="$emit('input', text)" @change="$emit('change', text)"
-    @keyup.enter="$emit('submit', text)")
+  input(:class="$style.input" ref="dom_input" :type="type" :placeholder="placeholder" :value="value" :disabled="disabled"
+    @focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="handleInput" @change="$emit('change', $event.target.value.trim())"
+    @keyup.enter="$emit('submit', $event.target.value.trim())")
 </template>
 
 <script>
@@ -24,19 +24,14 @@ export default {
       default: 'text',
     },
   },
-  data() {
-    return {
-      text: '',
-    }
-  },
-  watch: {
-    value(n) {
-      this.text = n
-    },
-  },
   methods: {
-    handleInput() {
-
+    handleInput(event) {
+      let value = event.target.value.trim()
+      event.target.value = value
+      this.$emit('input', value)
+    },
+    focus() {
+      this.$refs.dom_input.focus()
     },
   },
 }
@@ -56,6 +51,13 @@ export default {
   transition: background-color 0.2s ease;
   background-color: @color-btn-background;
   font-size: 13.3px;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
   &[disabled] {
     opacity: .4;
   }

src/renderer/components/material/ListAddModal.vue

@@ -6,8 +6,8 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
       span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
       |  {{$t('material.list_add_modal.title_last')}}
     div.scroll(:class="$style.btnContent")
-      material-btn(:class="$style.btn" :title="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
-      material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')")
+      material-btn(:class="$style.btn" :tips="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
+      material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('view.list.lists_new_list_btn')")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
           use(xlink:href='#icon-addTo')
         input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")

src/renderer/components/material/ListAddMultipleModal.vue

@@ -3,8 +3,8 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
   main(:class="$style.main")
     h2 {{$t('material.list_add_multiple_modal.' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}
     div.scroll(:class="$style.btnContent")
-      material-btn(:class="$style.btn" :title="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
-      material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')")
+      material-btn(:class="$style.btn" :tips="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
+      material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('view.list.lists_new_list_btn')")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
           use(xlink:href='#icon-addTo')
         input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")

src/renderer/components/material/ListButtons.vue

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

src/renderer/components/material/ListSortModal.vue

@@ -0,0 +1,121 @@
+<template lang="pug">
+material-modal(:show="show" @close="handleClose")
+  main(:class="$style.main")
+    h2 {{selectedNum > 0 ? $t('material.list_sort_modal.title_multiple', { num: selectedNum }) : $t('material.list_sort_modal.title', { name: musicInfo ? musicInfo.name : '' })}}
+    material-input(:class="$style.input" type="number" v-model="sortNum" ref="input" @blur.native="verify" :placeholder="$t('material.list_sort_modal.input_tip')" @keydown.native.enter="handleSubmit")
+    div(:class="$style.footer")
+      material-btn(:class="$style.btn" @click="handleSubmit") {{$t('material.list_sort_modal.btn_confirm')}}
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    musicInfo: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    selectedNum: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      sortNum: '',
+    }
+  },
+  watch: {
+    show(n) {
+      if (n) {
+        this.sortNum = ''
+        this.$nextTick(() => {
+          this.$refs.input.focus()
+        })
+      }
+    },
+  },
+  computed: {
+
+  },
+  methods: {
+    handleClose() {
+      this.$emit('close')
+    },
+    verify() {
+      let num = /^[1-9]\d*/.exec(this.sortNum)
+      num = num ? parseInt(num[0]) : ''
+      this.sortNum = num.toString()
+      return num
+    },
+    handleSubmit() {
+      let num = this.verify()
+      if (this.sortNum == '') return
+      this.$emit('confirm', num)
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.main {
+  padding: 0 15px;
+  max-width: 530px;
+  min-width: 280px;
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 0;
+  // max-height: 100%;
+  // overflow: hidden;
+  h2 {
+    font-size: 13px;
+    color: @color-theme_2-font;
+    line-height: 1.3;
+    word-break: break-all;
+    // text-align: center;
+    padding: 15px 0 8px;
+  }
+}
+
+.input {
+  // width: 100%;
+  // height: 26px;
+  padding: 8px 8px;
+}
+.footer {
+  margin: 20px 0 15px auto;
+}
+.btn {
+  // box-sizing: border-box;
+  // margin-left: 15px;
+  // margin-bottom: 15px;
+  // height: 36px;
+  // line-height: 36px;
+  // padding: 0 10px !important;
+  min-width: 70px;
+  // .mixin-ellipsis-1;
+
+  +.btn {
+    margin-left: 10px;
+  }
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .main {
+      h2 {
+        color: ~'@{color-@{value}-theme_2-font}';
+      }
+    }
+  }
+})
+
+</style>

src/renderer/components/material/Menu.vue

@@ -138,10 +138,10 @@ export default {
   // will-change: transform;
   li {
     cursor: pointer;
-    min-width: 80px;
+    min-width: 96px;
     line-height: 34px;
     // color: @color-btn;
-    padding: 0 5px;
+    padding: 0 10px;
     text-align: center;
     outline: none;
     transition: @transition-theme;

src/renderer/components/material/Modal.vue

@@ -74,9 +74,9 @@ export default {
         'slideOutLeft',
         'slideOutRight',
         'slideOutUp',
-        'hinge',
+        // 'hinge',
       ],
-      inClass: 'animated flipInX',
+      inClass: 'animated jackInTheBox',
       outClass: 'animated flipOutX',
       unwatchFn: null,
     }

src/renderer/components/material/MusicComment.vue

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

src/renderer/components/material/Pagination.vue

@@ -6,20 +6,20 @@ div(:class="$style.pagination" v-if="allPage > 1")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
           use(xlink:href='#icon-left')
     li(v-else)
-      button(type="button" @click="handleClick(page - 1)" :title="$t('material.pagination.prev')")
+      button(type="button" @click="handleClick(page - 1)" :tips="$t('material.pagination.prev')")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
           use(xlink:href='#icon-left')
     li(v-if="allPage > btnLength && page > pageEvg+1" :class="$style.first")
-      button(type="button" @click="handleClick(1)" :title="$t('material.pagination.page', { num: 1 })")
+      button(type="button" @click="handleClick(1)" :tips="$t('material.pagination.page', { num: 1 })")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
           use(xlink:href='#icon-first')
 
     li(v-for="(p, index) in pages" :key="index" :class="{[$style.active] : p == page}")
       span(v-if="p === page" v-text="page")
-      button(v-else type="button" @click="handleClick(p)" v-text="p" :title="$t('material.pagination.page', { num: p })")
+      button(v-else type="button" @click="handleClick(p)" v-text="p" :tips="$t('material.pagination.page', { num: p })")
 
     li(v-if="allPage > btnLength && allPage - page > pageEvg" :class="$style.last")
-      button(type="button" @click="handleClick(allPage)" :title="$t('material.pagination.page', { num: allPage })")
+      button(type="button" @click="handleClick(allPage)" :tips="$t('material.pagination.page', { num: allPage })")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
           use(xlink:href='#icon-last')
 
@@ -29,7 +29,7 @@ div(:class="$style.pagination" v-if="allPage > 1")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
           use(xlink:href='#icon-right')
     li(v-else)
-      button(type="button" @click="handleClick(page + 1)" :title="$t('material.pagination.next')")
+      button(type="button" @click="handleClick(page + 1)" :tips="$t('material.pagination.next')")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
           use(xlink:href='#icon-right')
 

src/renderer/components/material/SearchInput.vue

@@ -94,6 +94,7 @@ export default {
       this.$refs.dom_input.focus()
     },
     handleTemplistClick(index) {
+      console.log(index)
       this.sendEvent('listClick', index)
     },
     handleFocus() {
@@ -101,8 +102,10 @@ export default {
       this.sendEvent('focus')
     },
     handleBlur() {
-      this.focus = false
-      this.sendEvent('blur')
+      setTimeout(() => {
+        this.focus = false
+        this.sendEvent('blur')
+      }, 80)
     },
     handleSearch() {
       this.hideList()

src/renderer/components/material/Selection.vue

@@ -6,7 +6,7 @@
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
           use(xlink:href='#icon-down')
     ul.list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
-      li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
+      li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :tips="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
 </template>
 
 <script>

src/renderer/components/material/SongList.vue

@@ -114,6 +114,11 @@ export default {
           action: 'download',
           disabled: !this.listMenu.itemMenuControl.download,
         },
+        {
+          name: this.$t('material.song_list.list_play_later'),
+          action: 'playLater',
+          disabled: !this.listMenu.itemMenuControl.playLater,
+        },
         {
           name: this.$t('material.song_list.list_search'),
           action: 'search',
@@ -173,6 +178,7 @@ export default {
         itemMenuControl: {
           play: true,
           addTo: true,
+          playLater: true,
           download: true,
           search: true,
           sourceDetail: true,
@@ -335,6 +341,7 @@ export default {
     handleListItemRigthClick(event, index) {
       this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.list[index].source].getMusicDetailPageUrl
       this.listMenu.itemMenuControl.play =
+        this.listMenu.itemMenuControl.playLater =
         this.listMenu.itemMenuControl.download =
         this.assertApiSupport(this.list[index].source)
       let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')

src/renderer/components/material/VersionModal.vue

@@ -3,17 +3,17 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
   main(:class="$style.main" v-if="version.isDownloaded")
     h2 🚀程序更新🚀
 
-    div.scroll(:class="$style.info")
+    div.scroll.select(:class="$style.info")
       div(:class="$style.current")
         h3 最新版本：{{version.newVersion.version}}
         h3 当前版本：{{version.version}}
         h3 版本变化：
-        p(:class="$style.desc" v-html="version.newVersion.desc")
+        pre(:class="$style.desc" v-text="version.newVersion.desc")
       div(:class="[$style.history, $style.desc]" v-if="history.length")
         h3 历史版本：
         div(:class="$style.item" v-for="ver in history")
           h4 v{{ver.version}}
-          p(v-html="ver.desc")
+          pre(v-text="ver.desc")
     div(:class="$style.footer")
       div(:class="$style.desc")
         p 新版本已下载完毕，
@@ -27,28 +27,28 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
   main(:class="$style.main" v-else-if="version.isError && !version.isUnknow && version.newVersion.version != version.version")
     h2 ❌ 版本更新出错 ❌
 
-    div.scroll(:class="$style.info")
+    div.scroll.select(:class="$style.info")
       div(:class="$style.current")
         h3 最新版本：{{version.newVersion.version}}
         h3 当前版本：{{version.version}}
         h3 版本变化：
-        p(:class="$style.desc" v-html="version.newVersion.desc")
+        pre(:class="$style.desc" v-text="version.newVersion.desc")
       div(:class="[$style.history, $style.desc]" v-if="history.length")
         h3 历史版本：
         div(:class="$style.item" v-for="ver in history")
           h4 v{{ver.version}}
-          p(v-html="ver.desc")
+          pre(v-text="ver.desc")
 
     div(:class="$style.footer")
       div(:class="$style.desc")
         p 发现有新版本啦，但是自动更新功能出问题了，
         p
           | 你可以去 
-          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
           |  或 
-          strong.hover.underline(@click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" title="点击打开") 网盘
+          strong.hover.underline(@click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" tips="点击打开") 网盘
           | (密码：
-          strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+          strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
           | ) 下载新版本，
         p
           | 国内Windows/MAC用户推荐到
@@ -58,14 +58,14 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
   main(:class="$style.main" v-else-if="version.isDownloading && version.isTimeOut && !version.isUnknow")
     h2 ❗️ 新版本下载超时 ❗️
     div(:class="$style.desc")
-      p 你当前所在网络访问GitHub较慢，导致新版本下载超时（已经下了半个钟了😳），建议手动更新版本！
+      p 你当前所在网络访问GitHub较慢，导致新版本下载超时（已经下了半个钟了😳），你仍可选择继续等，但墙裂建议手动更新版本！
       p
         | 你可以去
-        material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+        material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
         | 或
-        material-btn(min @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" title="点击打开") 网盘
+        material-btn(min @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" tips="点击打开") 网盘
         | (密码：
-        strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+        strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
         | )下载新版本，
       p
         | 国内Windows/MAC用户推荐到
@@ -75,18 +75,18 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
   main(:class="$style.main" v-else-if="version.isUnknow")
     h2 ❓ 获取最新版本信息失败 ❓
 
-    div.scroll(:class="$style.info")
+    div.scroll.select(:class="$style.info")
       div(:class="$style.current")
         h3 当前版本：{{version.version}}
         div(:class="$style.desc")
           p 更新信息获取失败，可能是无法访问Github导致的，请手动检查更新！
           p
             | 检查方法：打开
-            material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+            material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
             | 或
-            material-btn(min @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" title="点击打开") 网盘
+            material-btn(min @click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" tips="点击打开") 网盘
             | (密码：
-            strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+            strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
             | )查看它们的
             strong 版本号
             | 与当前版本({{version.version}})对比是否一样，
@@ -94,17 +94,17 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
   main(:class="$style.main" v-else)
     h2 🌟发现新版本🌟
 
-    div.scroll(:class="$style.info")
+    div.scroll.select(:class="$style.info")
       div(:class="$style.current")
         h3 最新版本：{{version.newVersion.version}}
         h3 当前版本：{{version.version}}
         h3 版本变化：
-        p(:class="$style.desc" v-html="version.newVersion.desc")
+        pre(:class="$style.desc" v-text="version.newVersion.desc")
       div(:class="[$style.history, $style.desc]" v-if="history.length")
         h3 历史版本：
         div(:class="$style.item" v-for="ver in history")
           h4 v{{ver.version}}
-          p(v-html="ver.desc")
+          pre(v-text="ver.desc")
 
     div(:class="$style.footer")
       div(:class="$style.desc")
@@ -115,11 +115,11 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
           | 重新打开本弹窗。
         p
           | 手动更新可以去 
-          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
           |  或 
-          strong.hover.underline(@click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" title="点击打开") 网盘
+          strong.hover.underline(@click="handleOpenUrl('https://www.lanzoux.com/b0bf2cfa/')" tips="点击打开") 网盘
           | (密码：
-          strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+          strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
           | ) 下载，
         p 国内Windows/MAC用户推荐到网盘下载。
         p 当前下载进度：{{progress}}
@@ -146,7 +146,7 @@ export default {
     progress() {
       return this.version.downloadProgress
         ? `${this.version.downloadProgress.percent.toFixed(2)}% - ${sizeFormate(this.version.downloadProgress.transferred)}/${sizeFormate(this.version.downloadProgress.total)} - ${sizeFormate(this.version.downloadProgress.bytesPerSecond)}/s`
-        : '初始化中...'
+        : '处理更新中...'
     },
     isIgnored() {
       return this.setting.ignoreVersion == this.version.newVersion.version
@@ -207,6 +207,11 @@ export default {
     font-size: 14px;
     line-height: 1.3;
   }
+  pre {
+    white-space: pre-wrap;
+    text-align: justify;
+    margin-top: 10px;
+  }
 }
 
 .info {

src/renderer/lang/en-us/base.json

@@ -0,0 +1,5 @@
+{
+  "date_format_second": "{num} seconds ago",
+  "date_format_minute": "{num} minutes ago",
+  "date_format_hour": "{num} hours ago"
+}

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

@@ -14,16 +14,30 @@
   "buffering": "Buffering...",
   "geting_url": "Getting music link...",
   "lyric_error": "Failed to get lyrics",
-  "hide_detail": "Hide detail page",
+  "hide_detail": "Hide detail page (Right-click in the view to quickly hide the details page)",
   "name": "Name: ",
   "singer": "Artist: ",
   "album": "Album: ",
   "add_music_to": "Add the current song to...",
   "desktop_lyric_on": "Open Desktop Lyrics",
   "desktop_lyric_off": "Close Desktop Lyrics",
+  "desktop_lyric_lock": "Right click to lock lyrics",
+  "desktop_lyric_unlock": "Right click to unlock lyrics",
   "play_toggle_mode_list_loop": "List Loop",
   "play_toggle_mode_random": "List Random",
   "play_toggle_mode_list": "Play in order",
   "play_toggle_mode_single_loop": "Single Loop",
-  "play_toggle_mode_off": "Disable"
+  "play_toggle_mode_off": "Disable",
+  "pic_tip": "Right click to locate the currently playing song in \"My List\"",
+
+  "comment_show": "Song comments",
+  "comment_hot_loading": "Hot comments are loading",
+  "comment_new_loading": "Latest comments are loading",
+  "comment_hot_load_error": "Hot comments failed to load, click to try to reload",
+  "comment_new_load_error": "The latest comment failed to load, click to try to reload",
+  "comment_refresh": "Refresh comments",
+  "comment_no_content": "No comments yet",
+  "comment_hot_title": "Hot Comment",
+  "comment_new_title": "Latest comment",
+  "comment_title": "{name} comment"
 }

src/renderer/lang/en-us/desktopLyric.json

@@ -4,10 +4,10 @@
   "lock": "Lock Lyrics",
   "unlock": "Unlock Lyrics",
   "theme": "Theme Color",
-  "font_increase": "Increase font size",
-  "font_decrease": "Reduce font size",
-  "opactiy_increase": "Decrease Transparency",
-  "opactiy_decrease": "Increase Transparency",
+  "font_increase": "Increase font size (Right click to fine-tune)",
+  "font_decrease": "Reduce font size (Right click to fine-tune)",
+  "opactiy_increase": "Decrease Transparency (Right click to fine-tune)",
+  "opactiy_decrease": "Increase Transparency (Right click to fine-tune)",
   "lrc_active_zoom_on": "Zoom the currently playing lyrics",
   "lrc_active_zoom_off": "Unzoom the currently playing lyrics",
   "win_top_on": "Top lyrics interface",

src/renderer/lang/en-us/material/list_sort_modal.json

@@ -0,0 +1,6 @@
+{
+  "title": "Adjust the position of {name} to:",
+  "title_multiple": "Adjust the position of the selected {num} songs to:",
+  "input_tip": "Please input which position you want to adjust to",
+  "btn_confirm": "Confirm"
+}

src/renderer/lang/en-us/material/song_list.json

@@ -1,5 +1,6 @@
 {
   "list_play": "Play",
+  "list_play_later": "Play later",
   "list_add_to": "Add to ...",
   "list_download": "Download",
   "list_search": "Search",

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

@@ -1,5 +1,6 @@
 {
   "menu_play": "Play",
+  "menu_play_later": "Play later",
   "menu_start": "Start task",
   "menu_pause": "Pause Task",
   "menu_file": "Locate File",

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

@@ -4,12 +4,16 @@
   "lists_rename": "Rename",
   "lists_moveup": "Move Up",
   "lists_movedown": "Move Down",
+  "lists_sync": "Sync",
   "lists_remove": "Remove",
   "list_play": "Play",
+  "list_play_later": "Play later",
   "list_copy_name": "Copy name",
   "list_add_to": "Add to ...",
   "list_move_to": "Move to ...",
+  "list_sort": "Adjust position",
   "list_download": "Download",
+  "list_search": "Search",
   "list_remove": "Remove",
   "list_source_detail": "Song Page",
   "default_list": "Recently Played",

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

@@ -1,5 +1,6 @@
 {
   "list_play": "Play",
+  "list_play_later": "Play later",
   "list_add_to": "Add to ...",
   "list_download": "Download",
   "list_source_detail": "Song Page",
@@ -10,6 +11,7 @@
   "time": "Length",
   "lossless": "SQ",
   "high_quality": "HQ",
+  "loding_list": "Loading...",
   "no_item": "Search what I want to 😉",
   "hot_search": "Top Searches",
   "history_search": "History Searches",

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

@@ -2,7 +2,6 @@
   "basic": "General",
   "basic_theme": "Theme",
   "basic_show_animation": "Show switching animation",
-  "basic_animation_title": "Animation effect of the pop-up layer",
   "basic_animation": "Random pop-up animation",
   "basic_source_title": "Choose a music source",
   "basic_source_test": "Test API (Available for most software features)",
@@ -21,8 +20,7 @@
   "basic_window_size_larger": "Larger",
   "basic_window_size_oversized": "Oversized",
   "basic_window_size_huge": "Huge",
-  "basic_to_tray_title": "Minimize it to the system tray without closing the software when closing",
-  "basic_to_tray": "Minimize to system tray when closing",
+  "basic_to_tray": "Do not exit the software when closing the software and minimize it to the system tray",
   "basic_lang_title": "The language displayed in the software",
   "basic_lang": "Language",
   "basic_control_btn_position": "Control Button Position",
@@ -30,21 +28,13 @@
   "basic_control_btn_position_right": "Right",
 
   "play": "Play",
-  "play_toggle_title": "If none selected, it stopped when the music playing is done.",
-  "play_toggle": "Playback mode",
-  "play_toggle_list_loop": "Playlist repeat",
-  "play_toggle_random": "Playlist shuffle",
-  "play_toggle_list": "Play in order",
-  "play_toggle_single_loop": "Single repeat",
+  "play_save_play_time": "Remember playback progress",
   "play_lyric_transition": "Show lyrics translation",
-  "play_quality_title": "The 320k quality is preferred for playing",
-  "play_quality": "Prefer High Quality 320k",
-  "play_task_bar_title": "Show playing progress on the taskbar",
-  "play_task_bar": "Taskbar play progress bar",
+  "play_quality": "Play 320K quality songs first (if supported)",
+  "play_task_bar": "Show playing progress on the taskbar",
   "play_mediaDevice_title": "Select a media device for audio output",
   "play_mediaDevice": "Audio output",
-  "play_mediaDevice_remove_stop_play": "Whether to pause playback when the audio output device is changed",
-  "play_mediaDevice_remove_stop_play_title": "Whether to pause the song when the current sound output device is changed",
+  "play_mediaDevice_remove_stop_play": "Pause the song when the current sound output device is changed",
 
   "desktop_lyric": "Desktop Lyric Settings",
   "desktop_lyric_enable": "Display lyrics",
@@ -53,18 +43,13 @@
   "desktop_lyric_lock_screen": "It is not allowed to drag the lyrics window out of the main screen",
 
   "search": "Search",
-  "search_hot_title": "Select whether to show popular searches",
   "search_hot": "Top Searches",
-  "search_history_title": "Select whether to show search history",
   "search_history": "Search history",
-  "search_focus_search_box_title": "Whether the search box is automatically focused on startup",
-  "search_focus_search_box": "Whether the search box is focused on startup",
+  "search_focus_search_box": "Automatically focus the search box on startup",
 
   "list": "List",
-  "list_source_title": "Select whether to show music source",
-  "list_source": "Select whether to show music source (for Your Library only)",
-  "list_scroll_title": "Select whether to remember the playlist scrollbar position",
-  "list_scroll": "Remember playlist scrolling position (for Your library only)",
+  "list_source": "Show song source (only valid for my music category)",
+  "list_scroll": "Remember the position of the scroll bar of the playlist (only valid for my music classification)",
 
   "download": "Download",
   "download_enable": "Whether to enable download function",
@@ -106,7 +91,7 @@
   "hot_key_desktop_lyric_toggle_always_top": "Top Desktop Lyrics Switch",
 
   "network": "Network",
-  "network_proxy_title": "Proxy (False setting would block Internet connections)",
+  "network_proxy_title": "HTTP Proxy (False setting would block Internet connections)",
   "network_proxy_host": "Host",
   "network_proxy_port": "Port",
   "network_proxy_username": "Username",
@@ -117,12 +102,12 @@
   "odc_clear_search_list": "Clear the search list when you are not searching",
 
   "backup": "Backup and restore",
-  "backup_part": "Partially",
+  "backup_part": "Partial data (list data includes audition list, favorite list, user-defined list, setting data does not include shortcut key settings)",
   "backup_part_import_list": "Import lists",
   "backup_part_export_list": "Export lists",
   "backup_part_import_setting": "Import settings",
   "backup_part_export_setting": "Export settings",
-  "backup_all": "All (Settings and Recently Played)",
+  "backup_all": "All data (list data and setting data)",
   "backup_all_import": "Import",
   "backup_all_export": "Export",
   "backup_all_import_desc": "Select a backup file",
@@ -150,7 +135,7 @@
   "update_latest": "The software is up-to-date, enjoy yourself!🥂",
   "update_open_version_modal_btn": "Open the update window🚀",
   "update_checking": "Checking for updates...",
-  "update_init": "Initializing update...",
+  "update_init": "Processing update...",
 
   "about": "About lx-music-desktop",
 

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

@@ -8,5 +8,6 @@
   "tip_2": "If you encounter a link to a playlist that cannot be opened, welcome feedback",
   "tip_3": "Kugou source does not support opening with playlist ID, but supports Kugou code opening",
   "play_all": "Play",
+  "play_later": "Play later",
   "add_all": "Collect"
 }

src/renderer/lang/index.js

@@ -1,7 +1,7 @@
 // http://kazupon.github.io/vue-i18n/en/messages.html
 
 const requireLang = require.context(
-  '@/lang',
+  '@renderer/lang',
   true,
   /\.json$/,
 )

src/renderer/lang/zh-cn/base.json

@@ -0,0 +1,5 @@
+{
+  "date_format_second": "{num}秒前",
+  "date_format_minute": "{num}分钟前",
+  "date_format_hour": "{num}小时前"
+}

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

@@ -14,16 +14,30 @@
   "buffering": "缓冲中...",
   "geting_url": "歌曲链接获取中...",
   "lyric_error": "歌词获取失败",
-  "hide_detail": "隐藏详情页",
+  "hide_detail": "隐藏详情页（界面内右键双击可快速隐藏详情页）",
   "name": "歌曲名：",
   "singer": "艺术家：",
   "album": "专辑名：",
   "add_music_to": "添加当前歌曲到...",
   "desktop_lyric_on": "开启桌面歌词",
   "desktop_lyric_off": "关闭桌面歌词",
+  "desktop_lyric_lock": "右击锁定歌词",
+  "desktop_lyric_unlock": "右击解锁歌词",
   "play_toggle_mode_list_loop": "列表循环",
   "play_toggle_mode_random": "列表随机",
   "play_toggle_mode_list": "顺序播放",
   "play_toggle_mode_single_loop": "单曲循环",
-  "play_toggle_mode_off": "禁用"
+  "play_toggle_mode_off": "禁用",
+  "pic_tip": "右击在“我的列表”定位当前播放的歌曲",
+
+  "comment_show": "歌曲评论",
+  "comment_hot_loading": "热门评论加载中",
+  "comment_new_loading": "最新评论加载中",
+  "comment_hot_load_error": "热门评论加载失败，点击尝试重新加载",
+  "comment_new_load_error": "最新评论加载失败，点击尝试重新加载",
+  "comment_refresh": "刷新评论",
+  "comment_no_content": "暂无评论",
+  "comment_hot_title": "热门评论",
+  "comment_new_title": "最新评论",
+  "comment_title": "{name} 的评论"
 }

src/renderer/lang/zh-cn/desktopLyric.json

@@ -4,10 +4,10 @@
   "lock": "锁定歌词",
   "unlock": "解锁歌词",
   "theme": "主题配色",
-  "font_increase": "增加字体大小",
-  "font_decrease": "减小字体大小",
-  "opactiy_increase": "减小透明度",
-  "opactiy_decrease": "增加透明度",
+  "font_increase": "增加字体大小（右击可微调）",
+  "font_decrease": "减小字体大小（右击可微调）",
+  "opactiy_increase": "减小透明度（右击可微调）",
+  "opactiy_decrease": "增加透明度（右击可微调）",
   "lrc_active_zoom_on": "缩放当前播放的歌词",
   "lrc_active_zoom_off": "取消缩放当前播放的歌词",
   "win_top_on": "置顶歌词界面",

src/renderer/lang/zh-cn/material/list_sort_modal.json

@@ -0,0 +1,6 @@
+{
+  "title": "将 {name} 的位置调整到：",
+  "title_multiple": "将已选的 {num} 首歌曲的位置调整到：",
+  "input_tip": "请输入要调整到第几个位置",
+  "btn_confirm": "确定"
+}

src/renderer/lang/zh-cn/material/song_list.json

@@ -1,5 +1,6 @@
 {
   "list_play": "播放",
+  "list_play_later": "稍后播放",
   "list_add_to": "添加到...",
   "list_download": "下载",
   "list_source_detail": "歌曲详情页",

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

@@ -1,5 +1,6 @@
 {
   "menu_play": "播放",
+  "menu_play_later": "稍后播放",
   "menu_start": "开始任务",
   "menu_pause": "暂停任务",
   "menu_file": "定位文件",

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

@@ -4,13 +4,17 @@
   "lists_rename": "重命名",
   "lists_moveup": "上移",
   "lists_movedown": "下移",
+  "lists_sync": "同步",
   "lists_remove": "删除",
   "list_play": "播放",
+  "list_play_later": "稍后播放",
   "list_copy_name": "复制歌曲名",
   "list_source_detail": "歌曲详情页",
   "list_add_to": "添加到...",
   "list_move_to": "移动到...",
+  "list_sort": "调整位置",
   "list_download": "下载",
+  "list_search": "搜索",
   "list_remove": "删除",
   "default_list": "试听列表",
   "love_list": "收藏",

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

@@ -1,5 +1,6 @@
 {
   "list_play": "播放",
+  "list_play_later": "稍后播放",
   "list_add_to": "添加到...",
   "list_download": "下载",
   "list_source_detail": "歌曲详情页",
@@ -10,6 +11,7 @@
   "time": "时长",
   "lossless": "无损",
   "high_quality": "高品质",
+  "loding_list": "加载中...",
   "no_item": "搜我所想~~😉",
   "hot_search": "热门搜索",
   "history_search": "历史搜索",

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

@@ -1,7 +1,6 @@
 {
   "basic": "基本设置",
   "basic_theme": "主题颜色",
-  "basic_animation_title": "弹出层的动画效果",
   "basic_animation": "弹出层随机动画",
   "basic_show_animation": "显示切换动画",
   "basic_source_title": "选择音乐来源",
@@ -21,8 +20,7 @@
   "basic_window_size_larger": "较大",
   "basic_window_size_oversized": "超大",
   "basic_window_size_huge": "巨大",
-  "basic_to_tray_title": "关闭时不退出软件将其最小化到系统托盘",
-  "basic_to_tray": "关闭时最小化到系统托盘",
+  "basic_to_tray": "关闭软件时不退出软件将其最小化到系统托盘",
   "basic_lang_title": "软件显示的语言",
   "basic_lang": "语言",
   "basic_control_btn_position": "控制按钮位置",
@@ -30,21 +28,13 @@
   "basic_control_btn_position_right": "右边",
 
   "play": "播放设置",
-  "play_toggle_title": "都不选时播放完当前歌曲就停止播放",
-  "play_toggle": "歌曲切换方式",
-  "play_toggle_list_loop": "列表循环",
-  "play_toggle_random": "列表随机",
-  "play_toggle_list": "顺序播放",
-  "play_toggle_single_loop": "单曲循环",
+  "play_save_play_time": "记住播放进度",
   "play_lyric_transition": "显示歌词翻译",
-  "play_quality_title": "启用时将优先播放320K品质的歌曲",
-  "play_quality": "优先播放高品质音乐",
-  "play_task_bar_title": "在任务栏上显示当前歌曲播放进度",
-  "play_task_bar": "任务栏播放进度条",
+  "play_quality": "优先播放320K品质的歌曲（如果支持）",
+  "play_task_bar": "在任务栏上显示当前歌曲播放进度",
   "play_mediaDevice_title": "选择声音输出的媒体设备",
   "play_mediaDevice": "音频输出",
-  "play_mediaDevice_remove_stop_play": "音频输出设备被改变时是否暂停播放",
-  "play_mediaDevice_remove_stop_play_title": "当前的声音输出设备被改变时是否暂停播放歌曲",
+  "play_mediaDevice_remove_stop_play": "当前的声音输出设备被改变时暂停播放歌曲",
 
   "desktop_lyric": "桌面歌词设置",
   "desktop_lyric_enable": "显示歌词",
@@ -53,18 +43,13 @@
   "desktop_lyric_lock_screen": "不允许歌词窗口拖出主屏幕之外",
 
   "search": "搜索设置",
-  "search_hot_title": "是否显示热门搜索",
-  "search_hot": "热门搜索",
-  "search_history_title": "是否显示历史搜索记录",
-  "search_history": "搜索历史",
-  "search_focus_search_box_title": "启动时是否自动聚焦搜索框",
-  "search_focus_search_box": "启动时是否聚焦搜索框",
+  "search_hot": "显示热门搜索",
+  "search_history": "显示历史搜索记录",
+  "search_focus_search_box": "启动时自动聚焦搜索框",
 
   "list": "列表设置",
-  "list_source_title": "是否显示歌曲源",
-  "list_source": "是否显示歌曲源（仅对我的音乐分类有效）",
-  "list_scroll_title": "是否记住播放列表滚动条位置",
-  "list_scroll": "记住列表滚动位置（仅对我的音乐分类有效）",
+  "list_source": "显示歌曲源（仅对我的音乐分类有效）",
+  "list_scroll": "记住播放列表滚动条位置（仅对我的音乐分类有效）",
 
   "download": "下载设置",
   "download_enable": "是否启用下载功能",
@@ -106,7 +91,7 @@
   "hot_key_desktop_lyric_toggle_always_top": "桌面歌词置顶切换",
 
   "network": "网络设置",
-  "network_proxy_title": "代理设置（乱设置软件将无法联网）",
+  "network_proxy_title": "HTTP代理设置（乱设置软件将无法联网）",
   "network_proxy_host": "主机",
   "network_proxy_port": "端口",
   "network_proxy_username": "用户名",
@@ -117,12 +102,12 @@
   "odc_clear_search_list": "离开搜索界面时清空搜索列表",
 
   "backup": "备份与恢复",
-  "backup_part": "部分数据",
+  "backup_part": "部分数据（列表数据包括试听列表、收藏列表、用户自定义列表，设置数据不包括快捷键设置）",
   "backup_part_import_list": "导入列表",
   "backup_part_export_list": "导出列表",
   "backup_part_import_setting": "导入设置",
   "backup_part_export_setting": "导出设置",
-  "backup_all": "所有数据（设置与试听列表）",
+  "backup_all": "所有数据（列表数据与设置数据）",
   "backup_all_import": "导入",
   "backup_all_export": "导出",
   "backup_all_import_desc": "选择备份文件",
@@ -150,7 +135,7 @@
   "update_latest": "软件已是最新，尽情地体验吧~🥂",
   "update_open_version_modal_btn": "打开更新窗口 🚀",
   "update_checking": "检查更新中...",
-  "update_init": "更新初始化中...",
+  "update_init": "处理更新中...",
 
   "about": "关于洛雪音乐",
 

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

@@ -8,5 +8,6 @@
   "tip_2": "若遇到无法打开的歌单链接，欢迎反馈",
   "tip_3": "酷狗源不支持用歌单ID打开，但支持酷狗码打开",
   "play_all": "播放",
+  "play_later": "稍后播放",
   "add_all": "收藏"
 }

src/renderer/lang/zh-tw/base.json

@@ -0,0 +1,5 @@
+{
+  "date_format_second": "{num}秒前",
+  "date_format_minute": "{num}分鐘前",
+  "date_format_hour": "{num}小時前"
+}

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

@@ -14,16 +14,30 @@
   "buffering": "緩衝中...",
   "geting_url": "歌曲鏈接獲取中...",
   "lyric_error": "歌詞獲取失敗",
-  "hide_detail": "隱藏詳情頁",
+  "hide_detail": "隱藏詳情頁（界面內右鍵雙擊可快速隱藏詳情頁）",
   "name": "歌曲名：",
   "singer": "藝術家：",
   "album": "專輯名：",
   "add_music_to": "添加當前歌曲到...",
   "desktop_lyric_on": "開啟桌面歌詞",
   "desktop_lyric_off": "關閉桌面歌詞",
+  "desktop_lyric_lock": "右擊鎖定歌詞",
+  "desktop_lyric_unlock": "右擊解鎖歌詞",
   "play_toggle_mode_list_loop": "列表循環",
   "play_toggle_mode_random": "列表隨機",
   "play_toggle_mode_list": "順序播放",
   "play_toggle_mode_single_loop": "單曲循環",
-  "play_toggle_mode_off": "禁用"
+  "play_toggle_mode_off": "禁用",
+  "pic_tip": "右擊在“我的列表”定位當前播放的歌曲",
+
+  "comment_show": "歌曲評論",
+  "comment_hot_loading": "熱門評論加載中",
+  "comment_new_loading": "最新評論加載中",
+  "comment_hot_load_error": "熱門評論加載失敗，點擊嘗試重新加載",
+  "comment_new_load_error": "最新評論加載失敗，點擊嘗試重新加載",
+  "comment_refresh": "刷新評論",
+  "comment_no_content": "暫無評論",
+  "comment_hot_title": "熱門評論",
+  "comment_new_title": "最新評論",
+  "comment_title": "{name} 的評論"
 }

src/renderer/lang/zh-tw/desktopLyric.json

@@ -4,10 +4,10 @@
   "lock": "鎖定歌詞",
   "unlock": "解鎖歌詞",
   "theme": "主題配色",
-  "font_increase": "增加字體大小",
-  "font_decrease": "減小字體大小",
-  "opactiy_increase": "減小透明度",
-  "opactiy_decrease": "增加透明度",
+  "font_increase": "增加字體大小（右擊可微調）",
+  "font_decrease": "減小字體大小（右擊可微調）",
+  "opactiy_increase": "減小透明度（右擊可微調）",
+  "opactiy_decrease": "增加透明度（右擊可微調）",
   "lrc_active_zoom_on": "縮放當前播放的歌詞",
   "lrc_active_zoom_off": "取消縮放當前播放的歌詞",
   "win_top_on": "置頂歌詞界面",

src/renderer/lang/zh-tw/material/list_sort_modal.json

@@ -0,0 +1,6 @@
+{
+  "title": "將 {name} 的位置調整到：",
+  "title_multiple": "將已選的 {num} 首歌曲的位置調整到：",
+  "input_tip": "請輸入要調整到第幾個位置",
+  "btn_confirm": "確定"
+}

src/renderer/lang/zh-tw/material/song_list.json

@@ -1,5 +1,6 @@
 {
   "list_play": "播放",
+  "list_play_later": "稍後播放",
   "list_add_to": "添加到...",
   "list_download": "下載",
   "list_search": "搜索",

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

@@ -1,5 +1,6 @@
 {
   "menu_play": "播放",
+  "menu_play_later": "稍後播放",
   "menu_start": "開始任務",
   "menu_pause": "暫停任務",
   "menu_file": "定位文件",

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

@@ -4,12 +4,16 @@
   "lists_rename": "重命名",
   "lists_moveup": "上移",
   "lists_movedown": "下移",
+  "lists_sync": "同步",
   "lists_remove": "刪除",
   "list_play": "播放",
+  "list_play_later": "稍後播放",
   "list_copy_name": "複製歌曲名",
   "list_add_to": "添加到...",
   "list_move_to": "移動到...",
+  "list_sort": "調整位置",
   "list_download": "下載",
+  "list_search": "搜索",
   "list_remove": "刪除",
   "list_source_detail": "歌曲詳情頁",
   "default_list": "試聽列表",

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

@@ -1,5 +1,6 @@
 {
   "list_play": "播放",
+  "list_play_later": "稍後播放",
   "list_add_to": "添加到...",
   "list_download": "下載",
   "list_source_detail": "歌曲詳情頁",
@@ -10,6 +11,7 @@
   "time": "時長",
   "lossless": "無損",
   "high_quality": "高品質",
+  "loding_list": "加載中...",
   "no_item": "搜我所想~~😉",
   "hot_search": "熱門搜索",
   "history_search": "歷史搜索",

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

@@ -1,7 +1,6 @@
 {
   "basic": "基本設置",
   "basic_theme": "主題顏色",
-  "basic_animation_title": "彈出層的動畫效果",
   "basic_animation": "彈出層隨機動畫",
   "basic_show_animation": "顯示切換動畫",
   "basic_source_title": "選擇音樂來源",
@@ -21,46 +20,37 @@
   "basic_window_size_larger": "較大",
   "basic_window_size_oversized": "超大",
   "basic_window_size_huge": "巨大",
-  "basic_to_tray_title": "關閉時不退出軟件將其最小化到系統托盤",
-  "basic_to_tray": "關閉時最小化到系統托盤",
+  "basic_to_tray": "關閉軟件時不退出軟件將其最小化到系統托盤",
   "basic_lang_title": "軟件顯示的語言",
   "basic_lang": "語言",
   "basic_control_btn_position": "控制按鈕位置",
   "basic_control_btn_position_left": "左邊",
   "basic_control_btn_position_right": "右邊",
+
   "play": "播放設置",
-  "play_toggle_title": "都不選時播放完當前歌曲就停止播放",
-  "play_toggle": "歌曲切換方式",
-  "play_toggle_list_loop": "列表循環",
-  "play_toggle_random": "列表隨機",
-  "play_toggle_list": "順序播放",
-  "play_toggle_single_loop": "單曲循環",
+  "play_save_play_time": "記住播放進度",
   "play_lyric_transition": "顯示歌詞翻譯",
-  "play_quality_title": "啟用時將優先播放320K品質的歌曲",
-  "play_quality": "優先播放高品質音樂",
-  "play_task_bar_title": "在任務欄上顯示當前歌曲播放進度",
-  "play_task_bar": "任務欄播放進度條",
+  "play_quality": "優先播放320K品質的歌曲（如果支持）",
+  "play_task_bar": "在任務欄上顯示當前歌曲播放進度",
   "play_mediaDevice_title": "選擇聲音輸出的媒體設備",
   "play_mediaDevice": "音頻輸出",
-  "play_mediaDevice_remove_stop_play": "音頻輸出設備被改變時是否暫停播放",
-  "play_mediaDevice_remove_stop_play_title": "當前的聲音輸出設備被改變時是否暫停播放歌曲",
+  "play_mediaDevice_remove_stop_play": "當前的聲音輸出設備被改變時暫停播放歌曲",
+
   "desktop_lyric": "桌面歌詞設置",
   "desktop_lyric_enable": "顯示歌詞",
   "desktop_lyric_lock": "鎖定歌詞",
   "desktop_lyric_always_on_top": "使歌詞總是在其他窗口之上",
   "desktop_lyric_lock_screen": "不允許歌詞窗口拖出主屏幕之外",
+
   "search": "搜索設置",
-  "search_hot_title": "是否顯示熱門搜索",
-  "search_hot": "熱門搜索",
-  "search_history_title": "是否顯示歷史搜索記錄",
-  "search_history": "搜索歷史",
-  "search_focus_search_box_title": "啟動時是否自動聚焦搜索框",
-  "search_focus_search_box": "啟動時是否聚焦搜索框",
+  "search_hot": "顯示熱門搜索",
+  "search_history": "顯示歷史搜索記錄",
+  "search_focus_search_box": "啟動時自動聚焦搜索框",
+
   "list": "列表設置",
-  "list_source_title": "是否顯示歌曲源",
-  "list_source": "是否顯示歌曲源（僅對我的音樂分類有效）",
-  "list_scroll_title": "是否記住播放列表滾動條位置",
-  "list_scroll": "記住列表滾動位置（僅對我的音樂分類有效）",
+  "list_source": "顯示歌曲源（僅對我的音樂分類有效）",
+  "list_scroll": "記住播放列表滾動條位置（僅對我的音樂分類有效）",
+
   "download": "下載設置",
   "download_enable": "是否啟用下載功能",
   "download_path_title": "下載歌曲保存的路徑",
@@ -79,6 +69,7 @@
   "download_name2": "歌手 - 歌名",
   "download_name3": "歌名",
   "download_select_save_path": "選擇歌曲保存路徑",
+
   "hot_key": "快捷鍵設置",
   "hot_key_local_title": "軟件內快捷鍵",
   "hot_key_global_title": "全局快捷鍵",
@@ -98,22 +89,25 @@
   "hot_key_desktop_lyric_toggle_visible": "開/關桌面歌詞",
   "hot_key_desktop_lyric_toggle_lock": "桌面歌詞鎖定切換",
   "hot_key_desktop_lyric_toggle_always_top": "桌面歌詞置頂切換",
+
   "network": "網絡設置",
-  "network_proxy_title": "代理設置（亂設置軟件將無法聯網）",
+  "network_proxy_title": "HTTP代理設置（亂設置軟件將無法聯網）",
   "network_proxy_host": "主機",
   "network_proxy_port": "端口",
   "network_proxy_username": "用戶名",
   "network_proxy_password": "密碼",
+
   "odc": "強迫症設置",
   "odc_clear_search_input": "離開搜索界面時清空搜索框",
   "odc_clear_search_list": "離開搜索界面時清空搜索列表",
+
   "backup": "備份與恢復",
-  "backup_part": "部分數據",
+  "backup_part": "部分數據（列表數據包括試聽列表、收藏列表、用戶自定義列表，設置數據不包括快捷鍵設置）",
   "backup_part_import_list": "導入列表",
   "backup_part_export_list": "導出列表",
   "backup_part_import_setting": "導入設置",
   "backup_part_export_setting": "導出設置",
-  "backup_all": "所有數據（設置與試聽列表）",
+  "backup_all": "所有數據（列表數據與設置數據）",
   "backup_all_import": "導入",
   "backup_all_export": "導出",
   "backup_all_import_desc": "選擇備份文件",
@@ -121,7 +115,8 @@
   "backup_part_import_setting_desc": "選擇配置文件",
   "backup_part_export_setting_desc": "選擇設置保存位置",
   "backup_part_import_list_desc": "選擇列表文件",
-  "backup_part_export_list_desc": "選擇列表保存位置",
+  "backup_part_export_list_desc": "選擇歌單保存位置",
+
   "other": "其他",
   "other_tray_theme": "托盤圖標樣式",
   "other_tray_theme_native": "純色",
@@ -130,6 +125,7 @@
   "other_cache_label": "軟件已使用緩存大小：",
   "other_cache_label_title": "當前已用緩存",
   "other_cache_clear_btn": "清理緩存",
+
   "update": "軟件更新",
   "update_latest_label": "最新版本：",
   "update_unknown": "未知",
@@ -139,8 +135,11 @@
   "update_latest": "軟件已是最新，盡情地體驗吧~🥂",
   "update_open_version_modal_btn": "打開更新窗口 🚀",
   "update_checking": "檢查更新中...",
-  "update_init": "更新初始化中...",
+  "update_init": "處理更新中...",
+
   "about": "關於洛雪音樂",
+
+
   "is_enable": "是否啟用",
   "is_show": "是否顯示",
   "click_open": "點擊打開",

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

@@ -8,5 +8,6 @@
   "tip_2": "若遇到無法打開的歌單鏈接，歡迎反饋",
   "tip_3": "酷狗源不支持用歌單ID打開，但支持酷狗碼打開",
   "play_all": "播放",
+  "play_later": "稍後播放",
   "add_all": "收藏"
 }

src/renderer/main.js

@@ -17,7 +17,7 @@ import store from './store'
 import '../common/error'
 
 import { getSetting } from './utils'
-import languageList from '@/lang/languages.json'
+import languageList from '@renderer/lang/languages.json'
 import { rendererSend, NAMES } from '../common/ipc'
 
 sync(store, router)

src/renderer/plugins/Tips/Tips.js

@@ -0,0 +1,49 @@
+import Tips from './Tips.vue'
+import Vue from 'vue'
+
+const TipsConstructor = Vue.extend(Tips)
+
+const addAutoCloseTimer = (instance, time) => {
+  if (!time) return
+  if (instance.autoCloseTimer) clearTimeout(instance.autoCloseTimer)
+  instance.autoCloseTimer = setTimeout(() => {
+    instance.cancel()
+  }, time)
+}
+const clearAutoCloseTimer = instance => {
+  if (!instance.autoCloseTimer) return
+  clearTimeout(instance.autoCloseTimer)
+  instance.autoCloseTimer = null
+}
+
+export default ({ position, message, autoCloseTime } = {}) => {
+  if (!position) return
+  let instance = new TipsConstructor().$mount(document.createElement('div'))
+
+  // Tips实例挂载到刚创建的div
+  // 属性设置
+  instance.visible = true
+  instance.message = message
+  instance.position.top = position.top
+  instance.position.left = position.left
+
+  // 将Tips的DOM挂载到body上
+  document.body.appendChild(instance.$el)
+
+  instance.cancel = () => {
+    instance.$emit('beforeClose', instance)
+    clearAutoCloseTimer(instance)
+    instance.visible = false
+    instance = null
+  }
+
+  instance.setTips = tips => {
+    addAutoCloseTimer(instance, autoCloseTime)
+    instance.message = tips
+  }
+
+  addAutoCloseTimer(instance, autoCloseTime)
+
+  return instance
+}
+

src/renderer/plugins/Tips/Tips.vue

@@ -0,0 +1,98 @@
+<template>
+  <transition name="tips-fade" @after-leave="afterLeave">
+    <div v-show="visible" :style="{ left: position.left + 'px' , top: position.top + 'px', transform: transform }" ref="dom_tips" :class="$style.tips">{{message}}</div>
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      message: '',
+      position: {
+        top: 0,
+        left: 0,
+      },
+      transform: 'translate(0, 0)',
+      cancel: null,
+      setTips: null,
+      aotoCloseTimer: null,
+    }
+  },
+  watch: {
+    message() {
+      this.$nextTick(() => {
+        this.transform = `translate(${this.handleGetOffsetXY(this.position.left, this.position.top)})`
+      })
+    },
+  },
+  beforeDestroy() {
+    const el = this.$el
+    el.parentNode.removeChild(el)
+  },
+  methods: {
+    afterLeave(el, done) {
+      this.$destroy()
+    },
+    handleGetOffsetXY(left, top) {
+      const tipsWidth = this.$refs.dom_tips.clientWidth
+      const tipsHeight = this.$refs.dom_tips.clientHeight
+      const dom_container = document.body
+      const containerWidth = dom_container.clientWidth
+      const containerHeight = dom_container.clientHeight
+      const offsetWidth = containerWidth - left - tipsWidth
+      const offsetHeight = containerHeight - top - tipsHeight
+      let x = 0
+      let y = 0
+      if (tipsWidth < left && containerWidth > tipsWidth && offsetWidth < 5) {
+        x = -tipsWidth - 12
+      }
+      if (tipsHeight < top && containerHeight > tipsHeight && offsetHeight < 5) {
+        y = -tipsHeight - 8
+      }
+      return `${x}px, ${y}px`
+    },
+  },
+}
+</script>
+
+<style lang="less" module>
+@import '../../assets/styles/layout.less';
+
+.tips {
+  position: fixed;
+  // transform: scale(1);
+  line-height: 1.2;
+  word-wrap: break-word;
+  padding: 4px 5px;
+  z-index: 999;
+  font-size: 12px;
+  max-width: 80%;
+  color: @color-theme_2-font;
+  border-radius: 3px;
+  background: @color-green-theme_2-background_1;
+  overflow: hidden;
+  pointer-events: none;
+  // text-align: justify;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+}
+
+:global(.tips-fade-enter-active), :global(.tips-fade-leave-active) {
+  transition: opacity .2s;
+}
+:global(.tips-fade-enter), :global(.tips-fade-leave-to) {
+  opacity: 0;
+}
+
+each(@themes, {
+  :global(#container.@{value}) {
+    ~.tips {
+      color: ~'@{color-@{value}-theme_2-font}';
+      background: ~'@{color-@{value}-theme_2-background_1}';
+    }
+  }
+})
+
+
+</style>

src/renderer/plugins/Tips/index.js

@@ -0,0 +1,62 @@
+import tips from './Tips'
+import { debounce } from '../../utils'
+
+let instance
+let prevTips
+
+const getTips = el =>
+  el
+    ? el.getAttribute('tips')
+      ? el.getAttribute('tips')
+      : el.parentNode === document.documentElement
+        ? null
+        : getTips(el.parentNode)
+    : null
+
+const showTips = debounce(event => {
+  let msg = getTips(event.target)
+  if (!msg) return
+  prevTips = msg
+  instance = tips({
+    message: msg,
+    autoCloseTime: 10000,
+    position: {
+      top: event.y + 12,
+      left: event.x + 8,
+    },
+  })
+  instance.$on('beforeClose', closeInstance => {
+    if (instance !== closeInstance) return
+    prevTips = null
+    instance = null
+  })
+}, 400)
+
+const hideTips = () => {
+  if (!instance) return
+  instance.cancel()
+}
+
+const setTips = tips => {
+  if (!instance) return
+  instance.setTips(tips)
+}
+
+const updateTips = event => {
+  if (!instance) return showTips(event)
+  setTimeout(() => {
+    let msg = getTips(event.target)
+    if (!msg || prevTips === msg) return
+    setTips(msg)
+    prevTips = msg
+  })
+}
+
+document.body.addEventListener('mousemove', event => {
+  hideTips()
+  showTips(event)
+})
+
+document.body.addEventListener('click', updateTips)
+
+document.body.addEventListener('contextmenu', updateTips)

src/renderer/plugins/i18n.js

@@ -9,7 +9,7 @@
 // Lib imports
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import messages from '@/lang'
+import messages from '@renderer/lang'
 
 Vue.use(VueI18n)
 

src/renderer/plugins/index.js

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