发布0.5.5版本

CHANGELOG.md

@@ -6,6 +6,20 @@ 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/).
 
+## [0.5.5](https://github.com/lyswhut/lx-music-desktop/compare/v0.5.4...v0.5.5) - 2019-09-13
+
+### 新增
+
+- 月是故乡明，祝大家中秋快乐🥮~~新增个性皮肤**《月里嫦娥》**，时间仓促，皮肤还不是很完善，可以试试喜不喜欢~😉
+- 新增 MAC 版本退出快捷键支持
+- 新增点击播放器中的歌曲标题可以复制标题的功能（遇到好听的歌曲方便分享）
+
+### 修复
+
+- 修复 MAC 系统下软件关闭时再次从 dock 打开时报错的Bug
+- 修复下载的歌曲文件名中包含命名规则不允许的符号时下载失败的问题（若歌曲名包含这些符号会自动将其移除）
+- 修复 MAC 版本不能复制粘贴的问题
+
 ## [0.5.4](https://github.com/lyswhut/lx-music-desktop/compare/v0.5.3...v0.5.4) - 2019-09-09
 
 ### 移除

README.md

@@ -82,8 +82,9 @@ npm run pack
 
 1. 尝试更新到最新版本
 2. 尝试切换其他歌曲（或直接搜索该歌曲），若全部歌曲都无法试听与下载则进行下一步
-3. 尝试切换网络（比如切到移动网络）
-4. 若还不行请到这个链接查看详情：<https://github.com/lyswhut/lx-music-desktop/issues/5>
+3. 尝试到设置-接口来源切换到其他接口
+4. 尝试切换网络（比如切到移动网络）
+5. 若还不行请到这个链接查看详情：<https://github.com/lyswhut/lx-music-desktop/issues/5>
 
 #### Windows 7 下界面异常
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lx-music-desktop",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "一个免费的音乐下载助手",
   "main": "./dist/electron/main.js",
   "productName": "lx-music-desktop",

publish/changeLog.md

@@ -0,0 +1,11 @@
+### 新增
+
+- 月是故乡明，祝大家中秋快乐🥮~~新增个性皮肤**《月里嫦娥》**，时间仓促，皮肤还不是很完善，可以试试喜不喜欢~😉
+- 新增 MAC 版本退出快捷键支持
+- 新增点击播放器中的歌曲标题可以复制标题的功能（遇到好听的歌曲方便分享）
+
+### 修复
+
+- 修复 MAC 系统下软件关闭时再次从 dock 打开时报错的Bug
+- 修复下载的歌曲文件名中包含命名规则不允许的符号时下载失败的问题（若歌曲名包含这些符号会自动将其移除）
+- 修复 MAC 版本不能复制粘贴的问题

publish/version.json

