优化列表加载体验，移除失效源

lyswhut · lyswhut · commit 67ff5e5a4ad1 · 2019-09-09T00:33:24.000+08:00
diff --git a/publish/changeLog.md b/publish/changeLog.md
@@ -7,8 +7,12 @@
 ### 优化
 
 - 略微优化最小化按钮字符
+- 优化试听列表的加载体验，当歌曲数过多时列表将延迟加载
 
 ### 修复
 
 - 修复下载管理的一些Bug
 
+### 移除
+
+- 因接口失效，移除网易云音源，酷狗音源仅支持播放128k音质
diff --git a/src/renderer/components/core/Toolbar.vue b/src/renderer/components/core/Toolbar.vue
@@ -105,8 +105,8 @@ each(@themes, {
       content: ' ';
       display: block;
       border-radius: 50%;
-      width: 13px;
-      height: 13px;
+      width: 14px;
+      height: 14px;
       transition: background-color 0.2s ease-in-out;
     }
 
@@ -145,7 +145,7 @@ each(@themes, {
     width: 8px;
     height: 2px;
     left: @height-toolbar / 2 - 4;
-    top: @height-toolbar / 2;
+    top: @height-toolbar / 2 - 1;
     background-color: #fff;
   }
 }
diff --git a/src/renderer/components/material/DownloadModal.vue b/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" :title="!checkSource(type.type) && '目前网易云音源仅支持下载128k音质'" :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" :title="!checkSource(type.type) && '目前酷狗音源仅支持下载128k音质'" :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>
 
@@ -52,7 +52,7 @@ export default {
     checkSource(type) {
       switch (this.musicInfo.source) {
         case 'wy':
-        // case 'kg':
+        case 'kg':
           return type == '128k'
 
         default:
diff --git a/src/renderer/components/material/SongList.vue b/src/renderer/components/material/SongList.vue
@@ -27,7 +27,7 @@ div(:class="$style.songList")
               td.break(style="width: 20%;") {{item.singer}}
               td.break(style="width: 22%;") {{item.albumName}}
               td(style="width: 18%;")
-                material-list-buttons(:index="index" :search-btn="true" :play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx')" :download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx')" :remove-btn="false" @btn-click="handleListBtnClick")
+                material-list-buttons(:index="index" :search-btn="true" :play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')" :download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')" :remove-btn="false" @btn-click="handleListBtnClick")
                 //- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
                 //- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
                 //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
@@ -136,7 +136,7 @@ export default {
         this.clickIndex = index
         return
       }
-      this.emitEvent((this.source == 'kw' || (!this.isAPITemp && this.list[index].source != 'tx')) ? 'testPlay' : 'search', index)
+      this.emitEvent((this.source == 'kw' || (!this.isAPITemp && this.list[index].source != 'tx' && this.list[index].source != 'wy')) ? 'testPlay' : 'search', index)
       this.clickTime = 0
       this.clickIndex = -1
     },
diff --git a/src/renderer/utils/music/utils.js b/src/renderer/utils/music/utils.js
@@ -7,7 +7,7 @@
 const types = ['flac', 'ape', '320k', '192k', '128k']
 export const getMusicType = (info, type) => {
   switch (window.globalObj.apiSource) {
-    // case 'kg':
+    case 'kg':
     case 'wy':
       return '128k'
   }
diff --git a/src/renderer/views/Leaderboard.vue b/src/renderer/views/Leaderboard.vue
@@ -117,7 +117,7 @@ export default {
     },
     handleAddDownloadMultiple(type) {
       switch (this.source) {
-        // case 'kg':
+        case 'kg':
         case 'wy':
           type = '128k'
       }
diff --git a/src/renderer/views/List.vue b/src/renderer/views/List.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   div(:class="$style.list")
     //- transition
-    div(v-if="list.length" :class="$style.content")
+    div(v-if="delayShow && list.length" :class="$style.content")
       div(:class="$style.thead")
         table
           thead
@@ -18,7 +18,7 @@
         table
           tbody
             tr(v-for='(item, index) in list' :key='item.songmid'
-              @click="handleDoubleClick(index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') || item.source == 'tx' ? $style.disabled : '']")
+              @click="handleDoubleClick(index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') || item.source == 'tx' || item.source == 'wy' ? $style.disabled : '']")
               td.nobreak.center(style="width: 37px;" @click.stop)
                   material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
               td.break(style="width: 25%;") {{item.name}}
@@ -37,6 +37,7 @@
                 //- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
               td(style="width: 10%;") {{item.interval || '--/--'}}
     div(:class="$style.noItem" v-else)
+      p 加载中...
     material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
     material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
     material-flow-btn(:show="isShowEditBtn" :add-btn="false" :play-btn="false" @btn-click="handleFlowBtnClick")
@@ -57,6 +58,7 @@ export default {
       isIndeterminate: false,
       isShowEditBtn: false,
       isShowDownloadMultiple: false,
+      delayShow: false,
     }
   },
   computed: {
@@ -119,6 +121,11 @@ export default {
   //   this.handleSearch(this.text, this.page)
   // }
   // },
+  mounted() {
+    if (this.list.length > 150) {
+      setTimeout(() => this.delayShow = true, 200)
+    } else this.delayShow = true
+  },
   methods: {
     ...mapMutations('list', ['defaultListRemove', 'defaultListRemoveMultiple']),
     ...mapActions('download', ['createDownload', 'createDownloadMultiple']),
@@ -137,7 +144,7 @@ export default {
       this.clickIndex = -1
     },
     testPlay(index) {
-      if ((this.isAPITemp && this.list[index].source != 'kw') || this.list[index].source == 'tx') return
+      if ((this.isAPITemp && this.list[index].source != 'kw') || this.list[index].source == 'tx' || this.list[index].source == 'wy') return
       this.setList({ list: this.list, listId: 'test', index })
     },
     handleRemove(index) {
@@ -147,7 +154,7 @@ export default {
       switch (info.action) {
         case 'download':
           const minfo = this.list[info.index]
-          if ((this.isAPITemp && minfo.source != 'kw') || minfo.source == 'tx') return
+          if ((this.isAPITemp && minfo.source != 'kw') || minfo.source == 'tx' || minfo.source == 'wy') return
           this.musicInfo = minfo
           this.$nextTick(() => {
             this.isShowDownload = true
@@ -173,7 +180,7 @@ export default {
       this.selectdData = []
     },
     handleAddDownloadMultiple(type) {
-      const list = this.setting.apiSource == 'temp' ? this.selectdData.filter(s => s.source == 'kw') : this.selectdData.filter(s => s.source != 'tx')
+      const list = this.setting.apiSource == 'temp' ? this.selectdData.filter(s => s.source == 'kw') : this.selectdData.filter(s => s.source != 'tx' && s.source != 'wy')
       this.createDownloadMultiple({ list, type })
       this.resetSelect()
       this.isShowDownloadMultiple = false
@@ -239,6 +246,20 @@ export default {
   opacity: .5;
 }
 
+.no-item {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    font-size: 24px;
+    color: #ccc;
+  }
+}
+
 each(@themes, {
   :global(#container.@{value}) {
     .tbody {
diff --git a/src/renderer/views/Setting.vue b/src/renderer/views/Setting.vue
@@ -103,16 +103,6 @@ div.scroll(:class="$style.setting")
       p.small
         | 软件的常见问题可转至：
         span.hover.underline(title="点击打开" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop#常见问题')") 常见问题
-      p.small
-        |  本软件仅用于学习交流使用，禁止将本软件用于
-        strong 非法用途
-        | 或
-        strong 商业用途
-        | 。
-      p.small
-          | 使用本软件造成的一切后果由
-          strong 使用者
-          | 承担！
       //- p.small
           | 怀念曾经的
           strong @messoer
@@ -130,6 +120,16 @@ div.scroll(:class="$style.setting")
         span 如果你资金充裕，还可以
         material-btn(@click="handleOpenUrl('https://cdn.stsky.cn/qrc.png')" min title="土豪，你好 🙂") 打赏下作者
         span ，以帮我分担点服务器费用~❤️
+      p.small
+        |  本软件仅用于学习交流使用，禁止将本软件用于
+        strong 非法用途
+        | 或
+        strong 商业用途
+        | 。
+      p.small
+          | 使用本软件造成的一切后果由
+          strong 使用者
+          | 承担！
       p
         small By：
         | 落雪无痕
diff --git a/src/renderer/views/SongList.vue b/src/renderer/views/SongList.vue
@@ -191,7 +191,7 @@ export default {
     },
     handleAddDownloadMultiple(type) {
       switch (this.source) {
-        // case 'kg':
+        case 'kg':
         case 'wy':
           type = '128k'
       }

Original file line number	Diff line number	Diff line change
`@@ -105,8 +105,8 @@ each(@themes, {`
`105`	`105`	`content: ' ';`
`106`	`106`	`display: block;`
`107`	`107`	`border-radius: 50%;`
`108`		`- width: 13px;`
`109`		`- height: 13px;`
	`108`	`+ width: 14px;`
	`109`	`+ height: 14px;`
`110`	`110`	`transition: background-color 0.2s ease-in-out;`
`111`	`111`	`}`
`112`	`112`
`@@ -145,7 +145,7 @@ each(@themes, {`
`145`	`145`	`width: 8px;`
`146`	`146`	`height: 2px;`
`147`	`147`	`left: @height-toolbar / 2 - 4;`
`148`		`- top: @height-toolbar / 2;`
	`148`	`+ top: @height-toolbar / 2 - 1;`
`149`	`149`	`background-color: #fff;`
`150`	`150`	`}`
`151`	`151`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`const types = ['flac', 'ape', '320k', '192k', '128k']`
`8`	`8`	`export const getMusicType = (info, type) => {`
`9`	`9`	`switch (window.globalObj.apiSource) {`
`10`		`- // case 'kg':`
	`10`	`+ case 'kg':`
`11`	`11`	`case 'wy':`
`12`	`12`	`return '128k'`
`13`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ export default {`
`117`	`117`	`},`
`118`	`118`	`handleAddDownloadMultiple(type) {`
`119`	`119`	`switch (this.source) {`
`120`		`- // case 'kg':`
	`120`	`+ case 'kg':`
`121`	`121`	`case 'wy':`
`122`	`122`	`type = '128k'`
`123`	`123`	`}`
Original file line number	Diff line number	Diff line change
`@@ -191,7 +191,7 @@ export default {`
`191`	`191`	`},`
`192`	`192`	`handleAddDownloadMultiple(type) {`
`193`	`193`	`switch (this.source) {`
`194`		`- // case 'kg':`
	`194`	`+ case 'kg':`
`195`	`195`	`case 'wy':`
`196`	`196`	`type = '128k'`
`197`	`197`	`}`