feat: the song author at the bottom can jump directly to the singer page

radishes-music · Dec 12, 2020 · 7ea601a · 7ea601a
1 parent a9a22f9
commit 7ea601a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 20 deletions.
diff --git a/src/pages/footer/sage.ts b/src/pages/footer/sage.ts
@@ -115,26 +115,24 @@ export const getters: GetterTree<FooterState, RootState> = {
   },
   musicDes(state) {
     if (state.music) {
-      if (state.music) {
-        const author = state.music.ar
-        if (author[0]) {
-          const title = state.music.name
-          dominateMediaSession(
-            title,
-            author.map(o => o.name).join(' / '),
-            '',
-            state.music.al.picUrl
-          )
-          return {
-            author: author.map(o => o.name).join(' / '),
-            title: title
-          }
+      const author = state.music.ar
+      if (author.length) {
+        const title = state.music.name
+        dominateMediaSession(
+          title,
+          author.map(o => o.name).join(' / '),
+          '',
+          state.music.al.picUrl
+        )
+        return {
+          author: author,
+          title: title
         }
       }
     }
 
     return {
-      author: '',
+      author: [],
       title: ''
     }
   }

diff --git a/src/pages/footer/state.ts b/src/pages/footer/state.ts
@@ -1,4 +1,4 @@
-import { SongsDetail } from '@/interface/index'
+import { Albums, Artists, SongsDetail } from '@/interface/index'
 import { PostData } from './components/lyrice-float/electron-lyrice'
 import { Size } from '@/layout/module'
 import { storage } from '@/utils/index'
@@ -76,7 +76,7 @@ export interface Getter {
   volume: number
   musicLyrics: Lyrics[]
   musicDes: {
-    author: string
+    author: Artists[]
     title: string
   }
 }
diff --git a/src/pages/footer/view/index.less b/src/pages/footer/view/index.less
@@ -6,7 +6,7 @@
   &-left {
     display: flex;
     align-items: center;
-    width: var(--sidebar-width);
+    // width: var(--sidebar-width);
     height: 100%;
     padding: 0 20px;
   }
@@ -47,7 +47,16 @@
         font-size: 16px;
       }
       &--author {
+        display: flex;
+        align-items: center;
         font-size: 13px;
+        div {
+          margin-right: 4px;
+          cursor: pointer;
+          &:not(:last-child)::after {
+            content: '/';
+          }
+        }
       }
     }
   }

diff --git a/src/pages/footer/view/index.tsx b/src/pages/footer/view/index.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, ref, toRefs, computed } from 'vue'
 import { NAMESPACED, State, LayoutActions } from '@/layout/module'
-import { uesModuleStore } from '@/hooks/index'
+import { uesModuleStore, useRouter } from '@/hooks/index'
 import { MusicControl } from '../components/music-controller'
 import { VolumeAndHistory } from '../components/volume-history/index'
 import {
@@ -22,6 +22,7 @@ import { AsyncComponent } from '../components/lyrice-embed/index'
 import { BrowserLyriceFlash } from '../components/lyrice-float/browser-lyrice'
 import classnames from 'classnames'
 import './index.less'
+import { Artists } from '@/interface'
 
 // Fix JSX element type "AsyncComponent" does not have any construction signature or call signature.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -32,6 +33,7 @@ export const Footer = defineComponent({
   setup() {
     const visibleLyrice = ref(false)
 
+    const router = useRouter()
     const { useState, useMutations } = uesModuleStore<State>(NAMESPACED)
     const FooterModule = uesModuleStore<FooterState, FooterGetter>(
       FooterNamespace
@@ -60,6 +62,12 @@ export const Footer = defineComponent({
       }
     }
 
+    const toArtist = (artist: Artists) => {
+      router.push({
+        path: '/artist/' + artist.id + '/album'
+      })
+    }
+
     return () => (
       <footer class="footer">
         <div class="footer-left">
@@ -76,7 +84,9 @@ export const Footer = defineComponent({
             <div class="footer-music-des">
               <div class="footer-music-des--title">{musicDes.value.title}</div>
               <div class="footer-music-des--author">
-                {musicDes.value.author}
+                {musicDes.value.author.map(artist => (
+                  <div onClick={() => toArtist(artist)}>{artist.name}</div>
+                ))}
               </div>
             </div>
           </div>