diff --git a/src/assets/icons/dropdown.svg b/src/assets/icons/dropdown.svg new file mode 100644 index 0000000..e1d0723 --- /dev/null +++ b/src/assets/icons/dropdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/library.vue b/src/views/library.vue index ba40bfc..5e43917 100644 --- a/src/views/library.vue +++ b/src/views/library.vue @@ -40,15 +40,22 @@ -
+
- {{ $t('library.playlists') }} + {{ + { all: '全部歌单', mine: '创建的歌单', liked: '收藏的歌单' }[ + playlistFilter + ] + }} +
+ + +
全部歌单
+
+
+ 我创建的歌单 +
+
+ 收藏的歌单 +
+
@@ -123,6 +141,7 @@ import { randomNum, dailyTask } from '@/utils/common'; import { isAccountLoggedIn } from '@/utils/auth'; import NProgress from 'nprogress'; +import ContextMenu from '@/components/ContextMenu.vue'; import TrackList from '@/components/TrackList.vue'; import CoverRow from '@/components/CoverRow.vue'; import SvgIcon from '@/components/SvgIcon.vue'; @@ -130,7 +149,7 @@ import MvRow from '@/components/MvRow.vue'; export default { name: 'Library', - components: { SvgIcon, CoverRow, TrackList, MvRow }, + components: { SvgIcon, CoverRow, TrackList, MvRow, ContextMenu }, data() { return { show: false, @@ -160,6 +179,19 @@ export default { lyric[lineIndex + 2].split(']')[1], ]; }, + playlistFilter() { + return this.data.libraryPlaylistFilter || 'all'; + }, + filterPlaylists() { + const playlists = this.liked.playlists; + const userId = this.data.user.userId; + if (this.playlistFilter === 'mine') { + return playlists.filter(p => p.creator.userId === userId); + } else if (this.playlistFilter === 'liked') { + return playlists.filter(p => p.creator.userId !== userId); + } + return playlists; + }, }, created() { NProgress.start(); @@ -199,9 +231,7 @@ export default { return; } this.currentTab = tab; - document - .getElementById('liked') - .scrollIntoView({ block: 'start', behavior: 'smooth' }); + window.scrollTo({ top: 375, behavior: 'smooth' }); }, goToLikedSongsList() { this.$router.push({ path: '/library/liked-songs' }); @@ -224,6 +254,13 @@ export default { value: true, }); }, + openPlaylistTabMenu(e) { + this.$refs.playlistTabMenu.openMenu(e); + }, + changePlaylistFilter(type) { + this.updateData({ key: 'libraryPlaylistFilter', value: type }); + window.scrollTo({ top: 375, behavior: 'smooth' }); + }, }, }; @@ -358,6 +395,25 @@ h1 { opacity: 0.88; background-color: var(--color-secondary-bg); } + .tab.dropdown { + display: flex; + align-items: center; + padding: 0; + overflow: hidden; + .text { + padding: 8px 3px 8px 14px; + } + .icon { + height: 100%; + display: flex; + align-items: center; + padding: 0 8px 0 3px; + .svg-icon { + height: 16px; + width: 16px; + } + } + } } button.add-playlist {