✨ feat: 优化搜索功能

src/components/common/PlayVideo.vue

@@ -0,0 +1,70 @@
+<template>
+  <n-drawer :show="show" height="100vh" placement="bottom" :z-index="999999999">
+    <div class="mv-detail">
+      <video :src="url" controls autoplay></video>
+      <div class="mv-detail-title">
+        <div class="title">{{ title }}</div>
+        <button @click="close">
+          <i class="iconfont icon-xiasanjiaoxing"></i>
+        </button>
+      </div>
+    </div>
+  </n-drawer>
+</template>
+
+<script setup lang="ts">
+import { useStore } from 'vuex';
+
+const props = defineProps<{
+  show: boolean;
+  title: string;
+  url: string;
+}>();
+
+const store = useStore();
+
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      store.commit('setIsPlay', false);
+      store.commit('setPlayMusic', false);
+    }
+  },
+);
+
+const emit = defineEmits(['update:show']);
+
+const close = () => {
+  emit('update:show', false);
+};
+</script>
+
+<style scoped lang="scss">
+.mv-detail {
+  @apply w-full h-full bg-black relative;
+
+  &-title {
+    @apply absolute w-full left-0 flex justify-between h-16 px-6 py-2 text-xl font-bold items-center z-50 transition-all duration-300 ease-in-out -top-24;
+    background: linear-gradient(0, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+    button .icon-xiasanjiaoxing {
+      @apply text-3xl;
+    }
+
+    button:hover {
+      @apply text-green-400;
+    }
+  }
+
+  video {
+    @apply w-full h-full;
+  }
+  video:hover + .mv-detail-title {
+    @apply top-0;
+  }
+
+  .mv-detail-title:hover {
+    @apply top-0;
+  }
+}
+</style>

src/components/common/SearchItem.vue

@@ -1,19 +1,27 @@
 <template>
   <div class="search-item" @click="handleClick">
     <div class="search-item-img">
-      <n-image :src="getImgUrl(item.picUrl, 'album')" lazy preview-disabled />
+      <n-image :src="getImgUrl(item.picUrl, '200y200')" lazy preview-disabled />
     </div>
     <div class="search-item-info">
       <div class="search-item-name">{{ item.name }}</div>
       <div class="search-item-artist">{{ item.desc }}</div>
     </div>
 
-    <MusicList v-model:show="showMusic" :name="item.name" :song-list="songList" />
+    <MusicList
+      v-if="['专辑', 'playlist'].includes(item.type)"
+      v-model:show="showPop"
+      :name="item.name"
+      :song-list="songList"
+    />
+
+    <PlayVideo v-if="item.type === 'mv'" v-model:show="showPop" :title="item.name" :url="url" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { getAlbum } from '@/api/list';
+import { getAlbum, getListDetail } from '@/api/list';
+import { getMvUrl } from '@/api/mv';
 import { getImgUrl } from '@/utils';
 
 const props = defineProps<{
@@ -26,25 +34,39 @@ const props = defineProps<{
   };
 }>();
 
-const songList = ref([]);
+const url = ref('');
 
-const showMusic = ref(false);
+const songList = ref<any[]>([]);
+
+const showPop = ref(false);
 
 const handleClick = async () => {
-  showMusic.value = true;
   if (props.item.type === '专辑') {
+    showPop.value = true;
     const res = await getAlbum(props.item.id);
     songList.value = res.data.songs.map((song: any) => {
       song.al.picUrl = song.al.picUrl || props.item.picUrl;
       return song;
     });
   }
+
+  if (props.item.type === 'playlist') {
+    showPop.value = true;
+    const res = await getListDetail(props.item.id);
+    songList.value = res.data.playlist.tracks;
+  }
+
+  if (props.item.type === 'mv') {
+    const res = await getMvUrl(props.item.id);
+    url.value = res.data.data.url;
+    showPop.value = true;
+  }
 };
 </script>
 
 <style scoped lang="scss">
 .search-item {
-  @apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition;
+  @apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition cursor-pointer;
   margin: 0 10px;
   .search-item-img {
     @apply w-12 h-12 mr-4 rounded-2xl overflow-hidden;