ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

重构歌曲列表

Browse Source
This commit is contained in:
lyswhut
2019-09-01 18:09:54 +08:00
parent c81c33a430
commit 78c0badd95
15 changed files with 662 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/Leaderboard.vue
+16 -93
View File
@@ -3,40 +3,7 @@
div(:class="$style.header")
material-tab(:class="$style.tab" :list="types" item-key="id" item-name="name" v-model="tabId")
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
div(:class="$style.content")
div(v-if="list.length" :class="$style.list")
div(:class="$style.thead")
table
thead
tr
th.nobreak.center(style="width: 37px;")
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData"
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? '全不选' : '全选'")
th.nobreak(style="width: 25%;") 歌曲名
th.nobreak(style="width: 20%;") 歌手
th.nobreak(style="width: 22%;") 专辑
th.nobreak(style="width: 18%;") 操作
th.nobreak(style="width: 10%;") 时长
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
table
tbody
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick(index)")
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}}
//- span.badge.badge-info(v-if="item._types['320k']") 高品质
//- span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
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")
//- 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)') ＋
td(style="width: 10%;") {{item.interval || '--/--'}}
div(:class="$style.pagination")
material-pagination(:count="info.total" :limit="info.limit" :page="info.page" @btn-click="handleTogglePage")
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :list="list")
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 && (source == 'kw' || !isAPITemp)" :remove-btn="false" @btn-click="handleFlowBtnClick")
@@ -44,8 +11,6 @@
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { scrollTo } from '../utils'
// import music from '../utils/music'
export default {
name: 'Leaderboard',
data() {
@@ -81,24 +46,23 @@ export default {
if (!o && this.page !== 1) return
this.getList(1).then(() => {
this.page = this.info.page
scrollTo(this.$refs.dom_scrollContent, 0)
})
},
source(n, o) {
this.setLeaderboard({ source: n })
if (o) this.tabId = this.types[0] && this.types[0].id
},
selectdData(n) {
const len = n.length
if (len) {
this.isSelectAll = true
this.isIndeterminate = len !== this.list.length
this.isShowEditBtn = true
} else {
this.isSelectAll = false
this.isShowEditBtn = false
}
},
// selectdData(n) {
// const len = n.length
// if (len) {
// this.isSelectAll = true
// this.isIndeterminate = len !== this.list.length
// this.isShowEditBtn = true
// } else {
// this.isSelectAll = false
// this.isShowEditBtn = false
// }
// },
list() {
this.resetSelect()
},
@@ -177,9 +141,6 @@ export default {
handleTogglePage(page) {
this.getList(page).then(() => {
this.page = this.info.page
this.$nextTick(() => {
scrollTo(this.$refs.dom_scrollContent, 0)
})
})
},
handleSelectAllData(isSelect) {
@@ -218,6 +179,9 @@ export default {
break
}
},
handleSongListAction({ action, data }) {
console.log(action, data)
},
},
}
</script>
@@ -250,46 +214,5 @@ export default {
overflow: hidden;
flex-flow: column nowrap;
}
.list {
position: relative;
height: 100%;
font-size: 14px;
display: flex;
flex-flow: column nowrap;
// table {
// position: relative;
// thead {
// position: fixed;
// width: 100%;
// th {
// width: 100%;
// }
// }
// }
}
.thead {
flex: none;
}
.tbody {
flex: auto;
overflow-y: auto;
td {
font-size: 12px;
:global(.badge) {
margin-right: 3px;
&:first-child {
margin-left: 3px;
}
&:last-child {
margin-right: 0;
}
}
}
}
.pagination {
text-align: center;
padding: 15px 0;
// left: 50%;
// transform: translateX(-50%);
}
</style>
src/renderer/views/Setting.vue
+19 -4
View File
@@ -81,7 +81,12 @@ div.scroll(:class="$style.setting")
dd
p.small
| 本软件完全免费，代码已开源，开源地址：
span.hover(@click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop')") https://github.com/lyswhut/lx-music-desktop
span.hover(title="点击打开" @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop#readme')") https://github.com/lyswhut/lx-music-desktop
p.small
| 最新版网盘下载地址（网盘内有MAC、windows版）：
span.hover(title="点击打开" @click="handleOpenUrl('https://www.lanzous.com/b906260/')") https://www.lanzous.com/b906260/
| &nbsp;&nbsp;密码：
span.hover(title="点击复制" @click="clipboardWriteText('glqw')") glqw
p.small
| 本软件仅用于学习交流使用，禁止将本软件用于
strong 非法用途
@@ -101,6 +106,10 @@ div.scroll(:class="$style.setting")
| 若觉得好用的话可以去 GitHub 点个
strong star
| 支持作者哦~~🍻
p
span 如果你资金充裕，还可以
material-btn(@click="handleOpenUrl('https://cdn.stsky.cn/qrc.png')" min title="土豪，你好 🙂") 打赏下作者
span ，以帮我分担点服务器费用~❤️
p
small By：
| 落雪无痕
@@ -108,7 +117,7 @@ div.scroll(:class="$style.setting")
<script>
import { mapGetters, mapMutations } from 'vuex'
import { openDirInExplorer, openSelectDir, openSaveDir, updateSetting, openUrl } from '../utils'
import { openDirInExplorer, openSelectDir, openSaveDir, updateSetting, openUrl, clipboardWriteText } from '../utils'
import { rendererSend } from '../../common/icp'
import fs from 'fs'
@@ -175,12 +184,12 @@ export default {
// },
{
id: 'test',
label: '测试接口（软件的大部分功能可用，该接口访问速度较慢，请耐心等待）',
label: '测试接口（软件的大部分功能可用，该接口访问速度较慢）',
disabled: false,
},
{
id: 'temp',
label: '临时接口（软件的某些功能不可用，该接口访问速度较慢，请耐心等待）',
label: '临时接口（软件的某些功能不可用，该接口比测试接口快一些，建议测试接口不可用再使用本接口）',
disabled: false,
},
],
@@ -379,6 +388,12 @@ export default {
showUpdateModal() {
this.setVersionModalVisible({ isShow: true })
},
clipboardWriteText(text) {
clipboardWriteText(text)
},
openRewardModal() {
},
},
}
</script>
src/renderer/views/SongList.vue
+296 -6
View File
@@ -1,20 +1,310 @@
<template lang="pug">
div
h2 推荐
div(:class="$style.leaderboard")
div(:class="$style.header")
//- material-tab(:class="$style.tab" :list="types" 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.content")
div(v-if="list.length" :class="$style.list")
div(:class="$style.thead")
table
thead
tr
th.nobreak.center(style="width: 37px;")
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData"
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? '全不选' : '全选'")
th.nobreak(style="width: 25%;") 歌曲名
th.nobreak(style="width: 20%;") 歌手
th.nobreak(style="width: 22%;") 专辑
th.nobreak(style="width: 18%;") 操作
th.nobreak(style="width: 10%;") 时长
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
table
tbody
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick(index)")
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}}
//- span.badge.badge-info(v-if="item._types['320k']") 高品质
//- span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
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")
//- 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)') ＋
td(style="width: 10%;") {{item.interval || '--/--'}}
div(:class="$style.pagination")
material-pagination(:count="info.total" :limit="info.limit" :page="info.page" @btn-click="handleTogglePage")
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 && (source == 'kw' || !isAPITemp)" :remove-btn="false" @btn-click="handleFlowBtnClick")
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { scrollTo } from '../utils'
// import music from '../utils/music'
export default {
name: 'SongList',
name: 'Leaderboard',
data() {
return {
count: 0,
tagId: null,
sortId: null,
source: null,
listPage: 1,
songListPage: 1,
clickTime: 0,
clickIndex: -1,
isShowDownload: false,
musicInfo: null,
selectdData: [],
isSelectAll: false,
isIndeterminate: false,
isShowEditBtn: false,
isShowDownloadMultiple: false,
}
},
computed: {
...mapGetters(['setting']),
...mapGetters('songList', ['sourceInfo', 'tags', 'listData', 'listDetail']),
...mapGetters('list', ['defaultList']),
types() {
return this.source ? this.sourceInfo.sources[this.source] : []
},
isAPITemp() {
return this.setting.apiSource == 'temp'
},
},
watch: {
sortId(n, o) {
this.setSongList({ sortId: n })
if (!o && this.listPage !== 1) return
this.getList(1).then(() => {
this.listPage = this.info.listPage
scrollTo(this.$refs.dom_scrollContent, 0)
})
},
tagId(n, o) {
this.setSongList({ sortId: n })
if (!o && this.songListPage !== 1) return
this.getList(1).then(() => {
this.songListPage = this.info.songListPage
scrollTo(this.$refs.dom_scrollContent, 0)
})
},
source(n, o) {
this.setSongList({ source: n })
if (o) {
this.tagId = this.tags[0] && this.tags[0].id
this.sortType = this.sortList[0] && this.sortList[0].id
}
},
selectdData(n) {
const len = n.length
if (len) {
this.isSelectAll = true
this.isIndeterminate = len !== this.list.length
this.isShowEditBtn = true
} else {
this.isSelectAll = false
this.isShowEditBtn = false
}
},
list() {
this.resetSelect()
},
},
mounted() {
this.source = this.setting.songList.source
// this.sortId = this.setting.songList.sortId
this.listPage = this.listData.page
this.songListPage = this.listDetail.page
},
methods: {
add() {
this.count++
...mapMutations(['setSongList']),
...mapActions('songList', ['getTags', 'getList', 'getListDetail']),
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
...mapMutations('list', ['defaultListAdd', 'defaultListAddMultiple']),
...mapMutations('player', ['setList']),
handleDoubleClick(index) {
if (
window.performance.now() - this.clickTime > 400 ||
this.clickIndex !== index
) {
this.clickTime = window.performance.now()
this.clickIndex = index
return
}
(this.source == 'kw' || (!this.isAPITemp && this.list[index].source != 'tx')) ? this.testPlay(index) : this.handleSearch(index)
this.clickTime = 0
this.clickIndex = -1
},
handleListBtnClick(info) {
switch (info.action) {
case 'download':
this.musicInfo = this.list[info.index]
this.$nextTick(() => {
this.isShowDownload = true
})
break
case 'play':
this.testPlay(info.index)
break
case 'search':
this.handleSearch(info.index)
break
// case 'add':
// break
}
},
testPlay(index) {
let targetSong
if (index == null) {
targetSong = this.selectdData[0]
this.defaultListAddMultiple(this.selectdData)
} else {
targetSong = this.list[index]
this.defaultListAdd(targetSong)
}
let targetIndex = this.defaultList.list.findIndex(
s => s.songmid === targetSong.songmid
)
if (targetIndex > -1) {
this.setList({
list: this.defaultList.list,
listId: 'test',
index: targetIndex,
})
}
},
handleSearch(index) {
const info = this.list[index]
this.$router.push({
path: 'search',
query: {
text: `${info.name} ${info.singer}`,
},
})
},
handleTogglePage(page) {
this.getList(page).then(() => {
this.page = this.info.page
this.$nextTick(() => {
scrollTo(this.$refs.dom_scrollContent, 0)
})
})
},
handleSelectAllData(isSelect) {
this.selectdData = isSelect ? [...this.list] : []
},
resetSelect() {
this.isSelectAll = false
this.selectdData = []
},
handleAddDownload(type) {
this.createDownload({ musicInfo: this.musicInfo, type })
this.isShowDownload = false
},
handleAddDownloadMultiple(type) {
switch (this.source) {
// case 'kg':
case 'wy':
type = '128k'
}
this.createDownloadMultiple({ list: [...this.selectdData], type })
this.resetSelect()
this.isShowDownloadMultiple = false
},
handleFlowBtnClick(action) {
switch (action) {
case 'download':
this.isShowDownloadMultiple = true
break
case 'play':
this.testPlay()
this.resetSelect()
break
case 'add':
this.defaultListAddMultiple(this.selectdData)
this.resetSelect()
break
}
},
},
}
</script>
<style lang="less" module>
@import '../assets/styles/layout.less';
.leaderboard {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.header {
flex: none;
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.tab {
flex: auto;
}
.select {
flex: none;
width: 80px;
}
.content {
flex: auto;
display: flex;
overflow: hidden;
flex-flow: column nowrap;
}
.list {
position: relative;
height: 100%;
font-size: 14px;
display: flex;
flex-flow: column nowrap;
// table {
// position: relative;
// thead {
// position: fixed;
// width: 100%;
// th {
// width: 100%;
// }
// }
// }
}
.thead {
flex: none;
}
.tbody {
flex: auto;
overflow-y: auto;
td {
font-size: 12px;
:global(.badge) {
margin-right: 3px;
&:first-child {
margin-left: 3px;
}
&:last-child {
margin-right: 0;
}
}
}
}
.pagination {
text-align: center;
padding: 15px 0;
// left: 50%;
// transform: translateX(-50%);
}
</style>