@@ -1,7 +1,11 @@
 {
-  "version": "0.5.4",
-  "desc": "<h3>移除</h3>\n<ul>\n<li>下载的FLAC文件在修改歌曲信息后，软件无法播放，但使用本地播放器可以播放</li>\n<li>为了稳妥起见，暂时移除FLAC格式的meta信息修改</li>\n<li>MP3格式无此问题</li>\n</ul>\n",
+  "version": "0.5.5",
+  "desc": "<h3>新增</h3>\n<ul>\n<li>月是故乡明，祝大家中秋快乐🥮~~新增个性皮肤**《月里嫦娥》**，时间仓促，皮肤还不是很完善，可以试试喜不喜欢~😉</li>\n<li>新增 MAC 版本退出快捷键支持</li>\n<li>新增点击播放器中的歌曲标题可以复制标题的功能（遇到好听的歌曲方便分享）</li>\n</ul>\n<h3>修复</h3>\n<ul>\n<li>修复 MAC 系统下软件关闭时再次从 dock 打开时报错的Bug</li>\n<li>修复下载的歌曲文件名中包含命名规则不允许的符号时下载失败的问题（若歌曲名包含这些符号会自动将其移除）</li>\n<li>修复 MAC 版本不能复制粘贴的问题</li>\n</ul>\n",
   "history": [
+    {
+      "version": "0.5.4",
+      "desc": "<h3>移除</h3>\n<ul>\n<li>下载的FLAC文件在修改歌曲信息后，软件无法播放，但使用本地播放器可以播放</li>\n<li>为了稳妥起见，暂时移除FLAC格式的meta信息修改</li>\n<li>MP3格式无此问题</li>\n</ul>\n"
+    },
     {
       "version": "0.5.3",
       "desc": "<h3>优化</h3>\n<ul>\n<li>更新所有依赖包到最新</li>\n</ul>\n<h3>修复</h3>\n<ul>\n<li>修复试听酷狗源的音乐仍然获取320k音质导致获取失败的Bug</li>\n</ul>\n"

src/main/events/progressBar.js

@@ -1,11 +1,10 @@
 const { mainOn } = require('../../common/icp')
 
-module.exports = win => {
-  mainOn('progress', (event, params) => {
-    // console.log(params)
-    win.setProgressBar(params.status, {
-      mode: params.mode || 'normal',
-    })
-  })
-}
+
+mainOn('progress', (event, params) => {
+  // console.log(params)
+  global.mainWindow && global.mainWindow.setProgressBar(params.status, {
+    mode: params.mode || 'normal',
+  })
+})
 

src/main/events/trafficLight.js

@@ -1,23 +1,22 @@
 // const { app } = require('electron')
 const { mainOn } = require('../../common/icp')
 
-module.exports = win => {
-  mainOn('min', event => {
-    if (win) {
-      win.minimize()
-    }
-  })
-  // mainOn('max', event => {
-  //   if (win) {
-  //     win.maximize()
-  //   }
-  // })
-  mainOn('close', event => {
-    if (win) {
-      // window.destroy()
-      // console.log('close')
-      // app.quit()
-      win.close()
-    }
-  })
-}
+
+mainOn('min', event => {
+  if (global.mainWindow) {
+    global.mainWindow.minimize()
+  }
+})
+// mainOn('max', event => {
+//   if (global.mainWindow) {
+//     global.mainWindow.maximize()
+//   }
+// })
+mainOn('close', event => {
+  if (global.mainWindow) {
+    // global.mainWindowdow.destroy()
+    // console.log('close')
+    // app.quit()
+    global.mainWindow.close()
+  }
+})

src/main/index.js

@@ -16,8 +16,8 @@ app.on('second-instance', (event, argv, cwd) => {
 })
 
 require('./events')
-const progressBar = require('./events/progressBar')
-const trafficLight = require('./events/trafficLight')
+require('./events/progressBar')
+require('./events/trafficLight')
 const autoUpdate = require('./utils/autoUpdate')
 const { isLinux, isMac } = require('../common/utils')
 
@@ -30,6 +30,7 @@ const isDev = process.env.NODE_ENV !== 'production'
 
 let mainWindow
 let winURL
+let isFirstCheckedUpdate = true
 
 if (isDev) {
   global.__static = path.join(__dirname, '../static')
@@ -43,7 +44,7 @@ function createWindow() {
   /**
    * Initial window options
    */
-  mainWindow = new BrowserWindow({
+  mainWindow = global.mainWindow = new BrowserWindow({
     height: 590,
     useContentSize: true,
     width: 920,
@@ -62,27 +63,54 @@ function createWindow() {
 
   mainWindow.loadURL(winURL)
 
+  mainWindow.on('close', () => {
+    mainWindow.setProgressBar(-1)
+  })
   mainWindow.on('closed', () => {
-    if (!isMac) mainWindow = null
+    mainWindow = global.mainWindow = null
   })
 
   // mainWindow.webContents.openDevTools()
 
-  trafficLight(mainWindow)
-  progressBar(mainWindow)
-  if (!isDev) autoUpdate(mainWindow)
+  if (!isDev) {
+    autoUpdate(isFirstCheckedUpdate)
+    isFirstCheckedUpdate = false
+  }
 }
 
 if (isMac) {
   const template = [
     {
       label: app.getName(),
-      submenu: [{ label: '关于洛雪音乐', role: 'about' }, { type: 'separator' }, { label: '隐藏', role: 'hide' }, { label: '显示其他', role: 'hideothers' }, { label: '显示全部', role: 'unhide' }, { type: 'separator' }, { label: '退出', click: () => app.quit() }],
+      submenu: [
+        { label: '关于洛雪音乐', role: 'about' },
+        { type: 'separator' },
+        { label: '隐藏', role: 'hide' },
+        { label: '显示其他', role: 'hideothers' },
+        { label: '显示全部', role: 'unhide' },
+        { type: 'separator' },
+        { label: '退出', accelerator: 'Command+Q', click: () => app.quit() },
+      ],
     },
     {
       label: '窗口',
       role: 'window',
-      submenu: [{ label: '最小化', role: 'minimize' }, { label: '关闭', role: 'close' }],
+      submenu: [
+        { label: '最小化', role: 'minimize' },
+        { label: '关闭', role: 'close' },
+      ],
+    },
+    {
+      label: '编辑',
+      submenu: [
+        { label: '撤销', accelerator: 'CmdOrCtrl+Z', role: 'undo' },
+        { label: '恢复', accelerator: 'Shift+CmdOrCtrl+Z', role: 'redo' },
+        { type: 'separator' },
+        { label: '剪切', accelerator: 'CmdOrCtrl+X', role: 'cut' },
+        { label: '复制', accelerator: 'CmdOrCtrl+C', role: 'copy' },
+        { label: '粘贴', accelerator: 'CmdOrCtrl+V', role: 'paste' },
+        { label: '选择全部', accelerator: 'CmdOrCtrl+A', role: 'selectAll' },
+      ],
     },
   ]
 

src/main/utils/autoUpdate.js

@@ -21,7 +21,7 @@ log.info('App starting...')
 
 function sendStatusToWindow(text) {
   log.info(text)
-  // win.webContents.send('message', text)
+  // global.mainWindow.webContents.send('message', text)
 }
 
 
@@ -56,35 +56,50 @@ function sendStatusToWindow(text) {
 
 // })
 
+let waitEvent = []
+const handleSendEvent = action => {
+  if (global.mainWindow) {
+    setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还没启动完成
+      global.mainWindow.webContents.send(action.type, action.info)
+    }, 2000)
+  } else {
+    waitEvent.push(action)
+  }
+}
 
-module.exports = win => {
+module.exports = isFirstCheckedUpdate => {
+  if (!isFirstCheckedUpdate) {
+    if (waitEvent.length) {
+      waitEvent.forEach((event, index) => {
+        setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还没启动完成
+          global.mainWindow.webContents.send(event.type, event.info)
+        }, 2000 * (index + 1))
+      })
+      waitEvent = []
+    }
+    return
+  }
   autoUpdater.on('checking-for-update', () => {
     sendStatusToWindow('Checking for update...')
   })
   autoUpdater.on('update-available', info => {
     sendStatusToWindow('Update available.')
-    win.webContents.send('update-available', info)
+    handleSendEvent({ type: 'update-available', info })
   })
   autoUpdater.on('update-not-available', info => {
     sendStatusToWindow('Update not available.')
-    setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还启动完成
-      win.webContents.send('update-not-available')
-    }, 5000)
+    handleSendEvent({ type: 'update-not-available' })
   })
   autoUpdater.on('error', () => {
     sendStatusToWindow('Error in auto-updater.')
-    setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还启动完成
-      win.webContents.send('update-error')
-    }, 6000)
+    handleSendEvent({ type: 'update-error' })
   })
   autoUpdater.on('download-progress', progressObj => {
     sendStatusToWindow('Download progress...')
   })
   autoUpdater.on('update-downloaded', info => {
     sendStatusToWindow('Update downloaded.')
-    setTimeout(() => { // 延迟发送事件，过早发送可能渲染进程还启动完成
-      win.webContents.send('update-downloaded')
-    }, 2000)
+    handleSendEvent({ type: 'update-downloaded' })
   })
   mainOn('quit-update', () => {
     setTimeout(() => {

src/main/utils/mp3Meta.js

@@ -6,7 +6,7 @@ const extReg = /^(\.(?:jpe?g|png)).*$/
 
 module.exports = (filePath, meta) => {
   if (!meta.APIC) return NodeID3.write(meta, filePath)
-  let picPath = path.join(path.dirname(filePath), `${meta.title}-${meta.artist}${path.extname(meta.APIC).replace(extReg, '$1')}`)
+  let picPath = filePath.replace(/\.mp3$/, '') + path.extname(meta.APIC).replace(extReg, '$1')
   request(meta.APIC).pipe(fs.createWriteStream(picPath)).on('finish', () => {
     meta.APIC = picPath
     NodeID3.write(meta, filePath)

src/renderer/App.vue

@@ -225,6 +225,8 @@ body {
   display: flex;
   height: 100%;
   overflow: hidden;
+  background: @color-theme-bgimg center center no-repeat;
+  background-size: auto 100%;
 }
 
 #left {
@@ -235,6 +237,8 @@ body {
   flex: auto;
   display: flex;
   flex-flow: column nowrap;
+  transition: background-color @transition-theme;
+  background-color: @color-theme_2;
 }
 #toolbar, #player {
   flex: none;
@@ -243,5 +247,14 @@ body {
   flex: auto;
   height: 0;
 }
+
+each(@themes, {
+  #container.@{value} {
+    background-image: ~'@{color-@{value}-theme-bgimg}';
+    #right {
+      background-color: ~'@{color-@{value}-theme_2}';
+    }
+  }
+})
 </style>
 

src/renderer/assets/styles/index.less

@@ -36,11 +36,11 @@ table {
   }
   tbody {
     tr {
-      border-top: 1px solid #e0e0e0;
+      border-top: 1px solid @color-theme_2-line;
       // border-top: 1px solid rgba(0, 0, 0, 0.12);
       transition: background-color 0.2s ease;
       &:hover {
-        background-color: #eee;
+        background-color: @color-theme_2-hover;
       }
       &:first-child {
         border-top: none;
@@ -172,5 +172,15 @@ each(@themes, {
         background-color: ~'@{color-@{value}-scrollbar-thumb-hover}';
       }
     }
+    table {
+      tbody {
+        tr {
+          border-top-color: ~'@{color-@{value}-theme_2-line}';
+          &:hover {
+            background-color: ~'@{color-@{value}-theme_2-hover}';
+          }
+        }
+      }
+    }
   }
 })

src/renderer/assets/styles/variables.less

@@ -1,21 +1,25 @@
 @import './colors.less';
 
-@themes: green, yellow, blue, red, purple, orange, grey;
+@themes: green, yellow, blue, red, purple, orange, grey, midAutumn;
 
 
 // Colors
 // @color-theme: #03a678;
 @color-theme: #4daf7c;
+@color-theme-bgimg: none;
 @color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
 @color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
 @color-theme-font: #fff;
 @color-theme-font-label: lighten(@color-theme, 35%);
 
-@color-theme_2: #fff;
+@color-theme_2: rgba(255, 255, 255, .9);
+@color-theme_2-background_2: #fff;
 @color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%);
 @color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%);
 @color-theme_2-font: darken(@color-theme_2, 70%);
-@color-theme_2-font-label: lighten(@color-theme, 40%);
+@color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
+@color-theme_2-line: lighten(@color-theme, 35%);
+@color-theme-sidebar: @color-theme;
 @color-btn: fadeout(darken(@color-theme, 5%), 15%);
 @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
 
@@ -41,6 +45,7 @@
 @color-player-status-text: lighten(@color-theme_2-font, 10%);
 
 @color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
+@color-tab-btn-background-hover: @color-theme_2-hover;
 @color-tab-border-top: fadeout(lighten(@color-theme, 5%), 50%);
 @color-tab-border-bottom: lighten(@color-theme, 5%);
 
@@ -50,15 +55,19 @@
 
 
 @color-green-theme: #4daf7c;
+@color-green-theme-bgimg: none;
 @color-green-theme-hover: fadeout(lighten(@color-green-theme, 10%), 30%);
 @color-green-theme-active: fadeout(darken(@color-green-theme, 20%), 60%);
 @color-green-theme-font: #fff;
 @color-green-theme-font-label: lighten(@color-green-theme, 35%);
 @color-green-theme_2: #fff;
+@color-green-theme_2-background_2: #fff;
 @color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
 @color-green-theme_2-active: fadeout(darken(@color-green-theme, 5%), 70%);
 @color-green-theme_2-font: darken(@color-green-theme_2, 70%);
-@color-green-theme_2-font-label: lighten(@color-green-theme, 40%);
+@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
+@color-green-theme_2-line: lighten(@color-green-theme, 35%);
+@color-green-theme-sidebar: @color-green-theme;
 @color-green-btn: fadeout(darken(@color-green-theme, 5%), 15%);
 @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
 @color-green-pagination-background: fadeout(lighten(@color-green-theme, 45%), 30%);
@@ -77,20 +86,25 @@
 @color-green-player-progress-bar2: lighten(@color-green-theme, 12%);
 @color-green-player-status-text: lighten(@color-green-theme_2-font, 10%);
 @color-green-tab-btn-background: fadeout(lighten(@color-green-theme, 10%), 80%);
+@color-green-tab-btn-background-hover: @color-green-theme_2-hover;
 @color-green-tab-border-top: fadeout(lighten(@color-green-theme, 5%), 50%);
 @color-green-tab-border-bottom: lighten(@color-green-theme, 5%);
 
 
 @color-yellow-theme: #f2d35b;
+@color-yellow-theme-bgimg: none;
 @color-yellow-theme-hover: fadeout(lighten(@color-yellow-theme, 10%), 30%);
 @color-yellow-theme-active: fadeout(darken(@color-yellow-theme, 20%), 60%);
 @color-yellow-theme-font: #fff;
 @color-yellow-theme-font-label: lighten(@color-yellow-theme, 35%);
 @color-yellow-theme_2: #fff;
+@color-yellow-theme_2-background_2: #fff;
 @color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
 @color-yellow-theme_2-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
 @color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%);
-@color-yellow-theme_2-font-label: lighten(@color-yellow-theme, 40%);
+@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
+@color-yellow-theme_2-line: lighten(@color-yellow-theme, 35%);
+@color-yellow-theme-sidebar: @color-yellow-theme;
 @color-yellow-btn: fadeout(darken(@color-yellow-theme, 5%), 15%);
 @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 70%);
 @color-yellow-pagination-background: fadeout(lighten(@color-yellow-theme, 30%), 30%);
@@ -109,19 +123,24 @@
 @color-yellow-player-progress-bar2: lighten(@color-yellow-theme, 12%);
 @color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 10%);
 @color-yellow-tab-btn-background: fadeout(lighten(@color-yellow-theme, 10%), 80%);
+@color-yellow-tab-btn-background-hover: @color-yellow-theme_2-hover;
 @color-yellow-tab-border-top: fadeout(lighten(@color-yellow-theme, 5%), 50%);
 @color-yellow-tab-border-bottom: lighten(@color-yellow-theme, 5%);
 
 @color-orange-theme: #f5ab35;
+@color-orange-theme-bgimg: none;
 @color-orange-theme-hover: fadeout(lighten(@color-orange-theme, 10%), 30%);
 @color-orange-theme-active: fadeout(darken(@color-orange-theme, 20%), 60%);
 @color-orange-theme-font: #fff;
 @color-orange-theme-font-label: lighten(@color-orange-theme, 35%);
 @color-orange-theme_2: #fff;
+@color-orange-theme_2-background_2: #fff;
 @color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
 @color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
 @color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
-@color-orange-theme_2-font-label: lighten(@color-orange-theme, 40%);
+@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
+@color-orange-theme_2-line: lighten(@color-orange-theme, 35%);
+@color-orange-theme-sidebar: @color-orange-theme;
 @color-orange-btn: fadeout(darken(@color-orange-theme, 5%), 15%);
 @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 35%), 70%);
 @color-orange-pagination-background: fadeout(lighten(@color-orange-theme, 35%), 30%);
@@ -140,19 +159,24 @@
 @color-orange-player-progress-bar2: lighten(@color-orange-theme, 12%);
 @color-orange-player-status-text: lighten(@color-orange-theme_2-font, 10%);
 @color-orange-tab-btn-background: fadeout(lighten(@color-orange-theme, 10%), 80%);
+@color-orange-tab-btn-background-hover: @color-orange-theme_2-hover;
 @color-orange-tab-border-top: fadeout(lighten(@color-orange-theme, 5%), 50%);
 @color-orange-tab-border-bottom: lighten(@color-orange-theme, 5%);
 
 @color-blue-theme: #3498db;
+@color-blue-theme-bgimg: none;
 @color-blue-theme-hover: fadeout(lighten(@color-blue-theme, 10%), 30%);
 @color-blue-theme-active: fadeout(darken(@color-blue-theme, 20%), 60%);
 @color-blue-theme-font: #fff;
 @color-blue-theme-font-label: lighten(@color-blue-theme, 35%);
 @color-blue-theme_2: #fff;
+@color-blue-theme_2-background_2: #fff;
 @color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 70%);
 @color-blue-theme_2-active: fadeout(darken(@color-blue-theme, 5%), 70%);
 @color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
-@color-blue-theme_2-font-label: lighten(@color-blue-theme, 40%);
+@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
+@color-blue-theme_2-line: lighten(@color-blue-theme, 35%);
+@color-blue-theme-sidebar: @color-blue-theme;
 @color-blue-btn: fadeout(darken(@color-blue-theme, 5%), 15%);
 @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 70%);
 @color-blue-pagination-background: fadeout(lighten(@color-blue-theme, 40%), 30%);
@@ -171,10 +195,12 @@
 @color-blue-player-progress-bar2: lighten(@color-blue-theme, 12%);
 @color-blue-player-status-text: lighten(@color-blue-theme_2-font, 10%);
 @color-blue-tab-btn-background: fadeout(lighten(@color-blue-theme, 10%), 80%);
+@color-blue-tab-btn-background-hover: @color-blue-theme_2-hover;
 @color-blue-tab-border-top: fadeout(lighten(@color-blue-theme, 5%), 50%);
 @color-blue-tab-border-bottom: lighten(@color-blue-theme, 5%);
 
 @color-red-theme: #d64541;
+@color-red-theme-bgimg: none;
 @color-red-theme-hover: fadeout(lighten(@color-red-theme, 10%), 30%);
 @color-red-theme-active: fadeout(darken(@color-red-theme, 20%), 60%);
 @color-red-theme-font: #fff;
@@ -182,8 +208,11 @@
 @color-red-theme_2: #fff;
 @color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 70%);
 @color-red-theme_2-active: fadeout(darken(@color-red-theme, 5%), 70%);
