✨ feat: 添加歌手详情抽屉

src/renderer/layout/AppLayout.vue

@@ -31,11 +31,12 @@
     </div>
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />
+    <artist-drawer ref="artistDrawerRef" :show="artistDrawerShow" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted } from 'vue';
+import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 
@@ -61,6 +62,8 @@ const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
 
+const ArtistDrawer = defineAsyncComponent(() => import('@/components/common/ArtistDrawer.vue'));
+
 const store = useStore();
 
 const isPlay = computed(() => store.state.isPlay as boolean);
@@ -71,6 +74,25 @@ onMounted(() => {
   store.dispatch('initializeSettings');
   store.dispatch('initializeTheme');
 });
+
+const artistDrawerRef = ref<InstanceType<typeof ArtistDrawer>>();
+const artistDrawerShow = computed({
+  get: () => store.state.showArtistDrawer,
+  set: (val) => store.commit('setShowArtistDrawer', val)
+});
+
+// 监听歌手ID变化
+watch(
+  () => store.state.currentArtistId,
+  (newId) => {
+    if (newId) {
+      artistDrawerShow.value = true;
+      nextTick(() => {
+        artistDrawerRef.value?.loadArtistInfo(newId);
+      });
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>

src/renderer/layout/components/MusicFull.vue

@@ -22,9 +22,14 @@
         <div>
           <div class="music-content-name">{{ playMusic.name }}</div>
           <div class="music-content-singer">
-            <span v-for="(item, index) in playMusic.ar || playMusic.song.artists" :key="index">
-              {{ item.name
-              }}{{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
+            <span
+              v-for="(item, index) in playMusic.ar || playMusic.song.artists"
+              :key="index"
+              class="cursor-pointer hover:text-green-500"
+              @click="handleArtistClick(item.id)"
+            >
+              {{ item.name }}
+              {{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
             </span>
           </div>
         </div>
@@ -70,6 +75,7 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
 import { onBeforeUnmount, ref, watch } from 'vue';
+import { useStore } from 'vuex';
 
 import {
   lrcArray,
@@ -219,6 +225,12 @@ onBeforeUnmount(() => {
   }
 });
 
+const store = useStore();
+const handleArtistClick = (id: number) => {
+  props.musicFull = false;
+  store.commit('setCurrentArtistId', id);
+};
+
 defineExpose({
   lrcScroll
 });

src/renderer/layout/components/PlayBar.vue

@@ -55,11 +55,12 @@
           <span
             v-for="(artists, artistsindex) in playMusic.ar || playMusic.song.artists"
             :key="artistsindex"
-            >{{ artists.name
-            }}{{
-              artistsindex < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : ''
-            }}</span
+            class="cursor-pointer hover:text-green-500"
+            @click="handleArtistClick(artists.id)"
           >
+            {{ artists.name
+            }}{{ artistsindex < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
+          </span>
         </n-ellipsis>
       </div>
     </div>
@@ -295,6 +296,9 @@ const musicFullVisible = ref(false);
 const setMusicFull = () => {
   musicFullVisible.value = !musicFullVisible.value;
   store.commit('setMusicFull', musicFullVisible.value);
+  if (musicFullVisible.value) {
+    store.commit('setShowArtistDrawer', false);
+  }
 };
 
 const palyListRef = useTemplateRef('palyListRef');
@@ -322,6 +326,11 @@ const toggleFavorite = async (e: Event) => {
 const openLyricWindow = () => {
   openLyric();
 };
+
+const handleArtistClick = (id: number) => {
+  musicFullVisible.value = false;
+  store.commit('setCurrentArtistId', id);
+};
 </script>
 
 <style lang="scss" scoped>

src/renderer/layout/components/TitleBar.vue

@@ -99,7 +99,7 @@ const drag = (event: MouseEvent) => {
   -webkit-app-region: drag;
   @apply flex justify-between px-6 py-2 select-none relative;
   @apply text-dark dark:text-white;
-  z-index: 9999999;
+  z-index: 999;
 }
 
 #buttons {