From 0bcff2d3309de1b4da54ddd5bfbe1e745424ee2b Mon Sep 17 00:00:00 2001 From: Link Date: Tue, 1 Dec 2020 11:01:04 +0800 Subject: [PATCH] feat: support all boutique playlist label switching --- src/app/app.less | 53 ---------------- .../news/children/recommend/view/index.tsx | 7 ++- .../news/children/song-list/view/index.less | 35 ++++++++++- .../news/children/song-list/view/index.tsx | 63 +++++++++++++++++-- src/theme/color.less | 2 +- src/theme/cover.less | 28 +++++++++ src/theme/global.less | 31 +++++++++ src/theme/index.css | 5 +- src/theme/index.less | 4 -- src/theme/index.ts | 2 + 10 files changed, 160 insertions(+), 70 deletions(-) create mode 100644 src/theme/cover.less create mode 100644 src/theme/global.less diff --git a/src/app/app.less b/src/app/app.less index 76ea5d85..71701f05 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -10,56 +10,3 @@ body, font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } - -*, -*:focus, -*:hover { - outline: none; -} - -ul { - padding: 0; - margin: 0; -} -li { - list-style-type: none; -} - -::-webkit-scrollbar { - width: 6px; - background-color: transparent; -} - -::-webkit-scrollbar-thumb { - width: 6px; - background-color: #e2e2e2; - border-radius: 2px; -} - -.vh-center { - display: flex; - align-items: center; - justify-content: center; -} - -.vchj { - display: flex; - align-items: center; - justify-content: space-between; -} - -.cursor-pointer { - &:hover { - cursor: pointer; - } -} - -.fade-enter-active, -.fade-leave-active { - transition: all 0.5s ease; -} - -.fade-enter-from, -.fade-leave-to { - opacity: 0; -} diff --git a/src/pages/news/children/recommend/view/index.tsx b/src/pages/news/children/recommend/view/index.tsx index 09a8f76c..0b224f29 100644 --- a/src/pages/news/children/recommend/view/index.tsx +++ b/src/pages/news/children/recommend/view/index.tsx @@ -27,7 +27,7 @@ export const Recommend = defineComponent({ const getSongList = () => { useActions(RecommendActions.SET_ACTION_SONG_LIST) } - const toPlaylist = inject(ProvideInject.TO_PLAYLIST_DETAILS, noop) + const toPlaylistDetails = inject(ProvideInject.TO_PLAYLIST_DETAILS, noop) onActivated(() => { runningSwiper.value = true @@ -52,7 +52,10 @@ export const Recommend = defineComponent({

推荐歌单

- +
) diff --git a/src/pages/news/children/song-list/view/index.less b/src/pages/news/children/song-list/view/index.less index 94040980..ab3aed22 100644 --- a/src/pages/news/children/song-list/view/index.less +++ b/src/pages/news/children/song-list/view/index.less @@ -17,8 +17,39 @@ li { margin: 0 4px; cursor: pointer; - &.active-tag { - color: var(--base-color); + &:hover:not(.active-tag) { + color: var(--secondary-text-hover); + } + } + } + } +} + +.active-tag { + color: var(--base-color); +} + +.highquality-tags { + padding: 20px; + font-weight: 300; + &-item { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 20px; + &--type { + width: 100px; + color: var(--placeholder-text); + } + &--tags { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 20px; + width: 460px; + cursor: pointer; + div { + &:hover:not(.active-tag) { + color: var(--secondary-text-hover); } } } diff --git a/src/pages/news/children/song-list/view/index.tsx b/src/pages/news/children/song-list/view/index.tsx index 22a14e22..af8bfd8f 100644 --- a/src/pages/news/children/song-list/view/index.tsx +++ b/src/pages/news/children/song-list/view/index.tsx @@ -1,4 +1,4 @@ -import { defineComponent, toRefs, inject, watch } from 'vue' +import { defineComponent, toRefs, inject, watch, ref, computed } from 'vue' import { SongList as ListComponent } from '@/components/song-list/index' import { uesModuleStore, useRoute, useRouter } from '@/hooks/index' import { ProvideInject } from '@/pages/news/constant' @@ -10,11 +10,31 @@ import './index.less' export const SongList = defineComponent({ name: 'SongList', setup() { + const visible = ref(false) const route = useRoute() const router = useRouter() const { useState, useActions } = uesModuleStore(NAMESPACED) - const { songList, tagsHot } = toRefs(useState()) + const { songList, tagsHot, tags } = toRefs(useState()) + + const tagsViewKeyMap: Record = { + 0: '语种', + 1: '风格', + 2: '场景', + 3: '情感', + 4: '主题' + } + const tagsView = computed(() => { + const view = tags.value.reduce( + (prev: Record, curr): Record => { + const key = tagsViewKeyMap[curr.category] + prev[key] ? prev[key].push(curr) : (prev[key] = [curr]) + return prev + }, + {} + ) + return view + }) useActions(SongListActions.SET_ACTION_SONG_LIST, { limit: 30, @@ -36,6 +56,7 @@ export const SongList = defineComponent({ ) const switchPlaylist = (tag: Tags) => { + visible.value = false router.push({ path: '/music/songlist', query: { @@ -43,12 +64,44 @@ export const SongList = defineComponent({ } }) } - const toPlaylist = inject(ProvideInject.TO_PLAYLIST_DETAILS, noop) + + const toPlaylistDetails = inject(ProvideInject.TO_PLAYLIST_DETAILS, noop) return () => (
- 全部歌单 + ( +
+ {(Reflect.ownKeys(tagsView.value) as string[]).map(type => { + return ( +
+
{type}
+
+ {tagsView.value[type].map(tag => ( +
switchPlaylist(tag)} + > + {tag.name} +
+ ))} +
+
+ ) + })} +
+ ), + default: () => 全部歌单 + }} + > +
    {tagsHot.value.map(tag => ( @@ -66,7 +119,7 @@ export const SongList = defineComponent({
) diff --git a/src/theme/color.less b/src/theme/color.less index 0f7f3bba..0bcd0c28 100644 --- a/src/theme/color.less +++ b/src/theme/color.less @@ -12,7 +12,7 @@ @primary-text: @base-text-color; @normal-text: lighten(@base-text-color, 10%); @secondary-text: lighten(@base-text-color, 20%); -@placeholder-text: lighten(@base-text-color, 30%); +@placeholder-text: lighten(@base-text-color, 50%); @secondary-text-hover: darken(@secondary-text, 30%); @placeholder-text-hover: darken(@placeholder-text, 30%); diff --git a/src/theme/cover.less b/src/theme/cover.less new file mode 100644 index 00000000..49cd691e --- /dev/null +++ b/src/theme/cover.less @@ -0,0 +1,28 @@ +*, +*:focus, +*:hover { + outline: none; +} + +ul { + padding: 0; + margin: 0; +} +li { + list-style-type: none; +} + +::-webkit-scrollbar { + width: 6px; + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + width: 6px; + background-color: #e2e2e2; + border-radius: 2px; +} + +button.easy-button-text { + color: #1890ff !important; +} diff --git a/src/theme/global.less b/src/theme/global.less new file mode 100644 index 00000000..5120340f --- /dev/null +++ b/src/theme/global.less @@ -0,0 +1,31 @@ +.none-select { + user-select: none; +} + +.vh-center { + display: flex; + align-items: center; + justify-content: center; +} + +.vchj { + display: flex; + align-items: center; + justify-content: space-between; +} + +.cursor-pointer { + &:hover { + cursor: pointer; + } +} + +.fade-enter-active, +.fade-leave-active { + transition: all 0.5s ease; +} + +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} diff --git a/src/theme/index.css b/src/theme/index.css index dfe6cdd3..59b43d08 100644 --- a/src/theme/index.css +++ b/src/theme/index.css @@ -10,11 +10,10 @@ --primary-text: #303133; --normal-text: #494a4d; --secondary-text: #616368; - --placeholder-text: #7a7d82; + --placeholder-text: #afb0b3; --secondary-text-hover: #171819; - --placeholder-text-hover: #303133; + --placeholder-text-hover: #616368; --active-color: #353535; --secondary-active-color: #4f4f4f; - --null: null; --sidebar-width: 180px; } diff --git a/src/theme/index.less b/src/theme/index.less index 1b8ee308..e7ed6a44 100644 --- a/src/theme/index.less +++ b/src/theme/index.less @@ -5,7 +5,3 @@ @extra-light-border: 0.5px solid lighten(@base-border-color, 6%); @drank-border: 0.5px solid darken(@base-border-color, 40%); - -button.easy-button-text { - color: #1890ff !important; -} diff --git a/src/theme/index.ts b/src/theme/index.ts index 664c016e..4b5d6b32 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,3 +1,5 @@ import './color.less' import './index.less' import './index.css' +import './cover.less' +import './global.less'