+@color-red-theme_2-background_2: #fff;
 @color-red-theme_2-font: darken(@color-red-theme_2, 70%);
-@color-red-theme_2-font-label: lighten(@color-red-theme, 40%);
+@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
+@color-red-theme_2-line: lighten(@color-red-theme, 35%);
+@color-red-theme-sidebar: @color-red-theme;
 @color-red-btn: fadeout(darken(@color-red-theme, 5%), 15%);
 @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
 @color-red-pagination-background: fadeout(lighten(@color-red-theme, 40%), 30%);
@@ -204,19 +233,24 @@
 @color-red-tab-border-top: fadeout(lighten(@color-red-theme, 25%), 70%);
 @color-red-tab-border-bottom: lighten(@color-red-theme, 35%);
 @color-red-tab-btn-background: fadeout(lighten(@color-red-theme, 10%), 80%);
+@color-red-tab-btn-background-hover: @color-red-theme_2-hover;
 @color-red-tab-border-top: fadeout(lighten(@color-red-theme, 5%), 50%);
 @color-red-tab-border-bottom: lighten(@color-red-theme, 5%);
 
 @color-purple-theme: #9b59b6;
+@color-purple-theme-bgimg: none;
 @color-purple-theme-hover: fadeout(lighten(@color-purple-theme, 10%), 30%);
 @color-purple-theme-active: fadeout(darken(@color-purple-theme, 20%), 60%);
 @color-purple-theme-font: #fff;
 @color-purple-theme-font-label: lighten(@color-purple-theme, 35%);
 @color-purple-theme_2: #fff;
