feat: tag jump

src/api/index.ts

@@ -5,7 +5,8 @@ export const getSongUrl = async (
   id: number | number[]
 ): Promise<SongsBase[]> => {
   const data = await get<{ data: SongsBase[] }>('/api/song/url', {
-    id: typeof id === 'number' ? id : id.join(',')
+    id: typeof id === 'number' ? id : id.join(','),
+    br: 3.2e5
   })
   return data.data
 }

src/pages/footer/component/lyrice-flash/browser-lyrice.tsx

@@ -39,7 +39,7 @@ export const BrowserLyriceFlash = defineComponent({
     )
     const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
 
-    const { currentTime, playing, visibleFlash, musicUrl } = toRefs(useState())
+    const { currentTime, playing, visibleFlash } = toRefs(useState())
     const { screenSize } = toRefs(LayoutModule.useState())
 
     if (VUE_APP_PLATFORM === Platform.ELECTRON) {
@@ -50,12 +50,6 @@ export const BrowserLyriceFlash = defineComponent({
       useGetter('musicLyrics').filter(value => value.lyric)
     )
 
-    watch(screenSize, v => {
-      if (musicUrl.value) {
-        useMutations(Mutations.VISIBLE_FLASH, v === Size.SM)
-      }
-    })
-
     const index = computed(() => {
       if (visibleFlash.value) {
         const len = lyrice.value.length

src/pages/footer/component/music-controller/index.tsx

@@ -109,9 +109,7 @@ export const MusicControl = defineComponent({
 
     const handleVisibleFlash = () => {
       if (VUE_APP_PLATFORM === Platform.BROWSER) {
-        if (screenSize.value === Size.SM) {
-          useMutations(Mutations.VISIBLE_FLASH, !visibleFlash.value)
-        }
+        useMutations(Mutations.VISIBLE_FLASH, !visibleFlash.value)
       }
       if (VUE_APP_PLATFORM === Platform.ELECTRON) {
         importIpc()

src/pages/footer/component/volume-history/history.less

@@ -33,6 +33,9 @@
 
 .history-music-browser {
   height: calc(100vh - 400px);
+  .history-music-content {
+    height: calc(100% - 44px);
+  }
   .ant-table:not(.ant-table-empty) {
     height: calc(100vh - 450px);
   }

src/pages/footer/sage.ts

@@ -144,7 +144,9 @@ export const actions: ActionTree<State, RootState> = {
     const data = await getSongUrl(id)
     if (state.sourceElement && state.audioElement) {
       if (data.length) {
-        const url = data[0].url
+        const url =
+          data[0].url ||
+          `https://music.163.com/song/media/outer/url?id=${id}.mp3`
         state.musicUrl = url
         commit(Mutations.CAN_PLAY, false)
         await dispatch(Actions.SET_MUSIC_DEFAILT, id)

src/pages/news/children/song-list/view/index.less

@@ -17,6 +17,9 @@
       li {
         margin: 0 4px;
         cursor: pointer;
+        &.active-tag {
+          color: var(--base-color);
+        }
       }
     }
   }

src/pages/news/children/song-list/view/index.tsx

@@ -4,6 +4,7 @@ import { uesModuleStore, useRoute, useRouter } from '@/hooks/index'
 import { ProvideInject } from '@/pages/news/constant'
 import { noop } from '@/utils/index'
 import { SongListState, NAMESPACED, SongListActions, Tags } from '../module'
+import classnames from 'classnames'
 import './index.less'
 
 export const SongList = defineComponent({
@@ -16,7 +17,8 @@ export const SongList = defineComponent({
     const { songList, tagsHot } = toRefs(useState())
 
     useActions(SongListActions.SET_ACTION_SONG_LIST, {
-      limit: 30
+      limit: 30,
+      cat: route.query.tag
     })
     useActions(SongListActions.SET_ACTION_TAGS)
     useActions(SongListActions.SET_ACTION_HOT_TAGS)
@@ -49,9 +51,16 @@ export const SongList = defineComponent({
           <a-button shape="round">全部歌单</a-button>
           <div class="find-music-songlist--hot">
             <ul>
-              {tagsHot.value.map(tag => {
-                return <li onClick={() => switchPlaylist(tag)}>{tag.name}</li>
-              })}
+              {tagsHot.value.map(tag => (
+                <li
+                  class={classnames({
+                    'active-tag': route.query.tag === tag.name
+                  })}
+                  onClick={() => switchPlaylist(tag)}
+                >
+                  {tag.name}
+                </li>
+              ))}
             </ul>
           </div>
         </div>

src/pages/song/view/index.less

@@ -76,6 +76,9 @@
           div {
             margin-right: 10px;
           }
+          a {
+            margin-right: 10px;
+          }
         }
         &-description {
           display: flex;

src/pages/song/view/index.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/pages/footer/module'
 import { getSongUrl } from '@/api/index'
 import './index.less'
+import { RouterLink } from 'vue-router'
 
 const renderClass = (name: string) => `song-list-${name}`
 
@@ -80,10 +81,16 @@ export default defineComponent({
     const playAll = async () => {
       const tracks = toRaw(playlist.value.tracks)
       const tracksDetail = await getSongUrl(tracks.map(item => item.id))
-      const stack = tracks.map(item => ({
-        ...item,
-        url: tracksDetail.find(o => o.id === item.id)?.url
-      }))
+      const stack = tracks.map(item => {
+        const urlItem = tracksDetail.find(o => o.id === item.id)
+        const url = urlItem
+          ? urlItem.url
+          : ` https://music.163.com/song/media/outer/url?${item.id}=id.mp3`
+        return {
+          ...item,
+          url: url
+        }
+      })
       footerStore.useMutations(FooterMutations.SET_PLAYLIST_TO_STACK, stack)
 
       const { music } = footerStore.useState()
@@ -132,7 +139,19 @@ export default defineComponent({
               <div>播放：{playlist.value.playCount}</div>
             </div>
             <div class="a-tracks-count">
-              标签：{playlist.value.tags.join('/')}
+              标签：
+              {playlist.value.tags.map(tag => (
+                <RouterLink
+                  to={{
+                    name: 'songlist',
+                    query: {
+                      tag: tag
+                    }
+                  }}
+                >
+                  {tag}
+                </RouterLink>
+              ))}
             </div>
 
             <div class="a-description">

src/theme/index.less

@@ -5,3 +5,7 @@
 @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,2 +1,3 @@
 import './color.less'
+import './index.less'
 import './index.css'