✨ feat: 添加新的歌手详情页面

src/renderer/layout/AppLayout.vue

@@ -47,13 +47,12 @@
     </div>
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />
-    <artist-drawer ref="artistDrawerRef" :show="artistDrawerShow" />
     <playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, provide, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, onMounted, provide, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
@@ -82,7 +81,6 @@ const MobilePlayBar = defineAsyncComponent(() => import('./components/MobilePlay
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
 
-const ArtistDrawer = defineAsyncComponent(() => import('@/components/common/ArtistDrawer.vue'));
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
 
 const playerStore = usePlayerStore();
@@ -98,26 +96,6 @@ onMounted(() => {
   settingsStore.initializeTheme();
 });
 
-const artistDrawerRef = ref<InstanceType<typeof ArtistDrawer>>();
-const artistDrawerShow = computed({
-  get: () => settingsStore.showArtistDrawer,
-  set: (val) => settingsStore.setShowArtistDrawer(val)
-});
-
-// 监听歌手ID变化
-watch(
-  () => settingsStore.currentArtistId,
-  (newId) => {
-    if (newId) {
-      console.log('newId', newId);
-      artistDrawerShow.value = true;
-      nextTick(() => {
-        artistDrawerRef.value?.loadArtistInfo(newId);
-      });
-    }
-  }
-);
-
 const showPlaylistDrawer = ref(false);
 const currentSongId = ref<number | undefined>();
 

src/renderer/layout/components/MusicFull.vue

@@ -142,7 +142,8 @@ import {
   textColors,
   useLyricProgress
 } from '@/hooks/MusicHook';
-import { usePlayerStore } from '@/store';
+import { useArtist } from '@/hooks/useArtist';
+import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
@@ -375,9 +376,11 @@ onBeforeUnmount(() => {
 
 const settingsStore = useSettingsStore();
 
+const { navigateToArtist } = useArtist();
+
 const handleArtistClick = (id: number) => {
   isVisible.value = false;
-  settingsStore.currentArtistId = id;
+  navigateToArtist(id);
 };
 
 const setData = computed(() => settingsStore.setData);

src/renderer/layout/components/PlayBar.vue

@@ -191,6 +191,7 @@ import {
   sound,
   textColors
 } from '@/hooks/MusicHook';
+import { useArtist } from '@/hooks/useArtist';
 import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
@@ -381,9 +382,11 @@ const openLyricWindow = () => {
   openLyric();
 };
 
+const { navigateToArtist } = useArtist();
+
 const handleArtistClick = (id: number) => {
   musicFullVisible.value = false;
-  settingsStore.currentArtistId = id;
+  navigateToArtist(id);
 };
 
 // 添加全局快捷键处理