+@color-purple-theme_2-background_2: #fff;
 @color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 70%);
 @color-purple-theme_2-active: fadeout(darken(@color-purple-theme, 5%), 70%);
 @color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
-@color-purple-theme_2-font-label: lighten(@color-purple-theme, 40%);
+@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
+@color-purple-theme_2-line: lighten(@color-purple-theme, 35%);
+@color-purple-theme-sidebar: @color-purple-theme;
 @color-purple-btn: fadeout(darken(@color-purple-theme, 5%), 15%);
 @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
 @color-purple-pagination-background: fadeout(lighten(@color-purple-theme, 40%), 30%);
@@ -235,19 +269,24 @@
 @color-purple-player-progress-bar2: lighten(@color-purple-theme, 12%);
 @color-purple-player-status-text: lighten(@color-purple-theme_2-font, 10%);
 @color-purple-tab-btn-background: fadeout(lighten(@color-purple-theme, 10%), 80%);
+@color-purple-tab-btn-background-hover: @color-purple-theme_2-hover;
 @color-purple-tab-border-top: fadeout(lighten(@color-purple-theme, 5%), 50%);
 @color-purple-tab-border-bottom: lighten(@color-purple-theme, 5%);
 
 @color-grey-theme: #6c7a89;
+@color-grey-theme-bgimg: none;
 @color-grey-theme-hover: fadeout(lighten(@color-grey-theme, 10%), 30%);
 @color-grey-theme-active: fadeout(darken(@color-grey-theme, 20%), 60%);
 @color-grey-theme-font: #fff;
 @color-grey-theme-font-label: lighten(@color-grey-theme, 35%);
 @color-grey-theme_2: #fff;
