feat: support all boutique playlist label switching

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;
-}

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({
         </div>
         <div class="recommend-song">
           <h2>推荐歌单</h2>
-          <SongList songData={songList.value} handle={toPlaylist}></SongList>
+          <SongList
+            songData={songList.value}
+            handle={toPlaylistDetails}
+          ></SongList>
         </div>
       </div>
     )

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);
         }
       }
     }

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<SongListState>(NAMESPACED)
-    const { songList, tagsHot } = toRefs(useState())
+    const { songList, tagsHot, tags } = toRefs(useState())
+
+    const tagsViewKeyMap: Record<number, string> = {
+      0: '语种',
+      1: '风格',
+      2: '场景',
+      3: '情感',
+      4: '主题'
+    }
+    const tagsView = computed(() => {
+      const view = tags.value.reduce(
+        (prev: Record<string, Tags[]>, curr): Record<string, Tags[]> => {
+          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,19 +56,52 @@ export const SongList = defineComponent({
     )
 
     const switchPlaylist = (tag: Tags) => {
+      visible.value = false
       router.push({
         path: '/music/songlist',
         query: {
           tag: tag.name
         }
       })
     }
-    const toPlaylist = inject(ProvideInject.TO_PLAYLIST_DETAILS, noop)
+
+    const toPlaylistDetails = inject(ProvideInject.TO_PLAYLIST_DETAILS, noop)
 
     return () => (
       <div class="find-music-songlist">
         <div class="find-music-songlist--tags">
-          <a-button shape="round">全部歌单</a-button>
+          <a-popover
+            v-model={[visible.value, 'visible']}
+            placement="rightTop"
+            trigger="click"
+            v-slots={{
+              content: () => (
+                <div class="highquality-tags">
+                  {(Reflect.ownKeys(tagsView.value) as string[]).map(type => {
+                    return (
+                      <div class="highquality-tags-item">
+                        <div class="highquality-tags-item--type">{type}</div>
+                        <div class="highquality-tags-item--tags">
+                          {tagsView.value[type].map(tag => (
+                            <div
+                              class={classnames({
+                                'active-tag': route.query.tag === tag.name
+                              })}
+                              onClick={() => switchPlaylist(tag)}
+                            >
+                              {tag.name}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              ),
+              default: () => <a-button shape="round">全部歌单</a-button>
+            }}
+          ></a-popover>
+
           <div class="find-music-songlist--hot">
             <ul>
               {tagsHot.value.map(tag => (
@@ -66,7 +119,7 @@ export const SongList = defineComponent({
         </div>
         <ListComponent
           songData={songList.value}
-          handle={toPlaylist}
+          handle={toPlaylistDetails}
         ></ListComponent>
       </div>
     )

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%);

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;
+}

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;
+}

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;
 }

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;
-}

src/theme/index.ts

@@ -1,3 +1,5 @@
 import './color.less'
 import './index.less'
 import './index.css'
+import './cover.less'
+import './global.less'