diff --git a/src/App.vue b/src/App.vue
index 95541af..3e9fd1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -98,7 +98,7 @@ body {
   // padding: 0;
   font-size: 15px;
   color: #333;
-  line-height: 1.3;
+  // line-height: 1.3;
   overflow-y: hidden;
 
   img {
diff --git a/src/components/ArtistsSpan.vue b/src/components/ArtistsSpan.vue
new file mode 100644
index 0000000..a7d98e7
--- /dev/null
+++ b/src/components/ArtistsSpan.vue
@@ -0,0 +1,20 @@
+<script setup>
+
+</script>
+<template>
+  <template v-for="(ar, idx) of artists" key="idx">
+    <span
+      @click="$router.push('/songer/' + ar.id)"
+      style="margin-right: 4px; cursor: pointer"
+      >{{ ar.name }}</span
+    >
+  </template>
+</template>
+
+<script>
+export default {
+  props: ["artists"],
+};
+</script>
+
+<style></style>
diff --git a/src/store/index.js b/src/store/index.js
index be9660a..01a4f03 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,6 +7,7 @@ export default createStore({
     settings: {
       currentRoute: "/discover/recommend", //当前路由
       songId: 0, //歌曲id
+      lastPlayed: [], //最近播放
     },
     caches: {},
     theme: {
diff --git a/src/views/common/SongCtrl.vue b/src/views/common/SongCtrl.vue
index 1af77ba..b89f5fd 100644
--- a/src/views/common/SongCtrl.vue
+++ b/src/views/common/SongCtrl.vue
@@ -16,7 +16,7 @@ const { settings } = store.state;
 const audioEl = ref("");
 const playing = ref(false);
 let currentTime = 0;
-let lastPause = Date.now()
+let lastPause = Date.now();
 
 onMounted(() => {
   audioEl.value.addEventListener("play", onPlay);
@@ -55,13 +55,17 @@ const play = async (id, im = true) => {
   console.log(id);
   await getSongUrl(id)
     .then((res) => {
-      audioEl.value.src = res.data.data[0].url;
-      store.commit("saveSettings", {
-        songId: id,
-      });
-      if (im) {
-        audioEl.value.play();
-        playing.value = true;
+      if (null !== res.data.data[0].url) {
+        audioEl.value.src = res.data.data[0].url;
+        store.commit("saveSettings", {
+          songId: id,
+        });
+        pubsub.publish('zp.getSongInfo', {id})
+
+        if (im) {
+          audioEl.value.play();
+          playing.value = true;
+        }
       }
     })
     .catch((err) => {
@@ -78,8 +82,8 @@ const resume = async () => {
   if (audioEl.value.readyState) {
     //如果暂停过了5分钟，需要再次载入歌曲
     // console.log(Date.now() - lastPause);
-    if((Date.now() - lastPause) > 1000 * 60 * 5){ 
-      console.log('暂停过了5分钟，再次载入歌曲');
+    if (Date.now() - lastPause > 1000 * 60 * 5) {
+      console.log("暂停过了5分钟，再次载入歌曲");
       await play(settings.songId, false);
       audioEl.value.currentTime = currentTime;
     }
diff --git a/src/views/common/SongInfo.vue b/src/views/common/SongInfo.vue
index bf367fd..5909f0d 100644
--- a/src/views/common/SongInfo.vue
+++ b/src/views/common/SongInfo.vue
@@ -12,6 +12,7 @@ import { getSongDetial } from "@/network/song";
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import duration from 'dayjs/plugin/duration'
+import ArtistsSpan from "../../components/ArtistsSpan.vue";
 
 const showInfo = ref(true);
 const info = reactive({
@@ -26,7 +27,7 @@ const songInfo = (id) => {
     .then((res) => {
       showInfo.value = true;
       info.name = res.data.songs[0].name;
-      info.artists = res.data.songs[0].ar[0].name;
+      info.artists = res.data.songs[0].ar;
       info.albumPicUrl = res.data.songs[0].al.picUrl;
     })
     .catch((err) => {});
@@ -44,7 +45,7 @@ function zpTime(time) {
 // totalTime.value = zpTime(12345)
 const psToken = pubsub.subscribe("zp", (msg, data) => {
   switch (msg) {
-    case "zp.play":
+    case "zp.getSongInfo":
       songInfo(data.id);
       break;
     case "zp.progress":
@@ -70,7 +71,9 @@ onUnmounted(() => {
     <div class="song" v-show="showInfo">
       <div class="w-song">
         <div class="song-name">{{ info.name }}</div>
-        <div class="song-author">{{ info.artists }}</div>
+        <div class="song-author">
+          <ArtistsSpan :artists="info.artists" />
+        </div>
       </div>
 
       <div class="song-time">
diff --git a/src/views/discover/Recommend.vue b/src/views/discover/Recommend.vue
index 02ab522..a44ed4a 100644
--- a/src/views/discover/Recommend.vue
+++ b/src/views/discover/Recommend.vue
@@ -44,7 +44,7 @@
           <div class="c2-list">
             <div class="play-btn">
               <img :src="song.album.blurPicUrl" />
-              <n-button 
+              <n-button
                 text
                 class="start-play-bg"
                 type="info"
@@ -59,20 +59,21 @@
                 type="primary"
               >
                 <n-icon>
-                  <Play @click="play(song.id)"/>
+                  <Play @click="play(song.id)" />
                 </n-icon>
               </n-button>
             </div>
             <div class="title">
               <span class="name">
                 {{ song.name }}
-                <span class="alias">{{
-                  songAlias(song.alias)
-                }}</span>
+                <span class="alias"><template
+                  v-for="(al, idx) in song.alias"
+                > {{al}}
+                </template></span>
+              </span>
+              <span class="artist">
+                <ArtistsSpan :artists="song.artists"/>
               </span>
-              <span class="artist">{{
-                songArtists(song.artists)
-              }}</span>
             </div>
             <span class="icon"></span>
           </div>
@@ -110,7 +111,7 @@
           <div class="mv-c2-list">
             <div class="play-mv">
               <div>
-                 <img :src="mv.picUrl" />
+                <img :src="mv.picUrl" />
               </div>
               <n-button
                 text
@@ -209,13 +210,14 @@ import {
   getTopSong,
   getPersonalizedMV,
 } from "@/network/discover";
-import pubsub from 'pubsub-js'
+import pubsub from "pubsub-js";
+import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
 const store = useStore();
 
-const play=(id)=>{
-  pubsub.publish('zp.play', {id, im: true})
-}
+const play = (id) => {
+  pubsub.publish("zp.play", { id, im: true });
+};
 
 //#region 初始载入数据
 //轮播图片
@@ -233,7 +235,7 @@ let topSongs = ref([]);
 getTopSong()
   .then((res) => {
     topSongs.value = res.data.data.filter((item, index) => {
-      return index < 10;
+      return index < 20;
     });
     // console.log(topSongs.value);
   })
@@ -310,32 +312,31 @@ getPersonalizedMV()
   border-radius: 6px;
 
   .play-mv {
-
     img {
       width: 100%;
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
     }
-    button{
+    button {
       display: none;
     }
 
-    .start-play-bg{
+    .start-play-bg {
       font-size: 38px;
       position: absolute;
       right: 0px;
       bottom: 42px;
       color: rgba(255, 255, 255, 0.8);
     }
-    .start-play{
+    .start-play {
       font-size: 25px;
       position: absolute;
       right: 5px;
       bottom: 48px;
     }
 
-    &:hover{
-      button{
+    &:hover {
+      button {
         display: block;
       }
     }
@@ -365,25 +366,24 @@ getPersonalizedMV()
   border-radius: 4px;
   border: 1px solid #eee;
 
-
   img {
     width: 60px;
     border-radius: 4px;
   }
 
-  .start-play-bg{
+  .start-play-bg {
     font-size: 30px;
     position: absolute;
     left: 16px;
-    top: 17px;
+    top: 16px;
     color: rgba(255, 255, 255, 0.8);
   }
 
-  .start-play{
+  .start-play {
     font-size: 16px;
     position: absolute;
     left: 24px;
-    top: 24px;
+    top: 23px;
   }
 
   .title {