feat: 在歌手详情页添加歌曲操作工具栏，支持播放全部、添加到播放列表和搜索功能，布局切换功能

src/renderer/views/artist/detail.vue

@@ -23,15 +23,103 @@
     <!-- 标签页切换 -->
     <n-tabs v-model:value="activeTab" class="content-tabs" type="line" animated>
       <n-tab-pane name="songs" :tab="t('artist.hotSongs')">
+        <!-- 添加歌曲操作工具栏 -->
+        <div class="songs-toolbar">
+          <div class="toolbar-left">
+            <n-tooltip placement="bottom" trigger="hover">
+              <template #trigger>
+                <div class="action-button hover-green" @click="handlePlayAll">
+                  <i class="icon iconfont ri-play-fill"></i>
+                </div>
+              </template>
+              {{ t('comp.musicList.playAll') }}
+            </n-tooltip>
+            
+            <n-tooltip placement="bottom" trigger="hover">
+              <template #trigger>
+                <div class="action-button hover-green" @click="addToPlaylist">
+                  <i class="icon iconfont ri-add-line"></i>
+                </div>
+              </template>
+              {{ t('comp.musicList.addToPlaylist') }}
+            </n-tooltip>
+          </div>
+          
+          <div class="toolbar-right">
+            <!-- 布局切换按钮 -->
+            <div class="layout-toggle" v-if="!isMobile">
+              <n-tooltip placement="bottom" trigger="hover">
+                <template #trigger>
+                  <div class="toggle-button hover-green" @click="toggleLayout">
+                    <i class="icon iconfont" :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"></i>
+                  </div>
+                </template>
+                {{ isCompactLayout ? t('comp.musicList.switchToNormal') : t('comp.musicList.switchToCompact') }}
+              </n-tooltip>
+            </div>
+            
+            <!-- 搜索框 -->
+            <div class="search-container" :class="{ 'search-expanded': isSearchVisible }">
+              <template v-if="isSearchVisible">
+                <n-input
+                  v-model:value="searchKeyword"
+                  :placeholder="t('comp.musicList.searchSongs')"
+                  clearable
+                  round
+                  size="small"
+                  @blur="handleSearchBlur"
+                >
+                  <template #prefix>
+                    <i class="icon iconfont ri-search-line text-sm"></i>
+                  </template>
+                  <template #suffix>
+                    <i class="icon iconfont ri-close-line text-sm cursor-pointer" @click="closeSearch"></i>
+                  </template>
+                </n-input>
+              </template>
+              <template v-else>
+                <n-tooltip placement="bottom" trigger="hover">
+                  <template #trigger>
+                    <div class="search-button" @click="showSearch">
+                      <i class="icon iconfont ri-search-line"></i>
+                    </div>
+                  </template>
+                  {{ t('comp.musicList.searchSongs') }}
+                </n-tooltip>
+              </template>
+            </div>
+          </div>
+        </div>
+        
         <div class="songs-list">
           <div class="song-list-content">
-            <song-item
-              v-for="song in songs"
-              :key="song.id"
-              :item="song"
-              :list="true"
-              @play="handlePlay"
-            />
+            <div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
+              {{ t('comp.musicList.noSearchResults') }}
+            </div>
+            
+            <!-- 替换原来的 v-for 循环为虚拟列表 -->
+            <n-virtual-list
+              ref="songListRef"
+              class="song-virtual-list"
+              style="height: calc(80vh - 60px)"
+              :items="filteredSongs"
+              :item-size="isCompactLayout ? 50 : 70"
+              item-resizable
+              key-field="id"
+              @scroll="handleVirtualScroll"
+            >
+              <template #default="{ item, index }">
+                <div class="double-item">
+                  <song-item
+                    :index="index"
+                    :compact="isCompactLayout"
+                    :item="formatSong(item)"
+                    @play="handlePlay"
+                  />
+                </div>
+              </template>
+            </n-virtual-list>
+            
             <div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
             <div v-else-if="songPage.hasMore" ref="songsLoadMoreRef" class="load-more-trigger"></div>
           </div>
@@ -76,6 +164,8 @@ import { useDateFormat } from '@vueuse/core';
 import { computed, onMounted, onUnmounted, ref, watch, nextTick, onActivated, onDeactivated } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import PinyinMatch from 'pinyin-match';
+import { useMessage } from 'naive-ui';
 
 import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
 import { getMusicDetail } from '@/api/music';
