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

pull/96/head
lyswhut 2019-09-09 00:33:24 +08:00
parent 22d56d31a9
commit 67ff5e5a4a
9 changed files with 50 additions and 25 deletions

View File

@ -7,8 +7,12 @@
### 优化
- 略微优化最小化按钮字符
- 优化试听列表的加载体验,当歌曲数过多时列表将延迟加载
### 修复
- 修复下载管理的一些Bug
### 移除
- 因接口失效移除网易云音源酷狗音源仅支持播放128k音质

View File

@ -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;
}
}

View File

@ -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:

View File

@ -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
},

View File

@ -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'
}

View File

@ -117,7 +117,7 @@ export default {
},
handleAddDownloadMultiple(type) {
switch (this.source) {
// case 'kg':
case 'kg':
case 'wy':
type = '128k'
}

View File

@ -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 {

View File

@ -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
| 落雪无痕

View File

@ -191,7 +191,7 @@ export default {
},
handleAddDownloadMultiple(type) {
switch (this.source) {
// case 'kg':
case 'kg':
case 'wy':
type = '128k'
}