diff --git a/src/api/playlist.js b/src/api/playlist.js
index 181e4ef07cd03d4e3241831aeccdd57cc3450036..af327d41aad3d8c626a34a856ba69f97691c249e 100644
--- a/src/api/playlist.js
+++ b/src/api/playlist.js
@@ -20,7 +20,9 @@ export const getPlaylistsByUser = (userInfo) => {
  */
 export const getPlaylistsByTitle = (titleInfo) => {
     console.log(titleInfo)
-    return axios.get(`${PLAYLIST_MODULE}/fetchByTitle`, { params: titleInfo })
+    return axios.get(`${PLAYLIST_MODULE}/title`, { params: {
+        title: titleInfo.title
+        } })
         .then(res => {
             return res;
         });
diff --git a/src/api/song.js b/src/api/song.js
index 100cc9733c07392eb6fb1c5c08aa2080a25c3c1b..1619bbc4760b09d351379a23fdfeb0ddd80e7ab7 100644
--- a/src/api/song.js
+++ b/src/api/song.js
@@ -9,6 +9,7 @@ import { SONG_MODULE } from './_prefix';
     + playlist_id: number
  */
 export const getSongsByPlaylist = (playlistInfo) => {
+    console.log(playlistInfo)
     return axios.get(`${SONG_MODULE}/fetch`, { params: playlistInfo })
         .then(res => {
             return res;
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index 438e1c62a0237f68c56df6a5357798681a9fad8a..1e7f015185078b86437b72c9aa7b99ca82c6e8b3 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -36,6 +36,8 @@ const currentTab = ref('songs')
 const handleTabClick = (tab) => {
   currentTab.value = tab
 }
+const userToken = ref(JSON.parse(sessionStorage.getItem('user-token')));
+const currentUserId = ref(userToken.value.id);
 
 // const songDurations = ref(new Map());
 // watch(() => props.musicList, (newSongs) => {
@@ -48,13 +50,16 @@ let musicPlayIndex = ref(null);
 let musicPauseIndex = ref(null);
 
 const playFromId = (musicId) => {
-  if (musicId === null || musicId === undefined) {
+
+  if (musicId === null ) {
     // 浠庡ご寮€濮嬫挱鏀�
     musicPlayIndex  = props.currentSongId;
   } else {
     musicPlayIndex  = musicId;
+    // console.log(musicPlayIndex)
   }
-  emit('switchSong', musicPlayIndex, true);
+  console.log(musicPlayIndex)
+  emit('switchSong', props.albumInfo, true);
   musicPauseIndex = null;
 }
 
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 8071a1d11ad82fd3b3b4a5e570f59ddf9ecd44f9..fbd0d56fe4c73cd0e277f5c92286ae62c9d28db0 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -20,7 +20,7 @@ import NowPlayingView from '../components/NowPlayingView.vue';
 
 // APIs
 import {getSongsByEpisode, getSongsByPlaylist} from "../api/song";
-import {getPlaylistsByUser} from "../api/playlist";
+import {getPlaylistsByTitle, getPlaylistsByUser} from "../api/playlist";
 
 // Others
 import {useTheme} from "../store/theme";
@@ -29,6 +29,7 @@ import {updateBackground} from "../utils/getBackgroundColor";
 import { formatTime } from '../utils/formatTime';
 import {getArtistById, getPlaylistById, getUserById} from "../api/resolve";
 import {userFollowArtist} from "@/api/user";
+import {ElMessage} from "element-plus";
 
 
 /*
@@ -518,18 +519,23 @@ const receiveDisplayingEpisode = (episode) => {
 };
 
 const receiveDisplayingEpisodeByName = (episodeName) => {
-	setMidComponents(4);
 
-	//TODO:
-	// getPlaylistByName();
-	displayingEpisode.value = episode;
-	getSongsByPlaylist({
-		playlist_id: episodeName.id,
-	}).then((res) => {
-		displayingSongs.value = res.data.result;
-	}).catch(e => {
-		console.log("Failed to get songs!");
-	});
+  console.log(episodeName);
+  getPlaylistsByTitle({title:episodeName}).then((res) => {
+    const episode = res.data.result;
+    displayingEpisode.value = episode;
+    console.log(episode);
+    getSongsByPlaylist({playlist_id:  episode.id}).then((res) => {
+      displayingSongs.value = res.data.result;
+      setMidComponents(4);
+    }).catch(e => {
+      console.log("Failed to get songs!");
+    });
+  }).catch(e=>{
+    ElMessage.warning("鏈瓕鍗曟湭琚敹褰�")
+  })
+
+
 }
 /*
     SEARCH