@@ -84,7 +174,7 @@ import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import { usePlayerStore } from '@/store';
 import { IArtist } from '@/type/artist';
-import { getImgUrl } from '@/utils';
+import { getImgUrl, isMobile } from '@/utils';
 
 defineOptions({
   name: 'ArtistDetail'
@@ -93,6 +183,7 @@ defineOptions({
 const { t } = useI18n();
 const route = useRoute();
 const playerStore = usePlayerStore();
+const message = useMessage();
 
 const artistId = computed(() => Number(route.params.id));
 const activeTab = ref('songs');
@@ -135,6 +226,11 @@ const artistDataCache = new Map();
 // 单个缓存键函数
 const getCacheKey = (id: string | number) => `artist_${id}`;
 
+// 搜索和布局相关
+const searchKeyword = ref('');
+const isSearchVisible = ref(false);
+const isCompactLayout = ref(isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact');
+
 // 加载歌手信息
 const loadArtistInfo = async () => {
   if (!artistId.value) return;
@@ -268,13 +364,151 @@ const formatPublishTime = (time: number) => {
   return useDateFormat(time, 'YYYY-MM-DD').value;
 };
 
-const handlePlay = () => {
-  playerStore.setPlayList(
-    songs.value.map((item) => ({
-      ...item,
-      picUrl: item.al.picUrl
-    }))
+// 搜索相关方法
+const showSearch = () => {
+  isSearchVisible.value = true;
+  // 添加一个小延迟后聚焦搜索框
+  nextTick(() => {
+    const inputEl = document.querySelector('.search-container input');
+    if (inputEl) {
+      (inputEl as HTMLInputElement).focus();
+    }
+  });
+};
+
+const closeSearch = () => {
+  isSearchVisible.value = false;
+  searchKeyword.value = '';
+};
+
+const handleSearchBlur = () => {
+  // 如果搜索框为空，则在失焦时关闭搜索框
+  if (!searchKeyword.value) {
+    setTimeout(() => {
+      isSearchVisible.value = false;
+    }, 200);
+  }
+};
+
+// 过滤歌曲列表
+const filteredSongs = computed(() => {
+  if (!searchKeyword.value) {
+    return songs.value;
+  }
+
+  const keyword = searchKeyword.value.toLowerCase().trim();
+  return songs.value.filter((song) => {
+    const songName = song.name?.toLowerCase() || '';
+    const albumName = song.al?.name?.toLowerCase() || '';
+    const artists = song.ar || song.artists || [];
+
+    // 原始文本匹配
+    const nameMatch = songName.includes(keyword);
+    const albumMatch = albumName.includes(keyword);
+    const artistsMatch = artists.some((artist: any) => {
+      return artist.name?.toLowerCase().includes(keyword);
+    });
+
+    // 拼音匹配
+    const namePinyinMatch = song.name && PinyinMatch.match(song.name, keyword);
+    const albumPinyinMatch = song.al?.name && PinyinMatch.match(song.al.name, keyword);
+    const artistsPinyinMatch = artists.some((artist: any) => {
+      return artist.name && PinyinMatch.match(artist.name, keyword);
+    });
+
+    return (
+      nameMatch ||
+      albumMatch ||
+      artistsMatch ||
+      namePinyinMatch ||
+      albumPinyinMatch ||
+      artistsPinyinMatch
+    );
+  });
+});
+
+// 布局切换
+const toggleLayout = () => {
+  isCompactLayout.value = !isCompactLayout.value;
+  localStorage.setItem('musicListLayout', isCompactLayout.value ? 'compact' : 'normal');
+};
+
+// 播放全部
+const handlePlayAll = () => {
+  if (filteredSongs.value.length === 0) return;
+  
+  playerStore.setPlayList(filteredSongs.value.map(song => ({
+    ...song,
+    picUrl: song.al.picUrl
+  })));
+  
+  // 开始播放第一首
+  playerStore.setPlay(filteredSongs.value[0]);
+  
+  message.success(t('comp.musicList.playAll'));
+};
+
+// 添加到播放列表
+const addToPlaylist = () => {
+  if (filteredSongs.value.length === 0) return;
+  
+  // 获取当前播放列表
+  const currentList = playerStore.playList;
+  
+  // 添加歌曲到播放列表(避免重复添加)
+  const newSongs = filteredSongs.value.filter(song => 
+    !currentList.some(item => item.id === song.id)
   );
+  
+  if (newSongs.length === 0) {
+    message.info(t('comp.musicList.songsAlreadyInPlaylist'));
+    return;
+  }
+  
+  // 合并到当前播放列表末尾
+  const newList = [
+    ...currentList, 
+    ...newSongs.map(song => ({
+      ...song,
+      picUrl: song.al.picUrl
+    }))
+  ];
+  
+  playerStore.setPlayList(newList);
+  
+  message.success(t('comp.musicList.addToPlaylistSuccess', { count: newSongs.length }));
+};
+
+const handlePlay = (song?: any) => {
+  // 如果传入了特定歌曲（点击单曲播放），则将其作为播放列表的第一首
+  if (song) {
+    const songList = [...filteredSongs.value];
+    const index = songList.findIndex(item => item.id === song.id);
+    
+    if (index !== -1) {
+      // 将点击的歌曲移到第一位
+      const clickedSong = songList.splice(index, 1)[0];
+      songList.unshift(clickedSong);
+    }
+    
+    playerStore.setPlayList(
+      songList.map(item => ({
+        ...item,
+        picUrl: item.al?.picUrl || item.picUrl
+      }))
+    );
+    
+    // 设置当前播放歌曲
+    playerStore.setPlay(song);
+  } else {
+    // 默认行为：播放整个过滤后的列表
+    playerStore.setPlayList(
+      filteredSongs.value.map(item => ({
+        ...item,
+        picUrl: item.al?.picUrl || item.picUrl
+      }))
+    );
+  }
 };
 
 // 简化观察器设置
@@ -326,6 +560,13 @@ watch([songsLoadMoreRef, albumsLoadMoreRef], () => {
   setupObservers();
 });
 
+// 搜索词变化时重新设置观察器
+watch(searchKeyword, () => {
+  nextTick(() => {
+    setupObservers();
+  });
+});
+
 onActivated(() => {
   // 确保当前路由是艺术家详情页
   if (route.name === 'artistDetail') {
@@ -370,6 +611,37 @@ onUnmounted(() => {
     albumsObserver = null;
   }
 });
+
+// 定义在script setup部分
+const songListRef = ref(null);
+
+// 格式化歌曲（使用在虚拟列表中）
+const formatSong = (item: any) => {
+  if (!item) {
+    return null;
+  }
+  return {
+    ...item,
+    picUrl: item.al?.picUrl || item.picUrl
+  };
+};
+
+// 处理虚拟列表滚动
+const handleVirtualScroll = (e: any) => {
+  if (!e || !e.target) return;
+
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+  const threshold = 200;
+
+  if (
+    scrollHeight - scrollTop - clientHeight < threshold &&
+    !songLoading.value &&
+    songPage.value.hasMore &&
+    !searchKeyword.value // 搜索状态下不触发加载更多
+  ) {
+    loadSongs();
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -441,5 +713,73 @@ onUnmounted(() => {
       @apply text-sm leading-relaxed whitespace-pre-wrap;
     }
   }
+  
+  // 添加歌曲工具栏样式
+  .songs-toolbar {
+    @apply flex items-center justify-between mb-4;
+    
+    .toolbar-left, .toolbar-right {
+      @apply flex items-center gap-2;
+    }
+  }
+  
+  // 搜索框样式
+  .search-container {
+    @apply max-w-md transition-all duration-300 ease-in-out;
+
+    &.search-expanded {
+      @apply w-52;
+    }
+
+    .search-button {
+      @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
+      
+      .icon {
+        @apply text-lg;
+      }
+    }
+
+    :deep(.n-input) {
+      @apply bg-light-200 dark:bg-dark-200;
+    }
+  }
+  
+  // 操作按钮样式
+  .layout-toggle .toggle-button,
+  .action-button {
+    @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
+    
+    .icon {
+      @apply text-lg;
+    }
+    
+    &.hover-green:hover {
+      .icon {
+        @apply text-green-500;
+      }
+    }
+  }
+  
+  // 搜索无结果样式
+  .no-result {
+    @apply text-center py-8 text-gray-500 dark:text-gray-400;
+  }
+  
+  // 虚拟列表样式
+  .song-virtual-list {
+    :deep(.n-virtual-list__scroll) {
+      scrollbar-width: thin;
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-thumb {
+        @apply bg-gray-400 dark:bg-gray-600 rounded;
+      }
+    }
+  }
+  
+  .double-item {
+    @apply mb-2 bg-light-100 bg-opacity-30 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
+  }
 }
 </style>