优化更新弹窗机制及其内容描述

publish/changeLog.md

@@ -1,8 +1,3 @@
-#### 优化
+### 优化
 
-- 大幅减少程序**播放时**对CPU与GPU的使用，经测试CPU使用减少60%以上，GPU使用减少90%以上，这应该能解决MAC系统上的温度上涨的问题
+- 优化更新弹窗机制及其内容描述
-
-#### 修复
-
-- 修复酷我源**搜索提示**、**排行榜**无法获取的问题
-- 修复咪咕源无法播放的问题

src/main/utils/autoUpdate.js

@@ -92,14 +92,14 @@ module.exports = isFirstCheckedUpdate => {
   })
   autoUpdater.on('error', err => {
     sendStatusToWindow('Error in auto-updater.')
-    handleSendEvent({ type: 'update-error', info: err })
+    handleSendEvent({ type: 'update-error', info: err.message })
   })
   autoUpdater.on('download-progress', progressObj => {
     let log_message = 'Download speed: ' + progressObj.bytesPerSecond
     log_message = log_message + ' - Downloaded ' + progressObj.percent + '%'
     log_message = log_message + ' (' + progressObj.transferred + '/' + progressObj.total + ')'
     sendStatusToWindow(log_message)
-    handleSendEvent({ type: 'download-progress', info: progressObj })
+    handleSendEvent({ type: 'update-progress', info: progressObj })
   })
   autoUpdater.on('update-downloaded', info => {
     sendStatusToWindow('Update downloaded.')

src/renderer/App.vue

@@ -108,33 +108,39 @@ export default {
       }
       ipcRenderer.on('update-available', (e, info) => {
         // this.showUpdateModal(true)
-        console.log(info)
+        // console.log(info)
-        this.setNewVersion({
+        this.getVersionInfo().catch(() => ({
           version: info.version,
+          desc: info.releaseNotes,
+        })).then(body => {
+          // console.log(body)
+          this.setNewVersion(body)
+          this.$nextTick(() => {
+            this.setVersionModalVisible({ isShow: true })
+          })
         })
       })
-      ipcRenderer.on('update-error', err => {
+      ipcRenderer.on('update-error', (event, err) => {
-        console.log(err)
+        // console.log(err)
-        if (!this.updateTimeout) return
-        this.setVersionModalVisible({ isError: true })
         this.clearUpdateTimeout()
+        this.setVersionModalVisible({ isError: true })
         this.$nextTick(() => {
           this.showUpdateModal()
         })
       })
-      ipcRenderer.on('update-progress', progress => {
+      ipcRenderer.on('update-progress', (event, progress) => {
-        console.log(progress)
+        // console.log(progress)
         this.setDownloadProgress(progress)
       })
       ipcRenderer.on('update-downloaded', info => {
-        console.log(info)
+        // console.log(info)
         this.clearUpdateTimeout()
-        this.setVersionModalVisible({ isError: false })
+        this.setVersionModalVisible({ isDownloaded: true })
-        this.showUpdateModal()
+        this.$nextTick(() => {
+          this.showUpdateModal()
+        })
       })
       ipcRenderer.on('update-not-available', () => {
-        if (!this.updateTimeout) return
-        if (this.setting.ignoreVersion) this.setSetting(Object.assign({}, this.setting, { ignoreVersion: null }))
         this.clearUpdateTimeout()
         this.setNewVersion({
           version: this.version.version,
@@ -143,11 +149,11 @@ export default {
       // 更新超时定时器
       this.updateTimeout = setTimeout(() => {
         this.updateTimeout = null
-        this.setVersionModalVisible({ isError: true })
+        this.setVersionModalVisible({ isTimeOut: true })
         this.$nextTick(() => {
           this.showUpdateModal()
         })
-      }, 180000)
+      }, 60 * 30 * 1000)
 
       this.initData()
       this.globalObj.apiSource = this.setting.apiSource
@@ -192,12 +198,18 @@ export default {
     showUpdateModal() {
       (this.version.newVersion && this.version.newVersion.history ? Promise.resolve(this.version.newVersion) : this.getVersionInfo().then(body => {
         this.setNewVersion(body)
-        if (body.version !== this.setting.ignoreVersion) this.setSetting(Object.assign({}, this.setting, { ignoreVersion: null }))
         return body
-      })).then(body => {
+      })).catch(() => {
-        if (body.version === this.version.version) return
+        this.setVersionModalVisible({ isUnknow: true })
-        if (this.version.isError && body.version === this.setting.ignoreVersion) return
+        let result = {
-
+          version: '0.0.0',
+          desc: null,
+        }
+        this.setNewVersion(result)
+        return result
+      }).then(result => {
+        if (result.version === this.version.version) return
+        console.log(this.version)
         this.$nextTick(() => {
           this.setVersionModalVisible({ isShow: true })
         })

src/renderer/components/material/VersionModal.vue

@@ -1,7 +1,31 @@
 <template lang="pug">
-material-modal(:show="version.showModal" @close="handleClose")
+material-modal(:show="version.showModal" @close="handleClose" v-if="version.newVersion")
-  main(:class="$style.main" v-if="version.newVersion")
+  main(:class="$style.main" v-if="version.isDownloaded")
-    h2 {{ version.isError ? (isUnknow ? '❓ 版本信息获取失败 ❓' : '🌟发现新版本🌟') : '🚀程序更新🚀'}}
+    h2 🚀程序更新🚀
+
+    div.scroll(:class="$style.info")
+      div(:class="$style.current")
+        h3 最新版本：{{version.newVersion.version}}
+        h3 当前版本：{{version.version}}
+        h3 版本变化：
+        p(:class="$style.desc" v-html="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")
+    div(:class="$style.footer")
+      div(:class="$style.desc")
+        p 新版本已下载完毕，
+        p
+          | 你可以选择
+          strong 立即重启更新
+          | 或稍后
+          strong 关闭程序时
+          | 自动更新~
+      material-btn(:class="$style.btn" @click.onec="handleRestartClick") 立即重启更新
+  main(:class="$style.main" v-else-if="version.isError && !version.isUnknow && version.newVersion.version != version.version")
+    h2 ❌ 版本更新出错 ❌
 
     div.scroll(:class="$style.info")
       div(:class="$style.current")
@@ -15,44 +39,97 @@ material-modal(:show="version.showModal" @close="handleClose")
           h4 v{{ver.version}}
           p(v-html="ver.desc")
 
-    div(:class="$style.footer" v-if="version.isError")
+    div(:class="$style.footer")
-      div(:class="$style.desc" v-if="!isUnknow")
+      div(:class="$style.desc")
         p 发现有新版本啦，但是自动更新功能出问题了，
         p
-          | 你现在可以选择继续使用当前版本或
+          | 你可以去&nbsp;
-          strong 去发布页下载新版本
+          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
-          | ，
+          | &nbsp;或&nbsp;
+          strong.hover.underline(@click="handleOpenUrl('https://www.lanzous.com/b906260/')" title="点击打开") 网盘
+          | (密码：
+          strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+          | )&nbsp;下载新版本，
         p
           | 国内Windows/MAC用户推荐到
-          strong.hover.underline(@click="handleOpenUrl('https://www.lanzous.com/b906260/')") 网盘(点击打开)
+          strong 网盘
-          | 下载，密码：
+          | 下载。
-          strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+  main(:class="$style.main" v-else-if="version.isTimeOut")
-      div(:class="$style.btns")
+    h2 ❗️ 新版本下载超时 ❗️
-        material-btn(:class="$style.btn" @click.onec="handleIgnoreClick") 忽略该版本
+    div(:class="$style.desc")
-        material-btn(:class="$style.btn" @click.onec="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop#readme')") 去软件发布页
+      p 你当前所在网络访问GitHub较慢，导致新版本下载超时（已经下了半个钟了😳），建议手动更新版本！
-    div(:class="$style.footer" v-else)
+      p
-      div(:class="$style.desc")
+        | 你可以去
-        p 新版本已下载完毕，
+        material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
-        p
+        | 或
-          | 你可以选择
+        material-btn(min @click="handleOpenUrl('https://www.lanzous.com/b906260/')" title="点击打开") 网盘
-          strong 立即重启更新
+        | (密码：
-          | 或稍后
+        strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
-          strong 关闭程序时
+        | )下载新版本，
-          | 自动更新~
+      p
-      material-btn(:class="$style.btn" @click.onec="handleRestartClick") 立即重启更新
+        | 国内Windows/MAC用户推荐到
+        strong 网盘
+        | 下载。
+      p 当前下载进度：{{progress}}
+  main(:class="$style.main" v-else-if="version.isUnknow")
+    h2 ❓ 获取最新版本信息失败 ❓
 
+    div.scroll(: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://www.lanzous.com/b906260/')" title="点击打开") 网盘
+            | (密码：
+            strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+            | )查看它们的
+            strong 版本号
+            | 与当前版本({{version.version}})对比是否一样，
+          p 若一样则不必理会该弹窗，直接关闭即可，否则请手动下载新版本更新。
+  main(:class="$style.main" v-else)
+    h2 🌟发现新版本🌟
+
+    div.scroll(:class="$style.info")
+      div(:class="$style.current")
+        h3 最新版本：{{version.newVersion.version}}
+        h3 当前版本：{{version.version}}
+        h3 版本变化：
+        p(:class="$style.desc" v-html="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")
+
+    div(:class="$style.footer")
+      div(:class="$style.desc")
+        p 发现有新版本啦，正在努力更新中，若下载太慢可以手动更新哦~
+        p
+          | 手动更新可以去&nbsp;
+          strong.hover.underline(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" title="点击打开") 软件发布页
+          | &nbsp;或&nbsp;
+          strong.hover.underline(@click="handleOpenUrl('https://www.lanzous.com/b906260/')" title="点击打开") 网盘
+          | (密码：
+          strong.hover(@click="handleCopy('glqw')" title="点击复制") glqw
+          | )&nbsp;下载，
+        p 国内Windows/MAC用户推荐到网盘下载。
+        p 当前下载进度：{{progress}}
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import { rendererSend } from '../../../common/ipc'
-import { checkVersion, openUrl, clipboardWriteText } from '../../utils'
+import { checkVersion, openUrl, clipboardWriteText, sizeFormate } from '../../utils'
 
 export default {
   computed: {
     ...mapGetters(['version', 'setting']),
     history() {
-      if (!this.version.newVersion) return []
+      if (!this.version.newVersion || !this.version.newVersion.history) return []
       let arr = []
       let currentVer = this.version.version
       this.version.newVersion.history.forEach(ver => {
@@ -61,8 +138,10 @@ export default {
 
       return arr
     },
-    isUnknow() {
+    progress() {
-      return this.version.newVersion.version == '0.0.0'
+      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`
+        : '初始化中...'
     },
   },
   methods: {
@@ -72,11 +151,6 @@ export default {
         isShow: false,
       })
     },
-    handleIgnoreClick(event) {
-      this.handleClose()
-      // event.target.disabled = true
-      this.setSetting(Object.assign({}, this.setting, { ignoreVersion: this.version.newVersion.version }))
-    },
     handleOpenUrl(url) {
       openUrl(url)
     },
@@ -148,6 +222,10 @@ export default {
     list-style: initial;
     padding-inline-start: 30px;
   }
+  p {
+    font-size: 14px;
+    line-height: 1.5;
+  }
 }
 
 .history {
@@ -175,22 +253,23 @@ export default {
 .footer {
   flex: 0 0 none;
   .desc {
-    font-size: 12px;
     padding-top: 10px;
+    font-size: 12px;
     color: @color-theme;
     line-height: 1.2;
+
+    p {
+      font-size: 12px;
+      color: @color-theme;
+      line-height: 1.2;
+    }
   }
 }
 .btn {
+  margin-top: 10px;
   display: block;
   width: 100%;
 }
-.btns {
-  display: grid;
-  padding-top: 10px;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 0 10px;
-}
 
 each(@themes, {
   :global(#container.@{value}) {

src/renderer/store/actions.js

@@ -9,11 +9,7 @@ export default {
         timeout: 20000,
       }, (err, resp, body) => {
         if (err) {
-          return ++retryNum > 3 ? resolve({
+          return ++retryNum > 3 ? reject() : this.dispatch('getVersionInfo', retryNum).then(ver => resolve(ver)).catch(err => reject(err))
-            version: '0.0.0',
-            desc: '<h3>版本信息获取失败</h3><ul><li>更新信息获取失败，可能是无法访问Github导致的，请手动检查更新！</li><li>检查方法：去设置-关于洛雪音乐打开<strong>开源地址</strong>或<strong>网盘地址</strong>查看<strong>版本号</strong>与当前版本对比是否最新</li></ul>',
-            history: [],
-          }) : this.dispatch('getVersionInfo', retryNum).then(ver => resolve(ver))
         }
         resolve(body)
       })

src/renderer/store/mutations.js

@@ -27,9 +27,12 @@ export default {
   setDownloadProgress(state, info) {
     state.version.downloadProgress = info
   },
-  setVersionModalVisible(state, { isShow, isError }) {
+  setVersionModalVisible(state, { isShow, isError, isDownloaded, isTimeOut, isUnknow }) {
     if (isShow !== undefined) state.version.showModal = isShow
     if (isError !== undefined) state.version.isError = isError
+    if (isTimeOut !== undefined) state.version.isTimeOut = isTimeOut
+    if (isDownloaded !== undefined) state.version.isDownloaded = isDownloaded
+    if (isUnknow !== undefined) state.version.isUnknow = isUnknow
   },
   setVolume(state, val) {
     state.setting.player.volume = val

src/renderer/store/state.js

@@ -62,6 +62,9 @@ export default {
     newVersion: null,
     showModal: false,
     isError: false,
+    isTimeOut: false,
+    isUnknow: false,
+    isDownloaded: false,
     downloadProgress: null,
   },
   userInfo: null,

src/renderer/utils/index.js

@@ -221,7 +221,6 @@ export const updateSetting = setting => {
     sourceId: 'kw',
     apiSource: 'test',
     randomAnimate: true,
-    ignoreVersion: null,
   }
   const overwriteSetting = {
     version: defaultVersion,

src/renderer/views/Setting.vue

@@ -120,10 +120,13 @@ div.scroll(:class="$style.setting")
       p.small
         | 最新版本：{{version.newVersion ? version.newVersion.version : '未知'}}
       p.small 当前版本：{{version.version}}
-      p.small(v-if="version.newVersion")
+      p.small(v-if="this.version.downloadProgress" style="line-height: 1.5;")
+        | 发现新版本并在努力下载中，请稍后...⏳
+        br
+        | 下载进度：{{downloadProgress}}
+      p(v-if="version.newVersion")
         span(v-if="isLatestVer") 软件已是最新，尽情地体验吧~🥂
-        material-btn(v-else-if="setting.ignoreVersion || version.isError" :class="[$style.btn, $style.gapLeft]" min @click="showUpdateModal") 打开更新窗口 🚀
+        material-btn(v-else :class="[$style.btn, $style.gapLeft]" min @click="showUpdateModal") 打开更新窗口 🚀
-        span(v-else) 发现新版本并在努力下载中，请稍等...⏳
       p.small(v-else) 检查更新中...
     dt 关于洛雪音乐
     dd
@@ -198,6 +201,11 @@ export default {
     isShowRebootBtn() {
       return this.current_setting.windowSizeId != window.currentWindowSizeId
     },
+    downloadProgress() {
+      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`
+        : '更新初始化中...'
+    },
   },
   data() {
     return {