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

src/renderer/components/common/SongItem.vue

@@ -92,8 +92,9 @@ import { computed, h, inject, ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { getSongUrl } from '@/hooks/MusicListHook';
+import { useArtist } from '@/hooks/useArtist';
 import { audioService } from '@/services/audioService';
-import { usePlayerStore, useSettingsStore } from '@/store';
+import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron } from '@/utils';
 import { getImageBackground } from '@/utils/linearColor';
@@ -121,7 +122,6 @@ const props = withDefaults(
 );
 
 const playerStore = usePlayerStore();
-const settingsStore = useSettingsStore();
 
 const message = useMessage();
 
@@ -142,6 +142,8 @@ const isDownloading = ref(false);
 
 const openPlaylistDrawer = inject<(songId: number) => void>('openPlaylistDrawer');
 
+const { navigateToArtist } = useArtist();
+
 const renderSongPreview = () => {
   return h(
     'div',
@@ -392,8 +394,7 @@ const toggleSelect = () => {
 };
 
 const handleArtistClick = (id: number) => {
-  settingsStore.setCurrentArtistId(id);
-  settingsStore.setShowArtistDrawer(true);
+  navigateToArtist(id);
 };
 
 // 获取歌手列表（最多显示5个）

src/renderer/components/home/TopBanner.vue

@@ -88,7 +88,7 @@
             class="recommend-singer-item relative"
             :class="setAnimationClass('animate__backInRight')"
             :style="setAnimationDelay(index + 2, 100)"
-            @click="handleOpenSinger(item.id)"
+            @click="handleArtistClick(item.id)"
           >
             <div
               :style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
@@ -103,7 +103,10 @@
               </div>
             </div>
             <!-- 播放按钮(hover时显示) -->
-            <div class="recommend-singer-item-play-overlay" @click.stop="handleOpenSinger(item.id)">
+            <div
+              class="recommend-singer-item-play-overlay"
+              @click.stop="handleArtistClick(item.id)"
+            >
               <div class="recommend-singer-item-play-btn">
                 <i class="iconfont icon-playfill text-4xl"></i>
               </div>
@@ -140,7 +143,8 @@ import { getDayRecommend, getHotSinger } from '@/api/home';
 import { getListDetail } from '@/api/list';
 import { getUserPlaylist } from '@/api/user';
 import MusicList from '@/components/MusicList.vue';
-import { useSettingsStore, useUserStore } from '@/store';
+import { useArtist } from '@/hooks/useArtist';
+import { useUserStore } from '@/store';
 import { IDayRecommend } from '@/type/day_recommend';
 import { Playlist } from '@/type/list';
 import type { IListDetail } from '@/type/listDetail';
@@ -169,6 +173,8 @@ const playlistLoading = ref(false);
 const playlistItem = ref<Playlist | null>(null);
 const playlistDetail = ref<IListDetail | null>(null);
 
+const { navigateToArtist } = useArtist();
+
 /**
  * 获取轮播项的样式
  * @param index 项目索引（用于动画延迟）
@@ -259,11 +265,8 @@ const loadData = async () => {
   }
 };
 
-const settingsStore = useSettingsStore();
-
-const handleOpenSinger = (id: number) => {
-  settingsStore.setCurrentArtistId(id);
-  settingsStore.setShowArtistDrawer(true);
+const handleArtistClick = (id: number) => {
+  navigateToArtist(id);
 };
 
 const toPlaylist = async (id: number) => {