feat:完善SearchView，search.js

src/api/search.js

@@ -2,7 +2,7 @@ import { axios } from '../utils/request';
 import { SEARCH_MODULE } from './_prefix';
 
 /*
-    // TODO - newly added
+    // TODO - newly added 这个函数要求从后端获得两个list，一个是歌曲，一个是歌单
     + keyword: string
  */
 export const searchByKeyword = (searchInfo) => {
@@ -11,3 +11,39 @@ export const searchByKeyword = (searchInfo) => {
             return res;
         });
 }
+
+/*
+以下是search函数获得数据的详情
+searchResult.value = {
+    "songs": [
+      {
+        "id": 1,
+        "title": "Song 1",
+        "artist": "Artist 1",
+        "album": "Album 1",
+        "picPath": "/songs/1"
+      },
+      {
+        "id": 2,
+        "title": "Song 2",
+        "artist": "Artist 2",
+        "album": "Album 2",
+        "picPath": "/songs/2"
+      }
+    ],
+    "playlists": [
+      {
+        "id": 1,
+        "title": "Playlist 1",
+        "username": "user 1",
+        "picPath": "/songs/1"
+      },
+      {
+        "id": 2,
+        "title": "Playlist 2",
+        "username": "user 2",
+        "picPath": "/songs/2"
+      }
+    ]
+  };
+ */
\ No newline at end of file

src/components/Header.vue

@@ -27,7 +27,38 @@ function callSetting() {
 }
 
 function callSearch() {
-  searchResult.value = "123"; // 更新搜索结果
+  searchResult.value = {
+    "songs": [
+      {
+        "id": 1,
+        "title": "Song 1",
+        "artist": "Artist 1",
+        "album": "Album 1",
+        "picPath": "/songs/1"
+      },
+      {
+        "id": 2,
+        "title": "Song 2",
+        "artist": "Artist 2",
+        "album": "Album 2",
+        "picPath": "/songs/2"
+      }
+    ],
+    "playlists": [
+      {
+        "id": 1,
+        "title": "Playlist 1",
+        "username": "user 1",
+        "picPath": "/songs/1"
+      },
+      {
+        "id": 2,
+        "title": "Playlist 2",
+        "username": "user 2",
+        "picPath": "/songs/2"
+      }
+    ]
+  }; // 更新搜索结果
   showSearch.value = true
   // 触发事件
   emit('headData', { searchResult: searchResult.value, showSearch: showSearch.value });

src/components/SearchView.vue

 <script setup>
+import {ref} from "vue";
 
 const props = defineProps({
   searchResult: {
-    type: String,
-    default: ''
-  }})
+    type: Object,
+    default: () => ({
+      songs: [],
+      playlists: []
+    })
+  }
+})
 
+/*
+searchResult.value = {
+    "songs": [
+      {
+        "id": 1,
+        "title": "Song 1",
+        "artist": "Artist 1",
+        "album": "Album 1",
+        "picPath": "/songs/1"
+      },
+      {
+        "id": 2,
+        "title": "Song 2",
+        "artist": "Artist 2",
+        "album": "Album 2",
+        "picPath": "/songs/2"
+      }
+    ],
+    "playlists": [
+      {
+        "id": 1,
+        "title": "Playlist 1",
+        "username": "user 1",
+        "picPath": "/songs/1"
+      },
+      {
+        "id": 2,
+        "title": "Playlist 2",
+        "username": "user 2",
+        "picPath": "/songs/2"
+      }
+    ]
+  };
+*/
+const currentTab = ref('songs') // 当前选中的标签，默认为'songs'
 
+const handleTabClick = (tab) => {
+  currentTab.value = tab
+}
 </script>
 
 <template>
