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
2020-05-16 19:21:21 +08:00
parent eed8b36dc1
commit afc3f48f51
39 changed files with 1486 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/core/Aside.vue
+16 -25
View File
@@ -1,26 +1,25 @@
<template lang="pug">
div(:class="$style.aside")
div(:class="['animated', logoAnimate, $style.logo]")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
div(:class="['animated', logoAnimate, $style.logo]") L X
//- svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
use(xlink:href='#icon-logo')
div(:class="$style.menu")
dl
//- dt {{$t('core.aside.online_music')}}
dd
router-link(:active-class="$style.active" to="search")
router-link(:active-class="$style.active" to="search" :title="$t('core.aside.search')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 801.99 811.98' space='preserve')
use(xlink:href='#icon-search-2')
//- span {{$t('core.aside.search')}}
dd
router-link(:active-class="$style.active" to="songList")
router-link(:active-class="$style.active" to="songList" :title="$t('core.aside.song_list')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 739.96 763.59' space='preserve')
use(xlink:href='#icon-album')
//- span {{$t('core.aside.song_list')}}
dd
router-link(:active-class="$style.active" to="leaderboard")
router-link(:active-class="$style.active" to="leaderboard" :title="$t('core.aside.leaderboard')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 819.1 819.38' space='preserve')
use(xlink:href='#icon-leaderboard')
@@ -28,23 +27,20 @@ div(:class="$style.aside")
dl
//- dt {{$t('core.aside.my_music')}}
dd
//- router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{$t('core.aside.default_list')}}
router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`")
router-link(:active-class="$style.active" :title="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 830.33 740.22' space='preserve')
use(xlink:href='#icon-love')
//- span {{$t('core.aside.love_list')}}
router-link(:active-class="$route.query.id === item.id ? $style.active : ''" v-for="item in userList" :to="`list?id=${item._id}`" :key="item._id") {{item.name}}
dl
//- dt {{$t('core.aside.other')}}
dd
router-link(:active-class="$style.active" to="download")
router-link(:active-class="$style.active" to="download" :title="$t('core.aside.download')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 798.85 718.96' space='preserve')
use(xlink:href='#icon-download-2')
//- span {{$t('core.aside.download')}}
dd
router-link(:active-class="$style.active" to="setting")
router-link(:active-class="$style.active" to="setting" :title="$t('core.aside.setting')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 854.85 775.41' space='preserve')
use(xlink:href='#icon-setting')
@@ -55,14 +51,6 @@ div(:class="$style.aside")
import { mapGetters } from 'vuex'
// import { getRandom } from '../../utils'
export default {
props: {
list: {
type: Array,
default() {
return []
},
},
},
data() {
return {
active: 'search',
@@ -83,7 +71,8 @@ export default {
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
...mapGetters(['setting']),
...mapGetters('list', ['defaultList']),
},
// mounted() {
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
@@ -120,10 +109,12 @@ export default {
}
.logo {
box-sizing: border-box;
padding: 12% 13%;
// height: 120px;
padding: 0 13%;
height: 50px;
color: @color-theme-font;
flex: none;
text-align: center;
line-height: 50px;
// -webkit-app-region: no-drag;
}
@@ -132,7 +123,7 @@ export default {
// display: flex;
// flex-flow: column nowrap;
// justify-content: center;
// padding-bottom: 40px;
// padding-bottom: 50px;
// padding: 5px;
dl {
-webkit-app-region: no-drag;
@@ -165,7 +156,7 @@ export default {
text-align: center;
transition: background-color 0.3s ease;
// border-radius: 4px;
// border-radius: @radius-border;
.mixin-ellipsis-1;
&.active {
src/renderer/components/core/Icons.vue
+3
View File
@@ -121,5 +121,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
path.cls-1(d='M573,734.37H248.32a86.27,86.27,0,0,1-74.5-43L11.49,410.2a86.27,86.27,0,0,1,0-86L173.81,43a86.27,86.27,0,0,1,74.5-43H573a86.27,86.27,0,0,1,74.5,43L809.79,324.17a86.27,86.27,0,0,1,0,86L647.47,691.35A86.27,86.27,0,0,1,573,734.37ZM248.32,74.51a11.55,11.55,0,0,0-10,5.76L76,361.42a11.56,11.56,0,0,0,0,11.52L238.34,654.1a11.56,11.56,0,0,0,10,5.76H573a11.55,11.55,0,0,0,10-5.76L745.27,372.94a11.55,11.55,0,0,0,0-11.52L582.94,80.27a11.56,11.56,0,0,0-10-5.76Z')
g#icon-list-add(fill='currentColor')
//- 0 0 24 24
path(d='M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z')
</template>
src/renderer/components/core/Player.vue
+3 -3
View File
@@ -529,7 +529,7 @@ export default {
this.nowPlayTime = 0
this.maxPlayTime = 0
this.lyric.lines = []
this.lyric.line = 0
this.lyric.line = -1
this.lyric.text = 0
},
sendProgressEvent(status, mode) {
@@ -702,7 +702,7 @@ export default {
}
}
.left {
width: @height-player;
width: @height-player - 2;
height: @height-player - 2;
color: @color-theme;
transition: @transition-theme;
@@ -730,7 +730,7 @@ export default {
transition: @transition-theme;
transition-property: border-color;
// border-radius: 50%;
// border-radius: @radius-progress-border;
border-radius: @radius-border;
// border: 2px solid @color-theme_2-background_1;
}
}
src/renderer/components/core/PlayerDetail.vue
+39 -7
View File
@@ -24,7 +24,7 @@
div(:class="$style.right")
div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @mousedown="handleLyricMouseDown" ref="dom_lyric")
div(:class="$style.lyricSpace")
p(v-for="(info, index) in lyric.lines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
div(:class="$style.lyricSpace")
div(:class="$style.footer")
div(:class="$style.left")
@@ -128,16 +128,44 @@ export default {
immediate: true,
},
'lyric.lines': {
handler() {
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
handler(n, o) {
this.isSetedLines = true
if (o) {
this._lyricLines = n
if (n.length) {
this.lyricLines = n
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
} else {
if (cancelScrollFn) {
cancelScrollFn()
cancelScrollFn = null
}
cancelScrollFn = scrollTo(this.$refs.dom_lyric, 0, 300, () => {
if (this.lyricLines === this._lyricLines && this._lyricLines.length) return
this.lyricLines = this._lyricLines
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
}, 50)
}
} else {
this.lyricLines = n
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
}
},
immediate: true,
},
'lyric.line': {
handler(n) {
if (n < 0) return
if (n == 0 && this.isSetedLines) return this.isSetedLines = false
this.handleScrollLrc()
},
immediate: true,
@@ -167,6 +195,9 @@ export default {
isStopScroll: false,
timeout: null,
},
_lyricLines: [],
lyricLines: [],
isSetedLines: false,
}
},
mounted() {
@@ -298,7 +329,7 @@ export default {
z-index: 10;
// -webkit-app-region: drag;
overflow: hidden;
border-radius: 4px;
border-radius: @radius-border;
color: @color-theme_2-font;
border-left: 12px solid @color-theme;
}
@@ -465,6 +496,7 @@ export default {
max-width: 100%;
max-height: 100%;
border: 5px solid @color-theme-hover;
// border-radius: @radius-border;
// border: 5px solid #fff;
}
}