diff --git a/src/api/search.js b/src/api/search.js
index c46100feae44e58d4b2ae228c728196c6398cb0a..3c3001e0ec12e6d7a8687551a5da6682ad61ab7a 100644
--- a/src/api/search.js
+++ b/src/api/search.js
@@ -2,7 +2,7 @@ import { axios } from '../utils/request';
import { SEARCH_MODULE } from './_prefix';
/*
- // TODO - newly added
+ // TODO - newly added 杩欎釜鍑芥暟瑕佹眰浠庡悗绔幏寰椾袱涓猯ist锛屼竴涓槸姝屾洸锛屼竴涓槸姝屽崟
+ keyword: string
*/
export const searchByKeyword = (searchInfo) => {
@@ -11,3 +11,39 @@ export const searchByKeyword = (searchInfo) => {
return res;
});
}
+
+/*
+浠ヤ笅鏄痵earch鍑芥暟鑾峰緱鏁版嵁鐨勮鎯�
+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
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 8dfb2453258c3d906221a08e81e45e634d775db3..f498f719de87cee0ba4760f991e9e00b8c48a7c1 100644
--- a/src/components/Header.vue
+++ b/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 });
diff --git a/src/components/SearchView.vue b/src/components/SearchView.vue
index 14b699cc144aaae0480d5f70c84f9ff18dcbc971..adde72e98c67b260b5f68c310f7e37ce034d1ab4 100644
--- a/src/components/SearchView.vue
+++ b/src/components/SearchView.vue
@@ -1,19 +1,214 @@
<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>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 57cc8bbac57d395a824094d7797be6dd9b31980b..801a7a59b6a992cc9c0499c90498d7793448ce88 100644
--- a/src/views/HomePage.vue
+++ b/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>