-  <div>aaaaaaaaaaa</div>
-  <div>{{searchResult}}</div>
+  <div class="search-view">
+    <div class="tabs">
+      <button
+          class="tab-button"
+          :class="{ 'active': currentTab === 'songs' }"
+          @click="handleTabClick('songs')"
+      >
+        歌曲
+      </button>
+      <button
+          class="tab-button"
+          :class="{ 'active': currentTab === 'playlists' }"
+          @click="handleTabClick('playlists')"
+      >
+        播放列表
+      </button>
+    </div>
+    <div class="search-results">
+      <ul v-if="currentTab === 'songs'">
+        <li v-for="(song, index) in searchResult.songs" :key="song.id">
+          <div class="song-item">
+            <span class="song-index">{{ index + 1 }}</span>
+            <img :src="song.picPath" class="song-pic" />
+            <div class="song-info">
+              <h3 class="song-title">{{ song.title }}</h3>
+              <p class="song-artist">{{ song.artist }}</p>
+              <p class="song-album">{{ song.album }}</p>
+            </div>
+          </div>
+        </li>
+
+      </ul>
+      <ul v-if="currentTab === 'playlists'">
+        <li v-for="playlist in searchResult.playlists" :key="playlist.id">
+          <div class="playlist-item">
+            <img :src="playlist.picPath" class="playlist-pic" />
+            <div class="playlist-info">
+              <h3 class="playlist-title">{{ playlist.title }}</h3>
+              <p class="playlist-username">{{ playlist.username }}</p>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.search-view {
+  padding: 20px;
+}
+
+.tabs {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+}
+
+.tab-button {
+  background-color: transparent;
+  color: #fff;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 999;
+  transition: background-color 0.3s ease;
+  border: 2px solid #fff;
+  margin: 0 10px;
+  border-radius: 12px;
+  font-size: 18px;
+  padding: 5px 10px;
+}
+
+.tab-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.search-results {
+  list-style-type: none;
+  padding: 0;
+}
+
+
+.song-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.song-index {
+  font-size: 18px;
+  color: #fff;
+  margin-right: 10px;
+}
+
+.song-pic {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 10px;
+}
+
+.song-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.song-title {
+  font-size: 18px;
+  color: #fff;
+  margin-bottom: 5px;
+}
+
+.song-artist {
+  font-size: 14px;
+  color: #fff;
+  margin-bottom: 5px;
+}
+
+.song-album {
+  font-size: 14px;
+  color: #fff;
+}
+
+.playlist-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.playlist-pic {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 10px;
+}
+
+.playlist-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.playlist-title {
+  font-size: 18px;
+  color: #fff;
+  margin-bottom: 5px;
+}
+
+.playlist-username {
+  font-size: 14px;
+  color: #fff;
+  margin-bottom: 5px;
+}
 
-</style>
\ No newline at end of file
+</style>

src/views/HomePage.vue

@@ -295,7 +295,8 @@ onMounted(() => {
 					<MusicAlbumView :album-info="currentPlaylist" :music-list="songs"/>
 				</el-container>
         <el-container v-if="showSearch" class="playlist-container" style="overflow: auto; height: 698px" >
-          <el-button @click="exitSearch">退出搜索</el-button>
+          <el-button class="exit-search" @click="exitSearch">
+          </el-button>
           <SearchView :search-result="searchResult"/>
         </el-container>
 			</div>
@@ -1186,4 +1187,50 @@ footer {
 	transform: translateX(-50%) scale(1.1);
 }
 
+/* 退出搜索图标 */
+.exit-search {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  background-color: transparent;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 999;
+  transition: background-color 0.3s ease;
+  border: 2px solid #fff;
+}
+
+.exit-search:hover {
+  background-color: rgba(255, 0, 0, 0.8);
+}
+
+.exit-search::before {
+  content: "\2716";
+  font-size: 20px;
+  color: #fff;
+}
+
+.exit-search:hover::after {
+  content: "Exit";
+  position: absolute;
+  top: 35px;
+  right: 0;
+  background-color: #fff;
+  color: #000;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.exit-search:hover::after {
+  opacity: 1;
+}
 </style>