+@color-grey-theme_2-background_2: #fff;
 @color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
 @color-grey-theme_2-active: fadeout(darken(@color-grey-theme, 5%), 70%);
 @color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
-@color-grey-theme_2-font-label: lighten(@color-grey-theme, 40%);
+@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
+@color-grey-theme_2-line: lighten(@color-grey-theme, 35%);
+@color-grey-theme-sidebar: @color-grey-theme;
 @color-grey-btn: fadeout(darken(@color-grey-theme, 5%), 15%);
 @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
 @color-grey-pagination-background: fadeout(lighten(@color-grey-theme, 45%), 30%);
@@ -266,9 +305,46 @@
 @color-grey-player-progress-bar2: lighten(@color-grey-theme, 12%);
 @color-grey-player-status-text: lighten(@color-grey-theme_2-font, 10%);
 @color-grey-tab-btn-background: fadeout(lighten(@color-grey-theme, 10%), 80%);
+@color-grey-tab-btn-background-hover: @color-grey-theme_2-hover;
 @color-grey-tab-border-top: fadeout(lighten(@color-grey-theme, 5%), 50%);
 @color-grey-tab-border-bottom: lighten(@color-grey-theme, 5%);
 
+@color-midAutumn-theme: rgba(74, 55, 82, 0.9);
+@color-midAutumn-theme-bgimg: url(../images/jqbg.jpg);
+@color-midAutumn-theme-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 30%);
+@color-midAutumn-theme-active: fadeout(lighten(@color-midAutumn-theme, 15%), 60%);
+@color-midAutumn-theme-font: rgba(246, 233, 255, 0.9);
+@color-midAutumn-theme-font-label: fadeout(lighten(@color-midAutumn-theme, 20%), 20%);
+@color-midAutumn-theme_2: rgba(255, 255, 255, .93);
+@color-midAutumn-theme_2-background_2: #eeedef;
+@color-midAutumn-theme_2-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 65%);
+@color-midAutumn-theme_2-active: fadeout(darken(@color-midAutumn-theme, 5%), 70%);
+@color-midAutumn-theme_2-font: darken(@color-midAutumn-theme_2, 70%);
+@color-midAutumn-theme_2-font-label: lighten(@color-midAutumn-theme, 40%);
+@color-midAutumn-theme_2-line: lighten(@color-midAutumn-theme, 54%);
+@color-midAutumn-theme-sidebar: rgba(255, 255, 255, 0);
+@color-midAutumn-btn: fadeout(darken(@color-midAutumn-theme, 5%), 15%);
+@color-midAutumn-btn-background: fadeout(lighten(@color-midAutumn-theme, 35%), 70%);
+@color-midAutumn-pagination-background: fadeout(lighten(@color-midAutumn-theme, 45%), 50%);
+@color-midAutumn-pagination-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 70%);
+@color-midAutumn-pagination-active: fadeout(darken(@color-midAutumn-theme, 10%), 70%);
+@color-midAutumn-pagination-select: fadeout(lighten(@color-midAutumn-theme, 10%), 55%);
+@color-midAutumn-search-form-background: fadeout(lighten(@color-midAutumn-theme, 50%), 10%);
+@color-midAutumn-search-list-hover: fadeout(darken(@color-midAutumn-theme, 10%), 70%);
+@color-midAutumn-scrollbar-track: fadeout(@color-midAutumn-theme, 80%);
+@color-midAutumn-scrollbar-thumb: fadeout(@color-midAutumn-theme, 60%);
+@color-midAutumn-scrollbar-thumb-hover: fadeout(@color-midAutumn-theme, 40%);
+@color-midAutumn-player-pic-c1: fadeout(@color-midAutumn-theme_2, 50%);
+@color-midAutumn-player-pic-c2: darken(@color-midAutumn-theme_2, 30%);
+@color-midAutumn-player-progress: darken(@color-midAutumn-theme_2, 6%);
+@color-midAutumn-player-progress-bar1: darken(@color-midAutumn-theme_2, 12%);
+@color-midAutumn-player-progress-bar2: lighten(@color-midAutumn-theme, 12%);
+@color-midAutumn-player-status-text: lighten(@color-midAutumn-theme_2-font, 10%);
+@color-midAutumn-tab-btn-background: fadeout(lighten(@color-midAutumn-theme, 10%), 80%);
+@color-midAutumn-tab-btn-background-hover: @color-midAutumn-theme_2-hover;
+@color-midAutumn-tab-border-top: fadeout(lighten(@color-midAutumn-theme, 5%), 50%);
+@color-midAutumn-tab-border-bottom: lighten(@color-midAutumn-theme, 5%);
+
 
 // Width
 @width-app-left: 180px;

