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-08-19 18:19:39 +08:00
parent 8817318a53
commit 601e1a67a1
26 changed files with 750 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/material/Checkbox.vue
+1 -1
View File
@@ -10,7 +10,7 @@ div(:class="$style.checkbox")
div(v-else)
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
use(xlink:href='#icon-check-true')
span(v-if="label != null") {{label}}
span(v-if="label != null" v-html="label")
</template>
<script>
src/renderer/components/material/DownloadMultipleModal.vue
+94
View File
@@ -0,0 +1,94 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2
| 已选择 {{list.length}} 首歌曲
br
| 请选择要优先下载的音质
material-btn(:class="$style.btn" @click="handleClick('128k')") 普通音质 - 128K
material-btn(:class="$style.btn" @click="handleClick('320k')") 高品音质 - 320K
material-btn(:class="$style.btn" @click="handleClick('ape')") 无损音质 - APE
material-btn(:class="$style.btn" @click="handleClick('flac')") 无损音质 - FLAC
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false,
},
bgClose: {
type: Boolean,
default: true,
},
list: {
type: Array,
default() {
return []
},
},
},
methods: {
handleClick(type) {
this.$emit('select', type)
},
handleClose() {
this.$emit('close')
},
getTypeName(type) {
switch (type) {
case 'flac':
case 'ape':
return '无损音质'
case '320k':
return '高品音质'
case '192k':
case '128k':
return '普通音质'
}
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
}
}
.btn {
display: block;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#container.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
}
})
</style>
src/renderer/components/material/FlowBtn.vue
+122
View File
@@ -0,0 +1,122 @@
<template lang="pug">
transition(enter-active-class="animated-fast zoomIn" leave-active-class="animated zoomOut")
div(:class="$style.btns" v-show="show")
button(type="button" v-if="playBtn" title="播放" @click.stop="handleClick('play')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve')
use(xlink:href='#icon-testPlay')
button(type="button" v-if="addBtn" title="添加" @click.stop="handleClick('add')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
button(type="button" v-if="downloadBtn" title="下载" @click.stop="handleClick('download')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve')
use(xlink:href='#icon-download')
button(type="button" v-if="startBtn" title="开始" @click.stop="handleClick('start')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play')
button(type="button" v-if="pauseBtn" title="暂停" @click.stop="handleClick('pause')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause')
button(type="button" v-if="removeBtn" title="移除" @click.stop="handleClick('remove')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
use(xlink:href='#icon-delete')
</template>
<script>
export default {
props: {
removeBtn: {
type: Boolean,
default: true,
},
startBtn: {
type: Boolean,
default: false,
},
pauseBtn: {
type: Boolean,
default: false,
},
downloadBtn: {
type: Boolean,
default: true,
},
addBtn: {
type: Boolean,
default: true,
},
playBtn: {
type: Boolean,
default: true,
},
show: {
type: Boolean,
default: false,
},
},
methods: {
handleClick(action) {
this.$emit('btn-click', action)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.btns {
position: fixed;
bottom: 80px;
right: 30px;
background-color: @color-search-form-background;
border-radius: 5px;
// padding: 3px 5px;
box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
button {
background-color: transparent;
border: none;
border-radius: 3px;
margin-right: 5px;
cursor: pointer;
padding: 4px 7px;
color: @color-btn;
outline: none;
transition: background-color 0.2s ease;
line-height: 0;
&:last-child {
margin-right: 0;
}
svg {
height: 1.2em;
}
&:hover {
background-color: @color-theme_2-hover;
}
&:active {
background-color: @color-theme_2-active;
}
}
}
each(@themes, {
:global(#container.@{value}) {
.btns {
background-color: ~'@{color-@{value}-search-form-background}';
button {
color: ~'@{color-@{value}-btn}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
}
}
}
}
})
</style>
src/renderer/components/material/ListButtons.vue
+14
View File
@@ -9,6 +9,12 @@ div(:class="$style.btns")
button(type="button" title="添加" v-if="userInfo" @click.stop="handleClick('add')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
button(type="button" v-if="startBtn" title="开始" @click.stop="handleClick('start')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play')
button(type="button" v-if="pauseBtn" title="暂停" @click.stop="handleClick('pause')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause')
button(type="button" v-if="removeBtn" title="移除" @click.stop="handleClick('remove')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
use(xlink:href='#icon-delete')
@@ -27,6 +33,14 @@ export default {
type: Number,
required: true,
},
startBtn: {
type: Boolean,
default: false,
},
pauseBtn: {
type: Boolean,
default: false,
},
removeBtn: {
type: Boolean,
default: true,