src/renderer/components/core/Aside.vue

@@ -57,7 +57,7 @@ export default {
   // box-shadow: 0 0 5px rgba(0, 0, 0, .3);
   transition: @transition-theme;
   transition-property: background-color;
-  background-color: @color-theme;
+  background-color: @color-theme-sidebar;
   // background-color: @color-aside-background;
   // border-right: 2px solid @color-theme;
   -webkit-app-region: drag;
@@ -122,7 +122,7 @@ export default {
 each(@themes, {
   :global(#container.@{value}) {
     .aside {
-      background-color: ~'@{color-@{value}-theme}';
+      background-color: ~'@{color-@{value}-theme-sidebar}';
     }
     .logo {
       color: ~'@{color-@{value}-theme-font}';

src/renderer/components/core/Player.vue

@@ -7,7 +7,7 @@ div(:class="$style.player")
   div(:class="$style.right")
     div(:class="$style.column1")
       div(:class="$style.container")
-        div(:class="$style.title") {{title}}
+        div(:class="$style.title" @click="handleCopy(title)" :title="title + '（点击复制）'") {{title}}
         div(:class="$style.volumeContent")
           div(:class="$style.volume" @click.stop='handleChangeVolume' :title="`当前音量：${volumeStr}%`")
             div(:class="$style.volumeBar" :style="{ width: volumeStr + '%' }")
@@ -48,7 +48,7 @@ div(:class="$style.player")
 <script>
 import Lyric from 'lrc-file-parser'
 import { rendererSend } from '../../../common/icp'
-import { formatPlayTime2, getRandom, checkPath, setTitle } from '../../utils'
+import { formatPlayTime2, getRandom, checkPath, setTitle, clipboardWriteText } from '../../utils'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import { requestMsg } from '../../utils/message'
 
@@ -456,6 +456,9 @@ export default {
     handleSaveVolume(volume) {
       this.setVolume(volume)
     },
+    handleCopy(text) {
+      clipboardWriteText(text)
+    },
   },
 }
 </script>
@@ -468,8 +471,7 @@ export default {
   height: @height-player;
   // background-color: rgb(245, 245, 245);
   transition: @transition-theme;
-  transition-property: background-color, border-color;
-  background-color: @color-theme_2;
+  transition-property: border-color;
   border-top: 2px solid @color-theme;
   box-sizing: border-box;
   display: flex;
@@ -493,7 +495,7 @@ export default {
     max-height: 100%;
     transition: @transition-theme;
     transition-property: border-color;
-    border: 2px solid @color-theme_2;
+    border: 2px solid @color-theme_2-background_2;
   }
 }
 .right {
@@ -666,13 +668,12 @@ export default {
 each(@themes, {
   :global(#container.@{value}) {
     .player {
-      background-color: ~'@{color-@{value}-theme_2}';
       border-top-color: ~'@{color-@{value}-theme}';
     }
     .left {
       color: ~'@{color-@{value}-theme}';
       img {
-        border-color: ~'@{color-@{value}-theme_2}';
+        border-color: ~'@{color-@{value}-theme_2-background_2}';
       }
     }
     .play-btn {

src/renderer/components/core/Toolbar.vue

@@ -48,7 +48,6 @@ export default {
   display: flex;
   height: @height-toolbar;
   justify-content: flex-end;
-  background-color: @color-theme_2;
   align-items: center;
   padding-left: 15px;
   -webkit-app-region: drag;
@@ -58,13 +57,6 @@ export default {
 .input {
   -webkit-app-region: no-drag;
 }
-each(@themes, {
-  :global(#container.@{value}) {
-    .toolbar {
-      background-color: ~'@{color-@{value}-theme_2}';
-    }
-  }
-})
 
 // img {
 //   flex: none;

src/renderer/components/core/View.vue

@@ -13,7 +13,6 @@ div(:class="$style.view")
 
 .view {
   position: relative;
-  background-color: @color-theme_2;
   > * {
     position: absolute;
     width: 100%;
@@ -22,12 +21,4 @@ div(:class="$style.view")
   // overflow: hidden;
 }
 
-each(@themes, {
-  :global(#container.@{value}) {
-    .view {
-      background-color: ~'@{color-@{value}-theme_2}';
-    }
-  }
-})
-
 </style>

src/renderer/components/material/Checkbox.vue

@@ -156,7 +156,7 @@ export default {
       bottom: 0;
       left: 0;
       right: 0;
-      border: 1px solid #ccc;
+      border: 1px solid @color-theme_2-font-label;
       transition: border-color 0.2s ease;
       border-radius: 15%;
     }
@@ -196,7 +196,7 @@ each(@themes, {
         color: ~'@{color-@{value}-theme}';
         // border: 1px solid #ccc;
         &:after {
-          border-color: #ccc;
+          border-color: ~'@{color-@{value}-theme_2-font-label}';
         }
       }
     }

src/renderer/components/material/Select.vue

@@ -90,7 +90,7 @@ export default {
   border-left: 2px solid @color-tab-border-bottom;
   box-sizing: border-box;
   text-align: center;
-  border-top-left-radius: 3px;
+  border-top-left-radius: 4px;
   color: @color-btn;
   cursor: pointer;
 
@@ -108,7 +108,7 @@ export default {
   left: 0;
   border-bottom: 2px solid @color-tab-border-bottom;
   border-left: 2px solid @color-tab-border-bottom;
-  border-bottom-left-radius: 3px;
+  border-bottom-left-radius: 4px;
   background-color: @color-theme_2;
   overflow: hidden;
   opacity: 0;

src/renderer/components/material/SongList.vue

@@ -175,7 +175,6 @@ export default {
   height: 100%;
   display: flex;
   flex-flow: column nowrap;
-  background-color: @color-theme_2;
 }
 
 .list {
@@ -220,16 +219,17 @@ export default {
 
   p {
     font-size: 24px;
-    color: #ccc;
+    color: @color-theme_2-font-label;
   }
 }
 
 each(@themes, {
   :global(#container.@{value}) {
-    .thead {
-      background-color: ~'@color-@{value}-theme_2';
+    .noitem {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
     }
   }
 })
-
 </style>

src/renderer/components/material/Tab.vue

@@ -95,15 +95,15 @@ export default {
         margin-left: 0;
         button {
           border-top-left-radius: 3px;
-          // border-bottom-left-radius: 3px;
+          // border-bottom-left-radius: 4px;
         }
       }
       &:last-child {
         border-right: 2px solid @color-tab-border-top;
-        border-top-right-radius: 3px;
+        border-top-right-radius: 4px;
         button {
           border-top-right-radius: 3px;
-          // border-bottom-right-radius: 3px;
+          // border-bottom-right-radius: 4px;
         }
       }
       button {
@@ -122,7 +122,7 @@ export default {
         // border-left-color: @color-theme_2-hover;
         // border-right-color: @color-theme_2-hover;
         button {
-          background-color: @color-theme_2-hover;
+          background-color: @color-tab-btn-background-hover;
         }
       }
       &:active {
@@ -133,7 +133,7 @@ export default {
         }
       }
       &.active {
-        border-bottom-color: @color-theme_2;
+        border-bottom-color: @color-theme_2-background_2;
         border-top-color: @color-tab-border-bottom;
         border-left-color: @color-tab-border-bottom;
         border-right-color: @color-tab-border-bottom;
@@ -144,7 +144,7 @@ export default {
           width: 0;
         }
         button {
-          background-color: @color-theme_2;
+          background-color: @color-theme_2-background_2;
         }
       }
     }
@@ -193,7 +193,7 @@ each(@themes, {
             // border-left-color: ~'@{color-@{value}-theme_2-hover}';
             // border-right-color: ~'@{color-@{value}-theme_2-hover}';
             button {
-              background-color: ~'@{color-@{value}-theme_2-hover}';
+              background-color: ~'@{color-@{value}-tab-btn-background-hover}';
             }
           }
           &:active {
@@ -209,7 +209,7 @@ each(@themes, {
             border-left-color: ~'@{color-@{value}-tab-border-bottom}';
             border-right-color: ~'@{color-@{value}-tab-border-bottom}';
             button {
-              background-color: ~'@{color-@{value}-theme_2}';
+              background-color: ~'@{color-@{value}-theme_2-background_2}';
             }
           }
         }

src/renderer/components/material/VersionModal.vue

@@ -76,7 +76,7 @@ export default {
       this.setSetting(Object.assign({}, this.setting, { ignoreVersion: this.version.newVersion.version }))
     },
     handleOpenPageClick() {
-      openUrl('https://github.com/lyswhut/lx-music-desktop')
+      openUrl('https://github.com/lyswhut/lx-music-desktop#readme')
     },
     handleRestartClick(event) {
       this.handleClose()

src/renderer/store/modules/download.js

@@ -22,6 +22,8 @@ const state = {
 const dls = {}
 const tryNum = {}
 
+const filterFileName = /[\\/:*?#"<>|]/g
+
 // getters
 const getters = {
   list: state => state.list || [],
@@ -125,7 +127,7 @@ const actions = {
       url: null,
       fileName: `${rootState.setting.download.fileName
         .replace('歌名', musicInfo.name)
-        .replace('歌手', musicInfo.singer)}.${ext}`,
+        .replace('歌手', musicInfo.singer)}.${ext}`.replace(filterFileName, ''),
       progress: {
         downloaded: 0,
         total: 0,

src/renderer/store/state.js

@@ -44,6 +44,11 @@ export default {
       name: '灰常美丽',
       class: 'grey',
     },
+    {
+      id: 7,
+      name: '月里嫦娥',
+      class: 'midAutumn',
+    },
   ],
   version: {
     version,

src/renderer/views/List.vue

@@ -257,7 +257,7 @@ export default {
 
   p {
     font-size: 24px;
-    color: #ccc;
+    color: @color-theme_2-font-label;
   }
 }
 
@@ -270,6 +270,12 @@ each(@themes, {
         }
       }
     }
+    .no-item {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
   }
 })
+
 </style>

src/renderer/views/Search.vue

@@ -254,7 +254,17 @@ export default {
 
   p {
     font-size: 24px;
-    color: #ccc;
+    color: @color-theme_2-font-label;
   }
 }
+
+each(@themes, {
+  :global(#container.@{value}) {
+    .noitem {
+      p {
+        color: ~'@{color-@{value}-theme_2-font-label}';
+      }
+    }
+  }
+})
 </style>

src/renderer/views/Setting.vue

@@ -479,7 +479,9 @@ export default {
 
 .theme {
   display: flex;
+  flex-flow: row wrap;
   // padding: 0 15px;
+  margin-bottom: -20px;
 
   li {
     display: flex;
@@ -489,6 +491,7 @@ export default {
     // color: @color-theme;
     margin-right: 30px;
     transition: color .3s ease;
+    margin-bottom: 20px;
 
     &:last-child {
       margin-right: 0;
@@ -509,6 +512,9 @@ export default {
         width: 100%;
         height: 100%;
         border-radius: 4px;
+        background-position: center;
+        background-size: auto 100%;
+        background-repeat: no-repeat;
       }
     }
 
@@ -517,6 +523,7 @@ export default {
         span {
           &:after {
             background-color: ~'@{color-@{value}-theme}';
+            background-image: ~'@{color-@{value}-theme-bgimg}';
           }
         }
       }

src/renderer/views/SongList.vue

@@ -1,12 +1,8 @@
 <template lang="pug">
   div(:class="$style.container")
-    div(:class="$style.header")
-      material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
-      material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
-      material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
-    div(:class="$style.main")
-      transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-        div(:class="$style.songListDetail" v-show="isVisibleListDetail")
+    transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+      div(:class="$style.songListDetailContent" v-show="isVisibleListDetail")
+        div(:class="$style.songListDetail")
           div(:class="$style.songListHeader")
             div(:class="$style.songListHeaderLeft")
               img(:src="selectListInfo.img")
@@ -17,8 +13,13 @@
             div(:class="$style.songListHeaderRight")
               material-btn(:class="$style.closeDetailButton" @click="hideListDetail") 返回
           material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit" :total="listDetail.total" :list="listDetail.list")
-      transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
-        div.scroll(:class="$style.songList" ref="dom_scrollContent" v-show="!isVisibleListDetail")
+    transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
+      div(:class="$style.songListContent" v-show="!isVisibleListDetail")
+        div(:class="$style.header")
+          material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
+          material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
+          material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
+        div.scroll(:class="$style.songList" ref="dom_scrollContent")
           ul
             li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
               div(:class="$style.left")
@@ -269,14 +270,18 @@ export default {
   width: 80px;
 }
 
-.main {
+.songListContent, .songListDetailContent {
   flex: auto;
   overflow: hidden;
+}
+
+.songListContent {
+  display: flex;
+  flex-flow: column nowrap;
   // position: relative;
 }
 
 .song-list-header {
-  background-color: @color-theme_2;
   display: flex;
   flex-flow: row nowrap;
   height: 60px;
@@ -340,7 +345,6 @@ export default {
   height: 100%;
   overflow-y: auto;
   padding: 0 15px;
-  background-color: #fff;
   ul {
     display: flex;
     flex-flow: row wrap;